062.百度地图 BMapGL点聚合.html

﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/global.css">
    <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=GtFBbisvy7DCGsJJBmZGM57U3XbbmboJ"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.189/dist/mapvgl.min.js"></script>
    <style>
        #map_container {
            width: 100%;
            height: 100vh;
        }
    </style>

</head>

<body>
    <div id="map_container"></div>
    <script type="module">
        
        let map = new BMapGL.Map('map_container', {
            enableMapClick: false,
        });
        map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        var data = [];
        var randomCount = 100000;

        // 构造数据
        while (randomCount--) {
            data.push({
                geometry: {
                    type: 'Point',
                    coordinates: [116.2529 - 2 + Math.random() * 4, 39.5420 - 2 + Math.random() * 4]
                },
                properties: {
                    // icon: [
                    //     'images/marker.png',
                    //     'images/icons/icon-accident.png',
                    //     'images/icons/icon-location.png',
                    //     'images/icons/icon-airplane.png'
                    // ][randomCount % 4],
                    width: randomCount % 2 === 0 ? 100 / 4 : 30,
                    height: randomCount % 2 === 0 ? 153 / 4 : 30,
                    type: randomCount & 4 // 自定义属性
                }
            });
        }

        var view = new mapvgl.View({
            map: map
        });

        var clusterLayer = new mapvgl.ClusterLayer({
            minSize: 30, // 聚合点显示的最小直径
            maxSize: 50, // 聚合点显示的最大直径
            clusterRadius: 150, // 聚合范围半径
            gradient: { 0: 'blue', 0.5: 'green', 1.0: 'red' }, // 聚合点颜色梯度
            maxZoom: 15, // 聚合的最大级别 当地图放大级别高于此值将不再聚合
            minZoom: 5, // 聚合的最小级别 当地图放大级别低于此值将不再聚合
            // 是否显示文字
            showText: true,
            // 开始聚合的最少点数 点数多于此值才会被聚合
            minPoints: 5,
            // 设置文字样式
            textOptions: {
                fontSize: 12,
                color: 'white',
                // 格式化数字显示
                format: function (count) {
                    return count >= 10000 ? Math.round(count / 1000) + 'k'
                        : count >= 1000 ? Math.round(count / 100) / 10 + 'k' : count;
                }
            },
            // 设置非聚合的点的icon
            // iconOptions: {
            //     width: 100 / 4,
            //     height: 153 / 4,
            //     icon: 'images/marker.png',
            // },
            enablePicked: true,
            onClick(e) {
                if (e.dataItem) {
                    // 可通过dataItem下面的children属性拿到被聚合的所有点
                    console.log(e.dataItem);
                }
            }
        });

        view.addLayer(clusterLayer);
        clusterLayer.setData(data);

    </script>
</body>

</html>