版本：9.2.0
聚类图

根据散点构建聚类图
<!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%;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.2.0/mapmost-webgl-min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
    let map = new mapmost.Map({
        container: 'map',  
        style: "<your style url>", 
        center: [120.72541613154851, 31.32271803927643], 
        zoom: 13, 
        userId: '***', // 授权码
    });

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

        map.addSource("points", {
            type: "geojson",
            data: "../example_data/random_points.geojson",
            cluster: true,
            clusterMaxZoom: 14, // 聚集点的最大放大倍数。
            clusterRadius: 50 // 对点进行聚类时每个聚类的半径（默认为50）。
        });

        map.addLayer({
            id: "clusters",
            type: "circle",
            source: "points",
            filter: ["has", "point_count"],
            paint: {
                "circle-color": [
                    "step",
                    ["get", "point_count"],
                    "#21984c",
                    50,
                    "#e27530",
                    120,
                    "#e61f16"
                ],
                'circle-stroke-width': 6,
                'circle-stroke-color': [
                    'step',
                    ['get', 'point_count'],
                    'rgba(33,152,76,0.4)',
                    50,
                    'rgba(226,117,84,0.4)',
                    120,
                    'rgba(230,31,22,0.4)',
                ],
                "circle-radius": [
                    "step",
                    ["get", "point_count"],
                    10,
                    20,
                    20,
                    75,
                    25,
                    150,
                    30
                ],
            }
        });

        map.addLayer({
            id: "unclustered-point",
            type: "circle",
            source: "points",
            filter: ["!", ["has", "point_count"]],
            paint: {
                "circle-color": "#46a5fe",
                "circle-radius": 5,
            }
        });

        map.addLayer({
            id: "cluster-count",
            type: "symbol",
            source: "points",
            filter: ["has", "point_count"],
            layout: {
                "text-field": "{point_count_abbreviated}",
                "text-size": [
                    'step',
                    ['get', 'point_count'],
                    14,
                    20,
                    16,
                    50,
                    18,
                ],
            },
            paint: {
                "text-color": "#fff",
            }
        });

    });

</script>
</body>
</html>