Cesium开发入门——Demo03：加载JSON文件并显示属性

最新推荐文章于 2024-06-25 10:26:03 发布

刘彩虹

最新推荐文章于 2024-06-25 10:26:03 发布

阅读量6.5k

点赞数

分类专栏： 2016-2021 学习随记文章标签： Cesium添加显示JSON文件 shp文件在线转JSON文件显示Json文件属性 Cesium入门

本文链接：https://blog.csdn.net/qq_41553157/article/details/91040920

版权

2016-2021 学习随记专栏收录该内容

32 篇文章 9 订阅

订阅专栏

1.Shp文件转为JSON文件

通过Mapshaper进行Shp文件到JSON文件的在线转换
【由此进入MapShaper，该网站可能会打不开，建议换不同浏览器多次尝试】

如图，输入所有的Shp相关文件进行转换，然后点击“import”，会有一个预览图，确认无误之后，点击右上角Export导出，保存Json文件。

2.加载JSON文件显示属性

①文件放置位置：转换后的Json文件与加载Json文件的HTML文件放在同一文件夹下；
在这里插入图片描述
②加载文件代码；

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<script src="https://cesiumjs.org/releases/1.57/Build/Cesium/Cesium.js"></script>
		<link href="https://cesiumjs.org/releases/1.57/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
	</head>
	<body>
		<p><input type="checkbox" id="baselayer" name="baselayer" value="baselayer" checked="true" />Json图层 </p>
		<div id="cesiumContainer"></div>
		<script>
			Cesium.Ion.defaultAccessToken =
				'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5MjMyYjZiMC1lZmY1LTQzNmEtODg1NS01NmQzMmE2NWY2ZjMiLCJpZCI6NDQ1MSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MDg4NTM2Mn0.7OzWWlmUmJv_EJo0RFpuiL2G_KLgZBENAAXOgU1O1qM';
			var viewer = new Cesium.Viewer('cesiumContainer');

			var geojsonOptions = {
				clampToGround: true
			};

			var dataPromise = Cesium.GeoJsonDataSource.load('population.json', geojsonOptions);

			dataPromise.then(function(dataSource) {
				// Add the new data as entities to the viewer
				viewer.dataSources.add(dataSource);

				viewer.flyTo(dataSource);

				//设置符号
				SetSymbol(dataSource);
				//与checkbox关联，控制开关图层
				var element = document.getElementById('baselayer');
				element.addEventListener('change', function(e) {
					dataSource.show = e.target.checked;
				});
			});

			function SetSymbol(dataSource) {
				
				// Get the array of entities
				var neighborhoodEntities = dataSource.entities.values;
				for (var i = 0; i < neighborhoodEntities.length; i++) {
					var entity = neighborhoodEntities[i];

					if (Cesium.defined(entity.polygon)) {
						// entity styling code here
						// Use geojson neighborhood value as entity name
						entity.name = entity.properties.ENGLISH;

						// Set the polygon material to a random, translucent color.
						entity.polygon.material = Cesium.Color.fromRandom({
							// red: 0.5,
							// maximumGreen: 0.9,
							// minimumBlue: 0.1,
							alpha: 0.4
						});

						// Generate Polygon position
						var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
						//获取多边形中心,以便放置注记
						var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
						polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);

						entity.position = polyCenter;

						// 生成注记
						entity.label = {
							text: entity.name,
							showBackground: true,
							scale: 0.7,
							horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
							verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
							heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
							distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000000.0),
							disableDepthTestDistance: 10000.0
						};
					}
				}
			}
		</script>
	</body>
</html>

? 注意：加载你自己的JSON文件时，修改加载的文件名
在这里插入图片描述
? 注意：同时需要显示属性时，也要修改为你的文件中的属性字段名；

然后就可以运行，显示你的数据和对应字段属性啦！
【运行界面——点击运行，会自动将视图窗口显示到数据区域，有时要多等待十几秒钟】
在这里插入图片描述
【放大显示属性】

刘彩虹

关注

0
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
Cesium开发入门——Demo03：加载JSON文件并显示属性

1.Shp文件转为JSON文件通过Mapshaper进行Shp文件到JSON文件的在线转换【由此进入MapShaper，该网站可能会打不开，建议换不同浏览器多次尝试】如图，输入所有的Shp相关文件进行转换，然后点击“import”，会有一个预览图，确认无误之后，点击右上角Export导出，保存Json文件。2.加载JSON文件显示属性①文件放置位置：转换后的Json文件与加载Json文...
复制链接

扫一扫

专栏目录