跳到主要内容
版本：9.0.0

批量加载及更新三维点

结合坐标点位，以粒子形式加载，并可更新坐标数据。

show
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>批量加载及更新三维点</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/webgl/v9.0.0/mapmost-webgl-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: '***', // 授权码
        env3D:{
            exposure: 0.72,
        }
        
    });

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

        // 加载模型
        let models_obj = ["./Olympic.glb"].map(item => ({
            type: 'glb',
            url: item
        }));


        // 生成随机点
        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,
            center: [120.74603465203592, 31.30605899929158, 0.0],
            callback: function (group, layer) {

                let count = 3000; // 显示人数
                const MAX_POINTS = 30000; // 显示人数

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

                    // 生成随机点
                    const p = generatePoint();
                    particleInit.push(p)
                }

                // 初始化加载点
                let points = layer.addParticle({
                    data: particleInit,
                    size: 4,
                    opacity: 1.0,
                    color: "rgb(0,200,255)",
                    maxPoints: MAX_POINTS
                });

                // 添加更新按钮
                let btn = document.createElement('button');
                btn.id = "addPoint";
                btn.innerText = "增加点";
                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;

                    // 设置颜色
                    let colors = ["rgb(0,200,255)", "rgb(0,100,255)", "rgb(0,0,255)", "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; // 每次增加3000

                    // 超过总数则恢复到初始值
                    if (count > MAX_POINTS) {
                        count = 3000;
                    }
                }

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

</script>
</body>

</html>