Cesium加载GeoJson数据

最新推荐文章于 2024-05-29 14:15:41 发布

ShineMan-

最新推荐文章于 2024-05-29 14:15:41 发布

阅读量4.8k

点赞数 7

分类专栏： cesium 3D 文章标签： Cesium 3D 三维开发

本文链接：https://blog.csdn.net/Enbir/article/details/122597412

版权

cesium 同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

直接上图
加载GeoJson数据
GeoJson数据简介
GeoJSON是一种对各种地理数据结构进行编码的格式，符合JSON格式规范的地理空间信息数据交换格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
获取中国行政区边界GeoJson数据地址：http://datav.aliyun.com/portal/school/atlas/area_selector

加载GeoJson数据（以中国行政区划界限为例）

   viewer.dataSources.add(Cesium.GeoJsonDataSource.load('./data/中华人民共和国.json', {
        stroke: Cesium.Color.HOTPINK,
        fill: Cesium.Color.PINK.withAlpha(0.5),
        strokeWidth: 3
    }));

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="../../Build/Cesium/Cesium.js"></script>
  <link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken = Ceisum Token

    const viewer = new Cesium.Viewer('cesiumContainer', {
      // terrainProvider: Cesium.createWorldTerrain(),
      homeButton:false,
      sceneModePicker:false,
      baseLayerPicker:false,
      navigationHelpButton:false,
      animation:false,
      timeline:false,
      fullscreenButton:false,
      vrButton:false,
      infoBox:true,

    });   
    var webKey = 天地图Token

    viewer._cesiumWidget._creditContainer.style.display = "none";		//去掉左下角那个不可爱的图标
    
//影像底图
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
  url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+webKey,
        layer: "tdtBasicLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",
        show: false
}));

//影像注记
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
  url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk="+webKey,
    layer: "tdtAnnoLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
    show: false
}));
// 将三维球定位到中国
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
    orientation: {
    heading :  Cesium.Math.toRadians(348.4202942851978),
    pitch : Cesium.Math.toRadians(-89.74026687972041),
    roll : Cesium.Math.toRadians(0)
    },
    complete:function callback() {
      // 定位完成之后的回调函数
    }
    });

    //加载GeoJson数据
   viewer.dataSources.add(Cesium.GeoJsonDataSource.load('./data/中华人民共和国.json', {
        stroke: Cesium.Color.HOTPINK,
        fill: Cesium.Color.PINK.withAlpha(0.5),
        strokeWidth: 3
    }));
  </script>
</body>
<style>
   .cesium-viewer-toolbar{
     visibility: hidden;
   }
</style>
</html>

赠人玫瑰，手有余香，记得随手点赞哦 ~

ShineMan-

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
2
评论
Cesium加载GeoJson数据

直接上图GeoJson数据简介GeoJSON是一种对各种地理数据结构进行编码的格式，符合JSON格式规范的地理空间信息数据交换格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。获取中国行政区边界GeoJson数据地址：http://datav.aliyun.com/portal/school/atlas/area_selector加载GeoJson
复制链接

扫一扫