mapbox - 使用 mapbox-gl-js 聚类自定义 html 标记

Question

我正在使用 mapbox-gl-js API，并使用它与 react 创建一些自定义标记，如下所示:

        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);
            }
        );

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

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



有谁知道这是否可行(希望也可以使用自定义集群)或者它是否会在即将发布的版本中可用？

Answer 1

此功能现在在 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/ 结合使用得到全貌。希望这可以帮助!