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

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

相关文章
|
11月前
|
JavaScript 前端开发 定位技术
Cesium介绍和入门
这篇文章介绍了Cesium的基本概念及其在Web开发中的应用,包括如何集成Cesium并使用它来创建和展示3D地图。
1083 4
Cesium介绍和入门
geojson格式筛选及处理的解决方案
geojson格式筛选及处理的解决方案
345 0
|
定位技术 API 网络架构
地图图层接入:从mapbox转向cesium
由于地图坐标系的不统一,地图图商提供的图层服务也各有特色,在图层对接的开发过程中常会遇到许多坑,从二维图层到三维图层,地图引擎mapbox再到cesium,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
4301 10
|
定位技术
干货!解决Cesium中Entity移动漂移的问题
案例场景:在Cesium开发三维场景展示中,肯定会碰到加载Entity的需求,如果在你的gis应用中,带了地形的展示。那么在旋转切换画面时,Entity是否跟着一起动了起来,感觉像漂移一样呢?
4099 0
干货!解决Cesium中Entity移动漂移的问题
cesium添加实体不被地形遮挡的参数设置
disableDepthTestDistance:指定从相机到禁用深度测试的距离,关于深度测试我们将在后面的文章中介绍到,由于深度测试的存在,我们的对象很多时候会被地形挡住,如下:
2687 0
cesium添加实体不被地形遮挡的参数设置
Google Earth Engine(GEE)——导出指定区域的河流和流域范围
Google Earth Engine(GEE)——导出指定区域的河流和流域范围
702 0
Threejs实现模拟河流,水面水流,水管水流,海面
Threejs实现模拟河流,水面水流,水管水流,海面
3205 0
Threejs实现模拟河流,水面水流,水管水流,海面
|
11月前
|
JSON 数据格式
Cesium实现贴地线
这篇文章介绍了在Cesium中实现地面贴合线的效果及其相关技术要点。
249 5
Cesium实现贴地线
|
6月前
|
JSON JavaScript 前端开发
shpfile转GeoJSON;控制shp转GeoJSON的精度;如何获取GeoJSON;GeoJSON是什么有什么用;GeoJSON结构详解(带数据示例)
在使用Openlayers、leaflet、mapbox等地图控件的时候,GeoJSON几乎是不可避免打交道的数据类型,如果您想要从事gis行业相关的开发工作,本篇文章应该能为您带来一些帮助。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
cesium自带的组件显示与隐藏
这篇文章讲解了如何控制Cesium中自带组件的显示与隐藏,包括了各个组件的属性名称及其对应的显示隐藏操作方法。
405 0
cesium自带的组件显示与隐藏