Skip to main content

Calculation of submerged water volume

It supports inputting the geographical scope of the analysis and the height of the submerged water body to calculate the water body volume, meeting various coordinate system data under EPSG. Please consult the institute for specific service needs.

show
<!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>Calculation of submerged water volume</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.16.0/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>
        Submerged height: <input type="text" id="maxH" style="width: 40px" value="10"/> meters
    </div>
    <div style="margin-top: 10px;margin-left: 10px">
        <button>Screen</button>
        <button>Clear</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: '***', // Authorization code
    });
    map.on('load', function () {
        
        //Add MapmostDraw plug-in
        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);

        // Turn off the editing function after drawing graphics
        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;

        // measure
        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; // Get the coordinates of the draw path point
                let center = Utils.centerOfMass(coordinates); // Calculate the geometric center of the geometric figure

                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 => {
                    //Custom popup
                    let div = window.document.createElement('div');
                    div.innerHTML = 'The volume of submerged water is:' + response.toFixed(2) + ' m³';
                    let popup = new mapmost.Popup({closeOnClick: false, className: 'popup'})
                        .setLngLat(center.geometry.coordinates)
                        .setDOMContent(div)
                        .addTo(map);

                    allPopups.push(popup);
                })
            }
        }

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

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

        function deleteAll() {
            draw.deleteAll(); // Clear all elements
            featureId = null

            // Delete redundant popups
            allPopups.forEach(item => item.remove());
        }

    });
</script>
</body>

</html>