Question

我正在使用mapbox-gl-js API，我正在使用它做出反应来创建一些自定义标记，如下所示：

        let div = document.createElement('div');
        let marker = new mapboxgl.Marker(div, {
            offset: [ -20, 80 ]
        });

        marker.setLngLat(person.geometry.coordinates);

        render(
            <MapPersonIcon />,
            div,
            () => {
                marker.addTo(map);
            }
        );

result

这很有效。但是，我现在想要对这些标记进行聚类，产生与图层中发现的功能相同的影响，即

https://www.mapbox.com/mapbox-gl-js/example/cluster/

clusters

是否有人知道这是否可行（希望也可以使用自定义群集）或是否可以在即将发布的版本中使用？

Answer 1

回答自己的问题：

目前似乎根据mapbox的github不可能：

如果您想对标记进行聚类，则需要使用mapbox的本机maki图标（请参阅上面的示例图片和网址），直到插件可用于您的自定义HTML标记。

Answer 2

此功能现在在Mapbox GL js中-https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/

要点：

使用map.addSource设置数据源时，请确保定义cluster: true和clusterRadius: int，如下所示：

        map.addSource( 'sourceName', {
            type: "geojson",
            data: {
                type: 'FeatureCollection',
                features: [JSON]
            },
            cluster: true,
            clusterRadius: 80,
        });

这将推动mapbox聚类您的图标，但是您需要告诉mapbox聚类这些图标时该怎么做：

map.on( 'moveend', updateMarkers ); // moveend also considers zoomend

业务（针对相关性进行了修剪）：

function updateMarkers(){
    var features = map.querySourceFeatures( 'sourceName' );

    for ( var i = 0; i < features.length; i++ ) {
        var coords = features[ i ].geometry.coordinates;
        var props = features[ i ].properties;

        if ( props.cluster ){ // this property is only present when the feature is clustered
            // generate your clustered icon using props.point_count
            var el = document.createElement( 'div' );
            el.classList.add( 'mapCluster' );
            el.innerText = props.point_count;
            marker = new mapboxgl.Marker( { element: el } ).setLngLat( coords );

        } else { // feature is not clustered, create an icon for it
            var el = new Image();
            el.src = 'icon.png';
            el.classList.add( 'mapMarker' );
            el.dataset.type = props.type; // you can use custom data if you have assigned it in the GeoJSON data
            marker = new mapboxgl.Marker( { element: el } ).setLngLat( coords );
        }

        marker.addTo( map );
    }

注意：不要复制粘贴此代码，而是将其与https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/结合使用以获取整个图片。希望这会有所帮助！

使用mapbox-gl-js

2 个答案: