Cesium 水淹分析

一、概述

这是采用polygon加高度模拟出来的，extrudedHeight是高度。

二、效果

三、代码

1、分析（部分）

    /**
     * 开始分析
     * @param {*} cartesiansArray 笛卡尔坐标数组，范围
     */
    start(cartesiansArray,callback) {
        if (!this._polygon) {
            this._drawPolygon(cartesiansArray);
        }
        this._interval = window.setInterval(() => {
            if ((this._maxHeight > this._extrudedHeight) && (this._extrudedHeight >= this._minHeight)) {
                this._extrudedHeight += this._speed;
            } else {
                this._extrudedHeight = this._minHeight;
            }
            if(callback){
                callback(this._extrudedHeight);
            }
        }, this._intervalStep)
        this.viewer.scene.globe.depthTestAgainstTerrain = true;
    }

2、调用

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    let t = [
      //初始范围
      107.428594,
      41.282392,
      107.456929,
      41.282392,
      107.456929,
      41.305005,
      107.428594,
      41.305005,
    ];
    let t2 = [
      //初始范围
      107.345147,
      41.395337,
      107.568974,
      41.396442,
      107.555225,
      41.224117,
      107.376214,
      41.228213,
    ];
    let drawPolygon = null; //绘制的范围
    let waterAnalysis = null; //水淹分析类
    let drawPositions = Cesium.Cartesian3.fromDegreesArray(t2); //绘制产生的点
    let polygonEntity = null; //绘制的多边形实体
    let form = {
      auto: false,
      curHeight: 990,
      minHeight: 990,
      maxHeight: 1440,
      setpHeight: 20,
    };
    //这里存放数据
    return {
      form,
      t,
      t2,
      drawPolygon,
      waterAnalysis,
      drawPositions,
      polygonEntity,
      defaultPolygon: undefined,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    "form.auto"(v) {
      if (v) {
        this.start();
      } else {
        this.notAuto();
      }
    },
  },
  //方法集合
  methods: {
    changeslider(v) {
      if (!this.form.auto) {
        if (this.waterAnalysis) {
          this.waterAnalysis.noAuto(this.drawPositions, this.form.curHeight);
        }
      }
    },
    notAuto() {
      this.pause();
      if (this.waterAnalysis) {
        this.waterAnalysis.noAuto(this.drawPositions, this.form.curHeight);
      }
    },
    changeHeigit(type) {
      if (this.waterAnalysis) {
        this.waterAnalysis.resetParas(this.form);
      }
    },
    init() {
      let that = this;
      bus.$on("analysis_water", (visible) => {
        if (visible) {
          that.initWater();
          that.defaultPolygon = that.waterAnalysis.drawDefaultPolygon(that.t2);
          var center = Cesium.Cartesian3.fromDegrees(107.428594, 41.282392, 0);
          var center2 = Cesium.Cartesian3.fromDegrees(107.456929, 41.305005, 0);
          cesiumLocateUtil.flyToRectangle(
            [center, center2],
            0,
            -45,
            1.3,
            2,
            function () {}
          );
        } else {
          that.clear();
        }
      });
    },
    initWater() {
      this.clear();
      if (!this.waterAnalysis) {
        this.waterAnalysis = new CesiumWaterAnalysis(window.viewer, {
          minHeight: this.form.minHeight,
          maxHeight: this.form.maxHeight,
          speed: this.form.start,
          intervalStep: 300,
        });
      }
    },
    draw() {
      let that = this;
      if (this.waterAnalysis) {
        this.waterAnalysis.stop();
        this.waterAnalysis = null;
      }
      if (this.drawPolygon) {
        this.drawPolygon.clear();
        this.drawPolygon = null;
      }
      if (this.polygonEntity) {
        viewer.entities.remove(this.polygonEntity);
        this.polygonEntity = null;
      }
      that.initWater();
      if (!this.drawPolygon) {
        this.drawPolygon = new DrawPolygon(viewer, {
          onCompleted: function (positions) {
            that.drawPositions = positions;
            that.polygonEntity = that.drawPolygon.polygonPoint;
            that.drawPolygon.polygonPoint.polygon.fill = false;
          },
        });
      }
      this.drawPolygon.startDraw();
    },
    start() {
      if (!this.waterAnalysis) {
        alert("未初始化");
        return;
      }
      this.waterAnalysis.start(this.drawPositions, (h) => {
        this.form.curHeight = h;
      });
    },
    pause() {
      if (this.waterAnalysis) {
        this.waterAnalysis.pause();
      }
    },
    stop() {
      this.clear();
    },
    clear() {
      this.form = {
        auto: false,
        curHeight: 990,
        minHeight: 990,
        maxHeight: 1440,
        setpHeight: 20,
      };
      if (this.waterAnalysis) {
        this.waterAnalysis.stop();
        this.waterAnalysis = null;
      }
      if (this.drawPolygon) {
        this.drawPolygon.clear();
        this.drawPolygon = null;
      }
      if (this.defaultPolygon) {
        viewer.entities.remove(this.defaultPolygon);
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.init();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};