一、概述
這是采用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緩存功能，這個函數會觸發
};