geojson数据常用于绘制一个区域范围,在之前的百度echarts中绘制区域的时候经常会用到,Cesium中同样可以用,通过将geojson的文件数据导入到Cesium中,具体中国每个行政区的geojson文件可以在网站https://datav.aliyun.com/portal/school/atlas/area\_selector 中制作。实现在cesium的地球中描绘出具体的行政区域,并可以在行政区域内添加一些其他操作,实现想要实现的功能。具体的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<div id="credit"></div>
<script>
// 设置token
Cesium.Ion.defaultAccessToken = 'token';
//初始化div容器为cesium
var viewer = new Cesium.Viewer('cesiumContainer');
//加载geojson文件
let geojson = Cesium.GeoJsonDataSource.load('china.json', {
//设置边框为蓝色
stroke: Cesium.Color.BLUE,
//设置填充区域为半透明的粉色
fill: Cesium.Color.PINK.withAlpha(0.5),
//设置边框宽度为3
strokeWidth: 3
})
//将geojson文件添加到场景中
viewer.dataSources.add(geojson);
var destination = Cesium.Cartesian3.fromDegrees(115.7, 39.54, 100000); // 目标位置的经纬度和高度
var orientation = {
heading: Cesium.Math.toRadians(0), // 水平方向的旋转角度
pitch: Cesium.Math.toRadians(-90), // 俯仰角度
roll: 0 // 翻滚角度
};
viewer.camera.flyTo({
destination: destination,
orientation: orientation,
duration: 3 // 过渡动画的持续时间(秒)
});
</script>
</div>
</body>
</html>
效果图
以上如果有问题可以在评论区给我留言!