版本：9.1.1
淹没水体体积计算

支持输入分析的地理范围和淹没水体高度计算水体体积，满足EPSG下各种坐标系数据，具体服务需求请咨询研究院。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淹没水体体积计算</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100vh;
            width: 100vw;
        }
    </style>

    <script src="https://delivery.mapmost.com/cdn/sdk/plugins/mapmost-webgl-draw/v1.0.0/mapmost-webgl-draw.js"></script>
    <link rel="stylesheet" href="https://delivery.mapmost.com/cdn/sdk/plugins/mapmost-webgl-draw/v1.0.0/mapmost-webgl-draw.css">
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.1.1/mapmost-webgl-min.js"></script>
</head>

<body>
<style>
    .button_wrapper {
        position: absolute;
        z-index: 999;
        top: 20px;
        left: 20px;
        color: white;
    }

    button {
        margin-right: 10px;
    }

    button:hover {
        cursor: pointer;
    }

    .mapmostgl-popup-tip {
        border-top-color: #155b72 !important;
    }

    .mapmostgl-popup-content {
        background-color: #155b72;
        color: #fff;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        padding: 10px 30px;
    }

    .mapmostgl-popup-content button {
        margin-right: 0;
        color: #fff;
    }

    .mapmostgl-popup-content button:hover {
        background-color: transparent;
    }
</style>
<div class="button_wrapper">
    <div>
        淹没高度: <input type="text" id="maxH" style="width: 40px" value="10"/> 米
    </div>
    <div style="margin-top: 10px;margin-left: 10px">
        <button>画面</button>
        <button>清除</button>
    </div>
</div>
<div id="map"></div>
<script>
    let map = new mapmost.Map({
        container: 'map',
        style: "<your style url>", 
        center: [120.67727020663829, 31.31997024841401], 
        zoom: 16.810035105070947, 
        pitch: 60, 
        bearing: 0, 
        sky: "dark",
        userId: '***', // 授权码
    });
    map.on('load', function () {
        
        // 添加 MapmostDraw 插件
        let draw = new MapmostDraw({
            displayControlsDefault: false,
            polygon: true,
            line_string: true,
            trash: true,
        });

        map.addControl(draw);
        map.on('draw.create', updateDraw);
        map.on('draw.delete', updateDraw);
        map.on('draw.update', updateDraw);

        // 关闭绘制图形后的编辑功能
        let featureId = null
        map.on('draw.modechange', holdMode);
        map.on('draw.selectionchange', holdMode);

        function holdMode(e) {
            draw.changeMode('simple_select', {featureId: featureId})
        }

        let allPopups = [];
        let Utils = mapmost.Utils;

        // 量算
        function updateDraw(e) {
            let data = draw.getAll();
            let currentMode = draw.getMode();
            if (data.features.length > 0) {
                featureId = data.features[0].id

                let coordinates = data.features[data.features.length - 1].geometry.coordinates; // 获取 draw 路径点的坐标
                let center = Utils.centerOfMass(coordinates); // 计算几何图形的几何中心

                let polygon = data.features[0].geometry.coordinates[0];

                let waterHight = parseFloat(document.getElementById("maxH").value);
                let projection = "4490";

                let url = `IP/yanmoanalyse/watervolume?area=${polygon}&waterHight=${waterHight}&projection=${projection}`

                fetch(url).then(
                    res => res.json()
                ).then(response => {
                    // 自定义 popup
                    let div = window.document.createElement('div');
                    div.innerHTML = '淹没水体体积为：' + response.toFixed(2) + '&nbspm³';
                    let popup = new mapmost.Popup({closeOnClick: false, className: 'popup'})
                        .setLngLat(center.geometry.coordinates)
                        .setDOMContent(div)
                        .addTo(map);

                    allPopups.push(popup);
                })
            }
        }

        // 绘面
        document.querySelectorAll("button")[0].addEventListener('click', function () {
            deleteAll()
            draw.changeMode('draw_polygon', {})
        });

        // 删除
        document.querySelectorAll("button")[1].addEventListener('click', function () {
            deleteAll()
        });

        function deleteAll() {
            draw.deleteAll(); // 清空全部要素
            featureId = null

            // 删除多余popup
            allPopups.forEach(item => item.remove());
        }

    });
</script>
</body>

</html>