Skip to main content

3D measurement

The 3D measurement tool provides support for measuring distance and area in full 3D scene layers, including 3D models, 3D extruded bodies, tilted models, 3D terrain, etc.

showshow

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="Expires" CONTENT="0">
    <meta http-equiv="Cache-Control" CONTENT="no-cache">
    <meta http-equiv="Pragma" CONTENT="no-cache">

    <title>Three-dimensional measurement</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        #buttons {
            position: absolute;
            display: flex;
            flex-direction: row;
            z-index: 100;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
    <script src="https://delivery.mapmost.com/cdn/sdk/plugins/mapmost-webgl-measure3D/v1.3.0/mapmost-webgl-measure3D.js"></script>
</head>

<body>
    <div id="buttons">
        <div><button type="button" style="margin-left: 5px;" onclick="distance()">Distance measurement</button></div>
        <div><button type="button" style="margin-left: 5px;" onclick="area()">Area measurement</button></div>
        <div><button type="button" style="margin-left: 5px;" onclick="clearMeas()">Clear measurements</button></div>
    </div>
    <div id="map"></div>
    <script>
        let map = new mapmost.Map({
            container: 'map',
            name: 'ditu',
            style: "<your style url>",
            doubleClickZoom: false,
            center: [120.67727020663829, 31.31997024841401],
            zoom: 16.810035105070947,
            pitch: 59.48725112156901,
            bearing: -54.10626584095007,
            userId: '***', // Authorization code
            env3D: {
                envMap: "../../example_data/hdr/WhiteBG_Ref_1K.hdr",
                exposure: 2.8,
            },
            userId: "<your userId>"
        });
        var meas;
        map.on('load', function () {
            let models_obj = ["jinji_plaza_bridge", "jinji_plaza_bridge_upper", "jinji_plaza_eastern_door_building", "jinji_plaza_fence",
                "jinji_plaza_north_building", "jinji_plaza_star_vista", "jinji_plaza_surface", "jinji_plaza_suzhou_center", "jinji_plaza_w"].map(item => ({
                    type: 'glb',
                    url: "../../example_data/jjh_Scene_Y/" + item + ".glb",
                }));
                
            let options = {
                id: 'model_id',
                type: 'model',
                models: models_obj,
                center: [120.67727020663829, 31.31997024841401, 0.0],
                callback: function (group, layer) {
                    meas = new Measure3D(map);
                }
            };
            map.addLayer(options);
        })

        function distance() {
            // distance measurement
            meas.setType("distance");
        }
        function area() {
            // area measurement
            meas.setType("area");
        }
        function clearMeas() {
            // Clear drawing
            meas.clear();
        }
    </script>
</body>

</html>