建立群聚標示

範例展示

原始碼

<!DOCTYPE html>
<html>
<head>
    <title>建立群聚標示 - Map8 Platform Documentation</title>
    <link rel="stylesheet" href="https://api.map8.zone/css/gomp.css?key=[YOUR_KEY_HERE]" />
    <style>
        #map{
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script type="text/javascript" src="https://api.map8.zone/maps/js/gomp.js?key=[YOUR_KEY_HERE]"></script>
    <script type="text/javascript">
        var map = new gomp.Map({
            container: 'map', // 地圖容器 ID
            style: 'https://api.map8.zone/styles/go-life-maps-tw-style-std/style.json?key=[YOUR_KEY_HERE]', // 地圖樣式檔案位置
            maxBounds: [[105, 15], [138.45858, 33.4]], // 台灣地圖區域
            center: [121.22649, 24.95997], // 初始中心座標,格式為 [lng, lat]
            zoom: 12.92, // 初始 ZOOM LEVEL; [0-20, 0 為最小 (遠), 20 ;最大 (近)]
            minZoom: 6, // 限制地圖可縮放之最小等級, 可省略, [0-19.99]
            maxZoom: 19.99, // 限制地圖可縮放之最大等級, 可省略 [0-19.99]
            attributionControl: false
        }).addControl(new gomp.AttributionControl({
            compact: false
        }));
            
        map.on('load', function () {
            
            // 新增資料來源 (GeoJSON 格式) 並設定 cluster (群聚選項) 為 true
            map.addSource("housesale", {
                type: "geojson",
                // 以房屋成交筆數為例
                data: "../js/vector/housesale.json",
                cluster: true,
                clusterMaxZoom: 14, // 顯示群聚點的最大 zoom level
                clusterRadius: 50 // 設定群聚半徑 (單位公尺 / 預設 50)
            });
            
            map.addLayer({
                id: "clusters",
                type: "circle",
                source: "housesale",
                filter: ["has", "point_count"],
                paint: {
                    "circle-color": [
                        "step",
                        ["get", "point_count"],
                        // 數量小於 10 為黃褐色
                        "#D6D0B2",
                        10,
                        // 數量 10 - 50 為淡藍色
                        "#95B1E1",
                        // 數量 50 以上 為灰藍色
                        50,
                        "#838B98"
                    ],
                    "circle-radius": [
                        "step",
                        ["get", "point_count"],
                        20,
                        20,
                        30,
                        50,
                        40
                    ]
                }
            });
            
            map.addLayer({
                id: "cluster-count",
                type: "symbol",
                source: "housesale",
                filter: ["has", "point_count"],
                layout: {
                    "text-field": "{point_count}",
                    "text-size": 16
                }
            });
            
            map.addLayer({
                id: "unclustered-point",
                type: "circle",
                source: "housesale",
                filter: ["!", ["has", "point_count"]],
                paint: {
                    "circle-color": "#11b4da",
                    "circle-radius": 4,
                    "circle-stroke-width": 1,
                    "circle-stroke-color": "#fff"
                }
            });
            
            // 查看群聚點
            map.on('click', 'clusters', function (e) {
                var features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] });
                var clusterId = features[0].properties.cluster_id;
                map.getSource('housesale').getClusterExpansionZoom(clusterId, function (err, zoom) {
                    if (err)
                    return;
                    
                    map.easeTo({
                        center: features[0].geometry.coordinates,
                        zoom: zoom
                    });
                });
            });
            
            map.on('mouseenter', 'clusters', function () {
                map.getCanvas().style.cursor = 'pointer';
            });
            map.on('mouseleave', 'clusters', function () {
                map.getCanvas().style.cursor = '';
            });
        });
    </script>
</body>
</html>