Skip to main content

Batch loading and updating of 3D points

Combined with coordinate points, it is loaded in the form of particles, and the coordinate data can be updated.

show
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>Batch loading and updating of 3D points</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%;
        }

        #tool {
            position: absolute;
            top: 60px;
            left: 40px;
            width: 100%;
        }

        button {
            outline: none;
            color: #d2d1d1;
            background-color: rgba(0, 0, 0, 0.5);
            border:none;
            padding: 4px 20px;
        }

        button:hover {
            cursor: pointer;
            color: #ffffff;
            background-color: rgba(0, 0, 0, 0.8);
        }

    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/lite/v9.1.0/mapmost-lite-min.js"></script>
</head>

<body>
<div id="map"></div>
<div id="tool">

</div>
<script>
    let map = new mapmost.Map({
        container: 'map', 
        style: "<your style url>",
        center: [120.74603465203592, 31.30605899929158],
        zoom: 16,
        pitch: 59.48725112156901,
        bearing: -54.10626584095007,
        doubleClickZoom: false,
        userId: '***', // Authorization code,This parameter must be added

    });

    map.on('load', function () {

        // Load model
        let models_obj = ["./Olympic.glb"].map(item => ({
            type: 'glb',
            url: item
        }));


        // Generate random points
        function generatePoint(){
            const lngMax = 120.741824;
            const lngMin = 120.747726;
            const latMax = 31.310713;
            const latMin = 31.304048;

            let lng = Math.random()*(lngMax-lngMin)+lngMin;
            let lat = Math.random()*(latMax-latMin)+latMin;
            let height = Math.random()*(10-0.2)+10;

            return {
                coordinate:[lng, lat, height]
            }
        }

        let options = {
            id: 'model_id',
            type: 'model',
            models: models_obj,
            exposure: 0.72,
            center: [120.74603465203592, 31.30605899929158, 0.0],
            callback: function (group, layer) {

                let count = 3000; // Show number of people
                const MAX_POINTS = 30000; // Show number of people

                let particleInit = [];
                for (let i = 0; i < count; i++) {

                    // Generate random points
                    const p = generatePoint();
                    particleInit.push(p)
                }

                // Initialize load point
                let points = layer.addParticle({
                    data: particleInit,
                    size: 4,
                    opacity: 1.0,
                    color: "rgb(148,231,65)",
                    maxPoints: MAX_POINTS
                });

                // Add update button
                let btn = document.createElement('button');
                btn.id = "addPoint";
                btn.innerText = "increase points";
                document.getElementById('tool').append(btn);

                btn.onclick = function (){

                    let particleNew = [];

                    for (let i = 0; i < count; i++) {
                        const p = generatePoint();
                        particleNew.push(p)
                    }

                    let color, size;

                    // Set color
                    let colors = ["rgb(148,231,65)", "rgb(231,214,65)", "rgb(231,129,65)", "rgb(255,0,0)"];

                    if (count < 10000) {
                        color = colors[0];
                        size = 4;
                    } else if (count < 15000) {
                        color = colors[1];
                        size = 3;
                    } else if (count < 20000) {
                        color = colors[2];
                        size = 2;
                    } else if (count < 30000) {
                        color = colors[3];
                        size = 2;
                    }

                    layer.updateParticle(points, {
                        data: particleNew,
                        size: size,
                        opacity: 0.5,
                        color: color,
                    })

                    count += 3000; // increase each time3000

                    // If the total number is exceeded, it will return to the initial value.
                    if (count > MAX_POINTS) {
                        count = 3000;
                    }
                }

            }
        };
        map.addLayer(options);
    })

</script>
</body>

</html>