vu3+vite+supermap（超图）实现填挖方分析

<!--填挖方分析-->
<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()
}
// 接受layoutMenu传过来的值
emitter.on("fillCutAnalysis", (data: any) => {
    changeFillCutState.value = data
});

let Cesium = window.Cesium;
// let viewer = window.viewer;
// 绘制多边形
var handlerPolygon: any
const getRender = () => {
    //初始化
    // scene = viewer.scene;
    // viewer = window.viewer
    // 绘制处理器对象类。支持栅格化面对象的绘制。
    // 绘制完成后执行
    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);
        // 需要在此 动态构造一个 REGION类型的对象
        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 = 'http://www.supermapol.com/realspace/services/spatialAnalysis-dxyx_ios/restjsr/spatialanalyst/datasets/DEM@%E5%9B%9B%E5%A7%91%E5%A8%98%E5%B1%B1/terraincalculation/cutfill.json?returnContent=true'
         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
                // console.log('data!!!!',data)
                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()
    // getRender()
});

const getFillOpen = () => {
    onDialog()
}

// 解决弹框打开时可操作操作其他Dom的问题
const onDialog = () => {
    var box = document.querySelector(".el-overlay-dialog");
    // 获取.el-overlay-dialog父级
    var boxa = box.parentNode;
    //  使用pointerEvents 进行页面穿透
    boxa.style.pointerEvents = "none";
}
</script>