Cesium地形开挖 (根据所给的点,自定义形状)

最新推荐文章于 2024-06-29 15:46:43 发布

qq_43466127

最新推荐文章于 2024-06-29 15:46:43 发布

阅读量571

点赞数 16

分类专栏： Cesium示例专栏文章标签： javascript vue.js 前端框架

本文链接：https://blog.csdn.net/qq_43466127/article/details/137146522

版权

Cesium示例专栏专栏收录该内容

1 篇文章 0 订阅

订阅专栏

cesium在我们的gis开发中经常会用到,而这其中,我们常常需要用到地形开挖这个功能,那么今天我就根据官网示例的代码,帮助大家完成一个cesium地形开挖的例子.

效果图

首先我们先来看一下实现的效果

那么我们接下来一起来完成这个效果

第一步

利用cdn来引入cesium

 <script src="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.101.0/Cesium.js"></script>
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.101.0/Widgets/widgets.min.css"
      rel="stylesheet"
    />

第二步

加载地球

 html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer">
    </div>



Cesium.Ion.defaultAccessToken =
        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiMmM0NmVlNC1lNmQwLTQxMzktOTkyMy0zOTJkMGQ4ZDJiMmMiLCJpZCI6MTM3MDgsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyJdLCJpYXQiOjE1NjM4Njc3MjJ9.jx48UCxoKCjDWPVfXZnAkUYDPORWEyIvWrg2ZFuwdRk'
      const Viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain(),
      })

第三步创建剪切平面进行地形剖切

 let points
      // 假设以下变量是根据用户界面交互来控制的
      let clippingPlanesEnabled = true // 控制是否启用剪切平面
      let edgeStylingEnabled = true // 控制是否启用边缘样式
      const globe = Viewer.scene.globe
      
     function loadStHelens() {
        // 创建剪切平面的坐标点
        points = [
          new Cesium.Cartesian3(
            -1182592.8630924462,
            5515580.9806405855,
            2966674.365247578
          ),
          new Cesium.Cartesian3(
            -1183337.777477057,
            5515825.617716778,
            2965927.4345367434
          ),
          new Cesium.Cartesian3(
            -1184508.4932830015,
            5515571.328839522,
            2965932.974956288
          ),
          new Cesium.Cartesian3(
            -1185587.0332886775,
            5514889.448799464,
            2966764.2948399023
          ),
          new Cesium.Cartesian3(
            -1185099.0292063756,
            5514576.687407264,
            2967535.347584739
          ),
          new Cesium.Cartesian3(
            -1182840.9384216308,
            5515224.64431188,
            2967234.1119776894
          ),
        ]
        const pointsLength = points.length
        const clippingPlanes = []
        for (let i = 0; i < pointsLength; ++i) {
          const nextIndex = (i + 1) % pointsLength
          let midpoint = Cesium.Cartesian3.add(
            points[i],
            points[nextIndex],
            new Cesium.Cartesian3()
          )
          midpoint = Cesium.Cartesian3.multiplyByScalar(midpoint, 0.5, midpoint)

          const up = Cesium.Cartesian3.normalize(
            midpoint,
            new Cesium.Cartesian3()
          )
          let right = Cesium.Cartesian3.subtract(
            points[nextIndex],
            midpoint,
            new Cesium.Cartesian3()
          )
          right = Cesium.Cartesian3.normalize(right, right)

          let normal = Cesium.Cartesian3.cross(
            right,
            up,
            new Cesium.Cartesian3()
          )
          normal = Cesium.Cartesian3.normalize(normal, normal)

          const originCenteredPlane = new Cesium.Plane(normal, 0.0)
          const distance = Cesium.Plane.getPointDistance(
            originCenteredPlane,
            midpoint
          )

          clippingPlanes.push(new Cesium.ClippingPlane(normal, distance))
        }

        globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
          planes: clippingPlanes,
          edgeWidth: edgeStylingEnabled ? 1.0 : 0.0,
          edgeColor: Cesium.Color.WHITE,
          enabled: clippingPlanesEnabled,
        })
        globe.backFaceCulling = true
        globe.showSkirts = true
      }

      // 在合适的时机调用 loadStHelens 函数
      loadStHelens()

最后我们就实现了一个地形开挖的简单例子 ,希望可以帮助到大家.