四、Cesium加载geojson数据展示区块、加载kml文件数据

悠悠 2023-06-05 15:58 3阅读 0赞

一、加载geojson数据

获取geojson，下载路径：[https://download.csdn.net/download/weixin\_41996632/11839214][https_download.csdn.net_download_weixin_41996632_11839214]

在Cesium APP文件夹下创建assets，然后将json文件拷贝到该文件夹下，引用代码如下，

记得修改文件加载路径修改代码，若是从上面路径下载的文件记得打开文件然后删除"china\_zz\_20191009   "

![20191009163222577.png][]

<body>
        <div id="cesiumContainer"></div>
        <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
     //Seed the random number generator for repeatable results.
        Cesium.Math.setRandomNumberSeed(0);
        var promise=Cesium.GeoJsonDataSource.load('./assets/china_zz_20191009.json');
        promise.then(function(dataSource) {
            viewer.dataSources.add(dataSource);
            var entities = dataSource.entities.values;
            var colorHash = {};
            for (var i = 0; i < entities.length; i++) {
                var entity = entities[i];
                var name = entity.name;
                var color = colorHash[name];
                if (!color) {
                    color = Cesium.Color.fromRandom({
                        red: 1,
                    	maximumGreen: 1,
                    	maximumBlue: 1,
                        alpha : 1.0
                    });
                    colorHash[name] = color;
                }
                entity.polygon.material = color;
                entity.polygon.outline = false;            
                entity.polygon.extrudedHeight =5000.0;
                }
            });
            viewer.flyTo(promise);
        </script>
    </body>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70][]

高低起伏显示，修改以上代码

entity.polygon.extrudedHeight = entity.properties.adcode._value / 10;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 1][]

以下代码为颜色随机 值油0~1

color = Cesium.Color.fromRandom({
                    	red: 1,
                    	maximumGreen: 1,
                    	maximumBlue: 1,
                        alpha : 1.0
                    });

二、加载kml文件数据

下载kml文件，地址：待写入

将下载的文件放入到和上面json同级文件夹下，该数据是厦门的kml文件数据，加载kml文件数据代码如下

<body>
        <div id="cesiumContainer"></div>
        <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
     	 // 加载kml数据，更改description信息，多了黄色的标签里面包含的
    
    	 var kmlOptions = {
    		 camera : viewer.scene.camera,
    		 canvas : viewer.scene.canvas,
    		 clampToGround : true
    	 };
    	 // Load geocache points of interest from a KML file
    	 // Data from : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
    	 var geocachePromise = Cesium.KmlDataSource.load('./assets/doc.kml', kmlOptions);
    
    	// Add geocache billboard entities to scene and style them
    	geocachePromise.then(function(dataSource) {
    		// Add the new data as entities to the viewer
    		viewer.dataSources.add(dataSource);
    
    		// Get the array of entities
    		var geocacheEntities = dataSource.entities.values;
    
    		for (var i = 0; i < geocacheEntities.length; i++) {
    			var entity = geocacheEntities[i];
    			if (Cesium.defined(entity.billboard)) {
    				// Adjust the vertical origin so pins sit on terrain
    				entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
    				// Disable the labels to reduce clutter
    				entity.label = undefined;
    				// Add distance display condition
    				entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
    				// Compute latitude and longitude in degrees
    				var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
    				var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
    				var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
    
    				// Modify description(将信息添加到description描述信息中，我们这里只添加经纬度)
    				var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
    				'<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
    				'<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
    				'</tbody></table>';
    				entity.description = description;
    			}
    		}
    	});
    
        </script>
    </body>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 2][]

遗留问题:entity.description = description;加载后右侧显示配置无效

[https_download.csdn.net_download_weixin_41996632_11839214]: https://download.csdn.net/download/weixin_41996632/11839214
[20191009163222577.png]: /images/20230601/e6657bc0177546d5a591377a13d0b449.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70]: /images/20230601/4c026624578f47ebb7de46e2f3f6413e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 1]: /images/20230601/5fc1b9b8ac024b20a0393aa55dc4c20b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 2]: /images/20230601/1d64ecf0d8a04eec9c906c4d31344452.png