一、概述

這是採用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、呼叫

<!--
 * @Author: 蘋果園dog
 * @Date: 2021-01-08 15:34:32
 * @LastEditTime: 2021-01-17 18:16:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 
 
* @FilePath: \code\bayannaoer.web.vue\src\views\visualiPage\waterAnalysis.vue
-->
<!-- 水淹分析 -->
<template>
  <div class="waterformBox">
    <!-- <button @click="draw()">繪製範圍</button>
    <button @click="start()">開始水淹分析</button>
    <button @click="pause()">暫停水淹分析</button>
    <button @click="stop()">結束水淹分析</button> -->
    <el-form ref="form" :model="form">
      <el-form-item label="自動分析">
        <div class="divedit">
          <el-switch v-model="form.auto" style="float: left"></el-switch>
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            style="float: right"
            @click="draw"
          ></el-button>
        </div>
      </el-form-item>
      <el-form-item label="當前高程">
        <el-input v-model.number="form.curHeight" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="最小高程">
        <el-input
          v-model.number="form.minHeight"
          @change="changeHeigit"
        ></el-input>
      </el-form-item>
      <el-form-item label="最大高程">
        <el-input
          v-model.number="form.maxHeight"
          @change="changeHeigit"
        ></el-input>
      </el-form-item>
      <el-form-item label="步進高度">
        <el-input
          v-model.number="form.setpHeight"
          @change="changeHeigit"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-slider
      v-model="form.curHeight"
      :min="form.minHeight"
      :max="form.maxHeight"
      :step="form.setpHeight"
      @input="changeslider"
    ></el-slider>
  </div>
</template>
<script>
//這裡可以匯入其他檔案（比如：元件，工具js，第三方外掛js，json檔案，圖片檔案等等）
//例如：import 《元件名稱》 from '《元件路徑》';
import bus from "../../commonUtil/bus";
import DrawPolygon from "../../commonUtil/DrawPolygon";
import CesiumWaterAnalysis from "../../commonUtil/CesiumWaterAnalysis";
import { cesiumLocateUtil } from "../../utils/commonUtil/cesiumLocateUtil";
import { cesiumCoordUtil } from "../../utils/commonUtil/cesiumCoordUtil";
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快取功能，這個函式會觸發
};