mirror of
				https://github.com/jiawanlong/Cesium-Examples.git
				synced 2025-11-04 01:04:17 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			82 lines
		
	
	
		
			2.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			82 lines
		
	
	
		
			2.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!--********************************************************************
 | 
						|
* by jiawanlong
 | 
						|
*********************************************************************-->
 | 
						|
<!DOCTYPE html>
 | 
						|
<html>
 | 
						|
 | 
						|
<head>
 | 
						|
    <meta charset="UTF-8" />
 | 
						|
    <link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
 | 
						|
    <script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
 | 
						|
    <script src="./turf.min.js"></script>
 | 
						|
</head>
 | 
						|
 | 
						|
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
 | 
						|
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
 | 
						|
    <script type="text/javascript">
 | 
						|
 | 
						|
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwNDljNWFmZC03MzRlLTRiMDMtYWIwMi00Yjk4YWQ4NzQwZGEiLCJpZCI6MjU5LCJpYXQiOjE3NTEzNzkyMzR9.OTqPNs3UGNnT1LYkPTavV80wN8Es_YphpJgQcpdnqWc'
 | 
						|
        const viewer = new Cesium.Viewer('map', {});
 | 
						|
        var points = turf.randomPoint(50, { bbox: [100, 20, 101, 21] });
 | 
						|
 | 
						|
        for (var i = 0; i < points.features.length; i++) {
 | 
						|
            points.features[i].properties.z = ~~(Math.random() * 9);
 | 
						|
        }
 | 
						|
        
 | 
						|
        points.features.push({
 | 
						|
            type: 'Feature',
 | 
						|
            geometry: {
 | 
						|
                type: 'Point',
 | 
						|
                coordinates: [100, 20]
 | 
						|
            },
 | 
						|
            properties: {
 | 
						|
                z: 5
 | 
						|
            }
 | 
						|
        });
 | 
						|
        points.features.push({
 | 
						|
            type: 'Feature',
 | 
						|
            geometry: {
 | 
						|
                type: 'Point',
 | 
						|
                coordinates: [101, 20]
 | 
						|
            },
 | 
						|
            properties: {
 | 
						|
                z: 3
 | 
						|
            }
 | 
						|
        });
 | 
						|
        points.features.push({
 | 
						|
            type: 'Feature',
 | 
						|
            geometry: {
 | 
						|
                type: 'Point',
 | 
						|
                coordinates: [101, 21]
 | 
						|
            },
 | 
						|
            properties: {
 | 
						|
                z: 4
 | 
						|
            }
 | 
						|
        });
 | 
						|
        points.features.push({
 | 
						|
            type: 'Feature',
 | 
						|
            geometry: {
 | 
						|
                type: 'Point',
 | 
						|
                coordinates: [100, 21]
 | 
						|
            },
 | 
						|
            properties: {
 | 
						|
                z: 2
 | 
						|
            }
 | 
						|
        });
 | 
						|
        var tin = turf.tin(points, 'z');
 | 
						|
        var promise = Cesium.GeoJsonDataSource.load(tin, {});
 | 
						|
        promise.then(function (dataSource) {
 | 
						|
            viewer.dataSources.add(dataSource);
 | 
						|
            var entities = dataSource.entities.values;
 | 
						|
            for (var o = 0; o < entities.length; o++) {
 | 
						|
                var r = entities[o];
 | 
						|
                r.polygon.material = Cesium.Color.fromRandom({
 | 
						|
                    alpha: 0.7
 | 
						|
                });
 | 
						|
            }
 | 
						|
        });
 | 
						|
        viewer.flyTo(promise);
 | 
						|
    </script>
 | 
						|
</body>
 | 
						|
 | 
						|
</html> |