整合一下网上的各种cesium局部地形图展示效果

只会Flutter的小白

已于 2022-10-20 10:24:51 修改

阅读量1.1k

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2022-10-20 10:19:33 首次发布

本文链接：https://blog.csdn.net/qq_35841292/article/details/127421694

版权

该博客介绍了如何使用Cesium库加载Geojson数据，创建并展示局部地形图，并实现云层效果、地形遮罩以及动态立体墙的3D效果。通过代码示例展示了从JSON文件读取数据，处理经纬度坐标，以及设置材质和高度等细节，最终实现了一个具有视觉冲击力的3D地图场景。

摘要由CSDN通过智能技术生成

整合一下网上的cesium局部地形图展示效果

上代码：

<script>
createGlb() {
    // 使用jQuery加载Geojson数据（只有单个面）
    //开启云层
	let winow.viewer = viewer;
    window.viewer.scene.primitives.add(
      new Cesium.CloudCollection({
        noiseDetail: 16.0,
        noiseOffset: Cesium.Cartesian3.ZERO,
      })
    );
      window.viewer.scene.skyAtmosphere.show = false;
      window.viewer.scene.globe.depthTestAgainstTerrain = false;
      viewer.scene.skyAtmosphere.show = false; //关闭大气层阴影
      // screenSpaceCameraController获取用于摄像机输入处理的控制器;
      // enableCollisionDetectio启用或禁用摄影机与地形的碰撞检测,
      //   为true不会进入地下;
      // scene.screenSpaceCameraController.enableCollisionDetection = false;
      const data = require('../../../public/zhejiang.json')
      console.log(data)
      let features = data.features;
      let positionArray = [];

      // 获取区域的经纬度坐标
      for (let i = 0; i < features[0].geometry.coordinates[0][0].length; i++) {
        let coor = features[0].geometry.coordinates[0][0][i];			//如果直接导入的边界json数据就换成这个coordinates[0][i];
        positionArray.push(coor[0]);
        positionArray.push(coor[1]);
      }
      // 遮罩
      let polygonEntity = new Cesium.Entity({
        polygon: {
          hierarchy: {
            // 添加外部区域为1/4半圆，设置为180会报错
            positions: Cesium.Cartesian3.fromDegreesArray([0, 0, 0, 90, 179, 90, 179, 0]),
            // 中心挖空的“洞”
            holes: [{
              positions: Cesium.Cartesian3.fromDegreesArray(positionArray)
            }]
          },
          material:  Cesium.Color.fromCssColorString("#0C1F34")
        }
      })
      const entity3 = new Cesium.Entity({
        name: "动态立体墙",
        wall: {
          positions: Cesium.Cartesian3.fromDegreesArray(positionArray),
          maximumHeights: Cesium.Cartesian3.fromDegreesArray(positionArray).map((res) => {
            return 2000;
          }),
          minimumHeights: Cesium.Cartesian3.fromDegreesArray(positionArray).map((res) => {
            return -2000;
          }),
          material: Cesium.Color.fromCssColorString("#6dcdeb"),
        },
      });
      // // 边界线
      // let lineEntity = new Cesium.Entity({
      //   polyline: {
      //     positions: Cesium.Cartesian3.fromDegreesArray(positionArray),
      //     width: 5,
      //     material: Cesium.Color.YELLOW,
      //   }
      // })
      window.viewer.entities.add(polygonEntity);
      window.viewer.entities.add(entity3);
      window.viewer.flyTo(entity3);
  },
};