Skip to main content

Get model surface adsorption coordinates

The adsorption coordinates of the model surface can be obtained. If no model is added, the adsorption coordinates of the entire scene can be obtained.

show
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Get model surface adsorption coordinates</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%;
        }

        .btn-group {
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>

</head>

<body>
    <div id="map"></div>
    <div id="info"></div>
    <div class="btn-group">
        <button onclick="getSnapCoor()">Start snapping</button>
    </div>

    <script>
        let map = new mapmost.Map({
            container: 'map',
            style: "<your style url>",
            center: [120.747099603945, 31.304578038791618],
            zoom: 19.30,
            pitch: 65.70,
            bearing: -28.78,
            userId: '***', // Authorization code
            env3D: {
                defaultLight: true,
                exposure: 1.0,
                envMap: '../example_data/hdr/WhiteBG_Ref_1K.hdr'
            }
        });

        let modelGroup1, modelLayer, modelGroup;
        map.on('load', function () {
            let models_obj = ["../example_data/Olympic.glb", "../example_data/OlympicRoof.glb"].map(item => ({
                type: 'glb',
                url: item
            }));

            let options = {
                id: 'model_id',
                type: 'model',
                models: models_obj,
                center: [120.74603465203592, 31.30605899929158, 0.0],
                callback: function (group, layer) {
                    modelGroup1 = group;
                    modelLayer = layer;
                    let models_obj2 = ["./person.glb"].map(item => ({
                        type: 'glb',
                        url: item
                    }));
                    modelLayer.addModelMercator(models_obj2, [120.74764069766269, 31.304344040890854, 0], function (group, layer) {
                        modelGroup = group
                    });
                }
            };
            map.addLayer(options);
        })

        // Start adsorption
        function getSnapCoor() {
            let ps = getData();
            let i = 0
            let interval = setInterval(function () {
                if (i < ps.length) {
                    let p = ps[i]
                    let pos = map.getHighestPoint(p, modelGroup1);
                    modelGroup.setCoords(pos)
                    i++
                } else {
                    clearInterval(interval)
                }
            }, 200)
        }

        // Get moving coordinates
        function getData() {
            let st = [120.74764069766269, 31.304344040890854];
            let end = [120.74680402592566, 31.304885653540524];
            let pl = 100;
            let offset_x = (end[0] - st[0]) / pl;
            let offset_y = (end[1] - st[1]) / pl;
            let points = []
            for (let i = 0; i < pl; i++) {
                let p = [st[0] + offset_x * i, st[1] + offset_y * i]
                points.push(p)
            }
            return points;
        }
    </script>
</body>
</html>