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: 注意事项
     * @descriptio