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

最新推荐文章于 2024-04-12 07:38:10 发布

表演系小学渣

最新推荐文章于 2024-04-12 07:38:10 发布

阅读量3k

点赞数

分类专栏： # Cesium学习文章标签： geojson 加载json Cesium

本文链接：https://blog.csdn.net/weixin_41996632/article/details/102464117

版权

Cesium学习专栏收录该内容

5 篇文章 2 订阅

订阅专栏

一、加载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;加载后右侧显示配置无效

表演系小学渣

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
四、Cesium加载geojson数据展示区块、加载kml文件数据

一、加载geojson数据获取geojson，下载路径：https://download.csdn.net/download/weixin_41996632/11839214在Cesium APP文件夹下创建assets，然后将json文件拷贝到该文件夹下，引用代码如下，记得修改文件加载路径修改代码，若是从上面路径下载的文件记得打开文件然后删除"china_zz_20191009 ...
复制链接

扫一扫