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文件时,修改加载的文件名
? 注意:同时需要显示属性时,也要修改为你的文件中的属性字段名;
然后就可以运行,显示你的数据和对应字段属性啦!
【运行界面——点击运行,会自动将视图窗口显示到数据区域,有时要多等待十几秒钟】
【放大显示属性】