<template>
<div>
<el-dialog draggable destroy-on-close v-if="changeFillCutState" :modal="false" v-model="changeFillCutState"
close-icon="" title="填挖方分析" width="20%" :before-close="handleClose" @opened="getFillOpen()"
:close-on-click-modal="false">
<div class="el-h-line">
<el-row :gutter="10">
<el-col :span="9">
<p class="font-big">开挖高程</p>
</el-col>
<el-col :span="15">
<div class="slider-demo-block">
<el-input v-model="maximumHeight" placeholder="最大高度" />
</div>
</el-col>
</el-row>
</div>
<div class="el-h-line">
<el-row :gutter="10">
<el-col :span="9">
<p class="font-big">开挖面积(平方米)</p>
</el-col>
<el-col :span="15">
<div class="slider-demo-block">
<el-input v-model="excavationArea" placeholder="最小高度" />
</div>
</el-col>
</el-row>
</div>
<div class="el-h-line">
<el-row :gutter="10">
<el-col :span="9">
<p class="font-big">开挖体积(平方米)</p>
</el-col>
<el-col :span="15">
<div class="slider-demo-block">
<el-input v-model="excavationVolume" placeholder="开挖体积" />
</div>
</el-col>
</el-row>
</div>
<div class="el-h-line">
<el-row :gutter="10">
<el-col :span="9">
<p class="font-big">填方面积(平方米)</p>
</el-col>
<el-col :span="15">
<div class="slider-demo-block">
<el-input v-model="fillArea" placeholder="填方面积" />
</div>
</el-col>
</el-row>
</div>
<div class="el-h-line">
<el-row :gutter="10">
<el-col :span="9">
<p class="font-big">填方体积(平方米)</p>
</el-col>
<el-col :span="15">
<div class="slider-demo-block">
<el-input v-model="fillVolume" placeholder="填方体积" />
</div>
</el-col>
</el-row>
</div>
<div class="el-h-line">
<el-row :gutter="10">
<el-col :span="9">
<p class="font-big">未填挖面积(平方米)</p>
</el-col>
<el-col :span="15">
<div class="slider-demo-block">
<el-input v-model="unfilledExcavationArea" placeholder="未填挖面积" />
</div>
</el-col>
</el-row>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="getRender()">绘制分析</el-button>
<el-button type="primary" @click="getFillclear()" style="background-color: #1d888b;">
清除
</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import emitter from "../../../utils/bus";
const changeFillCutState = ref<Boolean>(true)
import axios from "axios";
const maximumHeight = ref(5000)
const excavationArea = ref(10)
const excavationVolume = ref()
const fillArea = ref()
const fillVolume = ref()
const unfilledExcavationArea = ref()
const handleClose = (done: () => void) => {
done()
getFillclear()
}
emitter.on("fillCutAnalysis", (data: any) => {
changeFillCutState.value = data
});
let Cesium = window.Cesium;
var handlerPolygon: any
const getRender = () => {
handlerPolygon = new Cesium.DrawHandler(window.viewer, Cesium.DrawMode.Polygon, 0);
handlerPolygon.drawEvt.addEventListener(function (result: any) {
if (!result.object.positions) {
handlerPolygon.polygon.show = false;
handlerPolygon.polyline.show = false;
handlerPolygon.deactivate();
return
}
var array = [].concat(result.object.positions);
var positions = [];
var positionsii = [];
for (var i = 0, len = array.length; i < len; i++) {
var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
maximumHeight.value = cartographic.height;
if (positions.indexOf(longitude) == -1 && positions.indexOf(latitude) == -1) {
positions.push(longitude);
positions.push(latitude);
positions.push(parseInt(maximumHeight.value));
positionsii.push({
x: longitude,
y: latitude
});
}
}
window.scene.globe.removeAllModifyRegion();
window.scene.globe.addModifyRegion({
name: 'ggg',
position: positions,
});
handlerPolygon.polygon.show = false;
handlerPolygon.polyline.show = false;
handlerPolygon.deactivate();
handlerPolygon.activate();
var length = [];
length.push(positionsii.length);
var geometry = {
id: 23,
parts: length,
points: positionsii,
style: null,
type: 'REGION'
}
var queryObj = {
"cutFillType": "REGIONANDALTITUDE",
"baseAltitude": maximumHeight.value,
"region": geometry,
"resultDataset": "result",
"buildPyramid": true,
"deleteExistResultDataset": true
};
var queryObjJSON = JSON.stringify(queryObj);
var url = 'https://gis.aigis.org.cn/iserver/services/spatialAnalysis-DEM_HC_0915/restjsr/spatialanalyst/datasets/ASTGTM2_N34E108_demCJ0915%40DEM_SJY_0915/terraincalculation/cutfill.json?returnContent=true'
axios.post(url, queryObjJSON).then((res) => {
if (res.status === 201) {
const { data } = res
excavationArea.value = data.cutArea
excavationVolume.value = data.cutVolume
fillArea.value = data.fillArea
fillVolume.value = data.fillVolume
unfilledExcavationArea.value = data.remainderArea
}
});
})
handlerPolygon.activate();
}
const getFillclear = () => {
maximumHeight.value = 5000;
excavationArea.value = 10;
excavationVolume.value = "";
fillArea.value = "";
fillVolume.value = "";
unfilledExcavationArea.value = "";
if (!handlerPolygon.polygon || !handlerPolygon.polyline) {
return;
}
window.scene.globe.removeAllModifyRegion();
handlerPolygon.clear();
handlerPolygon.polyline = 0
handlerPolygon.polygon = 0
}
onMounted(() => {
onDialog()
});
const getFillOpen = () => {
onDialog()
}
const onDialog = () => {
var box = document.querySelector(".el-overlay-dialog");
var boxa = box.parentNode;
boxa.style.pointerEvents = "none";
}
</script>