跳到主要内容
版本：9.1.0

3D实时热力图

使用heatmap-3d类型图层对不同地点的某属性值进行可视化，支持热力图实时刷新。

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>3D实时热力图</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%;
        }
    </style>
     <script src="https://delivery.mapmost.com/cdn/sdk/lib/heatmap/heatmap.min.js"></script>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.1.0/mapmost-webgl-min.js"></script>
    <script src="./heatmap_points.js"></script>
</head>
<body>
<div id="map"></div>
<script>
    let map = new mapmost.Map({
        container: 'map',  
        style: "<your style url>", 
        center: [120.71930846, 31.2911422673], 
        zoom: 13, 
        pitch: 60, 
        bearing: 0, 
        userId: '***', // 授权码
        env3D:{
            exposure: 0.72,
        }
    });
    
    let modelLayer;
    let funupdate;
    map.on('load', function () {
    
        let models_obj = ["../example_data/Olympic.glb"].map(item => ({
            type: 'glb',
            url: item
        }));
        let options = {
            id: 'model_id',
            type: 'model',
            models: models_obj,
            center: [120.74602465203592, 31.30630899929158, 0.0],
            callback: function (group, layer) {
                modelLayer = layer;
            }
        };
        map.addLayer(options);

        let coordinates = [
            [120.74567212933215, 31.305317764384963, 18],
            [120.74655989341419, 31.306298692900455, 18],
            [120.74770939504327, 31.30550295684141, 5],
            [120.7468333907371, 31.304524300958015, 5]
        ]

        let dataPoints = [];
        DATA2.map(item => {
            let coor = item.geometry.coordinates;
            dataPoints.push([coor[0], coor[1], 100 * Math.random()])
        })

        let dataPoints_ = dataPoints.slice(0, 100);

        let op = {
            id: 'b123',
            type: 'heatmap-3d',
            data: dataPoints_, // dataPoints = [[lon,lat,value]]，参数分别为经度，纬度，属性值
            coordinates: coordinates,
            width: 512, // 热力图容器宽度，默认 256
            heightRatio: 0.01, // 3D热力图拉伸高度，默认 100
            proj: "4326", // 坐标系支持 '3857' 和 '4326'，默认 '4326'
            blur: 0.85, // [0,1] 可选参数 default = 0.85 ，应用于所有点数据。系数越高，渐变越平滑，默认是 0.85
            radius: 10, // 每个数据点的半径，默认 6
            widthSegments: 500, // 宽度片段数，默认 300，值越大热力图越精细
            heightSegments: 500, // 长度片段数，默认 300，值越大热力图越精细
            gradient: {
                '0.1': 'rgb(0,102,255)',
                '0.2': 'rgb(102,255,255)',
                '0.3': 'rgb(102,255,153)',
                '0.4': 'rgb(125,255,0)',
                '0.5': 'rgb(255,255,0)',
                '0.6': 'rgb(255,204,0)',
                '0.7': 'rgb(255,128,0)',
                '0.8': 'rgb(255,102,0)',
                '0.9': 'rgb(255,0,0)',
            }, // 表示渐变的色带对象,不设置则使用默认样式
            callback(object, layer, updateHeatmap) {
                object.setRotation({x: -2, y: -4, z: 0})
                funupdate = updateHeatmap
            }
        };

        map.addLayer(op);

        map.on('click', function (e) {
            let count = 1;
            setInterval(function () {
                let c = count % 5;
                funupdate(dataPoints.slice(0, 100 * (c + 1)))
                count++;
            }, 1000)
        })
    
      });
</script>
</body>
</html>