Mapbox中的聚类点答案

【问题标题】：Clustering Points in MapboxMapbox中的聚类点
【发布时间】：2021-06-11 10:28:28
【问题描述】：

我已经创建了包含照片作为图标的人员分布图。现在，我想尝试对它们进行聚类。但是，如果参考 Mapbox Docs (https://docs.mapbox.com/mapbox-gl-js/example/cluster/)，我对实现它们感到困惑，因为我循环该点以显示该点的每张照片。有人对这个话题有想法吗？这是我的代码：

$(document).ready(() => {
$.ajax({
    type: "GET",
    //YOUR TURN: Replace with csv export link
    url: `${google_sheet_name}/gviz/tq?tqx=out:csv&sheet=${sheet_name}`,
    dataType: "text",
    success: function (csvData) {
        makeGeoJSON(csvData);
    }
});

let makeGeoJSON = csvData => {
    csv2geojson.csv2geojson(csvData, {
        latfield: 'latitude',
        lonfield: 'longitude',
        delimiter: ','
    }, (err, data) => {
        var geo = {
            'id': 'csvData',
            'type': 'circle',
            'source': {
                'type': 'geojson',
                'data': data
            },
        }

        geo.source.data.features.forEach(marker => {
            var el = document.createElement('img');
            el.className = 'icon-image';
            el.src = marker.properties.image_path

            // make a marker for each feature and add it to the map
            new mapboxgl.Marker(el)
                .setLngLat(marker.geometry.coordinates)
                .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
                .setHTML('<h3>' + marker.properties.name + '</h3><p>' + marker.properties.description + '</p>'))
                .addTo(map)
        })

        let UseBbox = () => {
            let bbox = turf.bbox(data);
            map.fitBounds(bbox, {
                padding: 50
            })
        }
        UseBbox()
    });
};

});

【问题讨论】：

标签： javascript mapbox mapbox-gl-js mapbox-marker

【解决方案1】：

该示例不是为每个点渲染标记，而是使用 geojson 数据和图层。当您拥有更多点数时，这会提供更好的性能。您的案例的基本流程类似于

将数据添加到源地图，如示例中所述
添加 2 层，一层用于渲染集群图标，另一层用于非集群点
群集图标可以与示例中的相同
非集群层可以使用 imagepath 来渲染用户图像

要动态加载和渲染图像，请使用 styleimagemissing 事件。请参考https://docs.mapbox.com/mapbox-gl-js/example/add-image-missing-generated/的示例

注意添加图片应该是synchronosly

【讨论】：