vue + cesium 洪水淹没分析完整示例

目录

一、洪水淹没分析效果

二、部分核心代码

1、绘制多边形范围

2、处理多边形区域的最大和最小高程 

三、JS完整代码

---

一、洪水淹没分析效果

二、部分核心代码

1、绘制多边形范围

     /**
      * @author: 
      * @Date: 2022-04-11 16:44:02
      * @note: 注意事项
      * @description: 绘制范围
      */    
     drawExtent () {
      // 开启深度检测
      window.viewer.scene.globe.depthTestAgainstTerrain = true
      handler = new Cesium.ScreenSpaceEventHandler(window.viewer.canvas)

      handler.setInputAction((event) => {
        const earthPosition = viewer.scene.pickPosition(event.position);
        if (Cesium.defined(earthPosition)) {
          if (activeShapePoints.length === 0) {
            floatingPoint = this.createPoint(earthPosition);
            activeShapePoints.push(earthPosition);
            const dynamicPositions = new Cesium.CallbackProperty(function () {
              return new Cesium.PolygonHierarchy(activeShapePoints);
            }, false);
            activeShape = this.drawShape(dynamicPositions, Cesium.Color.fromBytes(64, 157, 253, 50));
          }
          activeShapePoints.push(earthPosition);
          this.tempEntities.push(this.createPoint(earthPosition))
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      handler.setInputAction((event) => {
        if (Cesium.defined(floatingPoint)) {
          const newPosition = viewer.scene.pickPosition(event.endPosition);
          if (Cesium.defined(newPosition)) {
            floatingPoint.position.setValue(newPosition);
            activeShapePoints.pop();
            activeShapePoints.push(newPosition);
          }
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      handler.setInputAction((event) => {
        activeShapePoints.pop()
        if(activeShapePoints.length < 3) return
        
        this.tempEntities.push(this.drawPolyline(activeShapePoints))
        let ploy = this.drawShape(activeShapePoints, Cesium.Color.fromBytes(64, 157, 253, 20))
        this.tempEntities.push(ploy)
        this.getAreaHeight(activeShapePoints)
        
        window.viewer.entities.remove(floatingPoint);
        window.viewer.entities.remove(activeShape);
        floatingPoint = undefined;
        activeShape = undefined;
        handler.destroy()// 关闭事件句柄
        handler = null
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
    },

2、处理多边形区域的最大和最小高程 

    /**
     * @author: 
     * @Date: 2022-04-11 16:48:43
     * @note: 注意事项
     * @description: 获取区域内最大和最小高程
     * @param {*} positions
     */    
    getAreaHeight (positions) {
      let startP = positions[0]
      let endP = positions[positions.length -1]
      if(startP.x != endP.x && startP.y != endP.y && startP.z != endP.z) positions.push(positions[0])

      const tempPoints = []
      for (let i = 0; i < positions.length; i++) {
        var ellipsoid = window.viewer.scene.globe.ellipsoid
        var cartographic = ellipsoid.cartesianToCartographic(positions[i])
        var lat = Cesium.Math.toDegrees(cartographic.latitude)
        var lng = Cesium.Math.toDegrees(cartographic.longitude)
        tempPoints.push([lng, lat])
      }
      var line = turf.lineString(tempPoints)
      var chunk = turf.lineChunk(line, 10, {units: 'meters'});

      const tempArray = []
      chunk.features.forEach(f => {
        f.geometry.coordinates.forEach(c => {
          tempArray.push(Cesium.Cartographic.fromDegrees(c[0], c[1]))
        })
      })

      var promise = Cesium.sampleTerrainMostDetailed(window.viewer.terrainProvider, tempArray)
      Cesium.when(promise, (updatedPositions) => {
        const max = Math.max.apply(Math, updatedPositions.map(item => { return item.height }))
        const min = Math.min.apply(Math, updatedPositions.map(item => { return item.height }))
        this.waterHeight = Math.ceil(min)
        this.minWaterHeight = Math.ceil(min)
        this.maxWaterHeight = Math.ceil(max)
        // 禁用绘制按钮
        this.isDraw = !this.isDraw
      })
    },

三、JS完整代码

完整项目示例下载