Mapbox 中的聚类点

如何解决Mapbox 中的聚类点

我已经创建了人员分布图，包括它的照片作为图标。现在，我想尝试对它们进行聚类。但是，如果参考 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()
    });
};

});

解决方法

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

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

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

中的示例

注意添加图片应该完成synchronosly