Cesium导入geojson数据

简介: 这篇文章详细描述了如何在Cesium中导入GeoJSON数据来绘制地理矢量数据,并提供了实现的具体方法和示例代码。

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>

效果图 1694090234527.jpg

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

相关文章
|
3月前
|
数据可视化 JavaScript 前端开发
Cesium案例解析(五)——3DTilesPhotogrammetry摄影测量3DTiles数据
Cesium案例解析(五)——3DTilesPhotogrammetry摄影测量3DTiles数据
107 0
|
4月前
echarts 数据格式化
echarts 数据格式化
44 0
|
12月前
|
JSON 数据格式
ECharts折线图渲染json格式数据(格式为对象)
ECharts折线图渲染json格式数据(格式为对象)
130 0
|
12月前
|
JSON 数据格式
ECharts折线图渲染json格式数据(格式为数组)
ECharts折线图渲染json格式数据(格式为数组)
82 0
|
12月前
|
JSON 前端开发 数据处理
Echarts请求不同格式的json数据处理
Echarts请求不同格式的json数据处理
70 0
|
12月前
|
前端开发
ajax+json实现echarts多个统计图显示
ajax+json实现echarts多个统计图显示
49 0
262Echarts - 3D 路径图(Flights on Geo3D)
262Echarts - 3D 路径图(Flights on Geo3D)
84 0
|
JavaScript 数据可视化 定位技术
Echarts实战案例代码(11):利用geojson数据地图map组件生成js本地版直接访问的解决方案
Echarts实战案例代码(11):利用geojson数据地图map组件生成js本地版直接访问的解决方案
427 0
|
JSON JavaScript 数据格式
echarts读取excle转为json格式显示图表异步加载数据的方法(2)
echarts读取excle转为json格式显示图表异步加载数据的方法(2)
117 0