Cesium导入geojson数据

baker_zhuang

已于 2024-05-22 14:20:32 修改

阅读量512

点赞数

分类专栏： cesium 文章标签： Cesium

于 2023-09-08 14:34:23 首次发布

本文链接：https://blog.csdn.net/qq_26881073/article/details/132972262

版权

cesium 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

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>

效果图

以上如果有问题可以在评论区给我留言！

baker_zhuang

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Cesium导入geojson数据

geojson数据常用于绘制一个区域范围，在之前的百度echarts中绘制区域的时候经常会用到，Cesium中同样可以用，通过将geojson的文件数据导入到Cesium中，具体中国每个行政区的geojson文件可以在网站https://datav.aliyun.com/portal/school/atlas/area_s...
复制链接

扫一扫