四、Cesium加载geojson数据展示区块、加载kml文件数据_cesium geojson 专题信息展示

作者：煮酒与君饮 | 2024-08-07 05:27:48

踩

cesium geojson 专题信息展示

一、加载geojson数据

获取geojson，下载路径：https://download.csdn.net/download/weixin_41996632/11839214

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

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


 
<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>

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

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

以下代码为颜色随机值油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>

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

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】