Mapbox GL集群缩放

Question

当用户点击集群时，我试图显示所有的标记。

这就是我到目前为止所做的：

map.on('click', function (e) {
    var cluster_features = map.queryRenderedFeatures(e.point, {
        layers: [
            'cluster-0',
            'cluster-1',
            'cluster-2'
        ]
    });
    var cluster_feature = cluster_features[0];
    if (cluster_feature && cluster_feature.properties.cluster) {
        map.jumpTo({
            around: e.lngLat,
            zoom: map.getZoom() + 2
        });
    }
});

每当用户点击一个标记时，这就增加了2级缩放。它可以工作，但有时我需要放大更多才能看到标记。

有什么建议可以让我一次点击就能缩放到实际的标记吗？

Answer 1

考虑到Mapbox-gl 0.37.0的当前版本，这是一个有点复杂的解决方案。

我尝试在用户单击集群时显示所有标记

对于这一句话，有两种可能的解决方案。

1. 在下一个缩放级别显示标记加上聚类，或
2. 显示所有标记(与缩放级别无关)。

在mapbox-gl中，集群功能由supercluster提供。

从0.37.0开始，当您通过map.addSource...设置源代码时，还没有直观的应用程序接口来定制超级集群的工作方式

因此，您可能需要在使用mapbox-gl的入口文件中使用/导入supercluster作为库依赖项(通过npm或其他方式)。

1.使用超簇查找标记解簇时的下一个缩放级别。

在超簇中，您可以使用方法getClusterExpansionZoom(clusterId, clusterZoom)，这将为您提供所选簇的下一个缩放，从中可以看到标记(无论是来自currentZoomLevel的1,2,4,n zoomlevels。

var supercluster = require('supercluster');

let features;

map.on('load', function(e) {
  features = supercluster().load(FEATURES);
});

// helper function
function findNearestCluster(map, marker, i) {
  let clusterSelected = marker;
  // get bounds
  let south = map.getBounds()._sw;
  let north = map.getBounds()._ne;
  let bounds = [south.lng, south.lat, north.lng, north.lat];

  let currentClusters = i.getClusters(bounds, Math.floor(map.getZoom()));

  let compare = {
    lng: clusterSelected.geometry.coordinates[0],
    lat: clusterSelected.geometry.coordinates[1]
  };

  let minClusters = currentClusters.map(cluster => {
    let lng = cluster.geometry.coordinates[0];
    let lat = cluster.geometry.coordinates[1];

    return {
      id: cluster.properties.cluster_id,
      geometry: cluster.geometry,
      value: Math.pow(compare.lng - lng,2) * Math.pow(compare.lat-lat,2)
    };
  });

  return minClusters.sort(function(a,b) {
    return a.value - b.value;
  });
}

map.on('click', function (e) {
  var cluster_features = map.queryRenderedFeatures(e.point, {
    layers: [
      'cluster-0',
      'cluster-1',
      'cluster-2'
    ]
  });

  var cluster_feature = cluster_features[0];

  // we need to find the nearest cluster as 
  // we don't know the clusterid associated within supercluster/map
  // we use findNearestCluster to find the 'nearest' 
  // according to the distance from the click
  // and the center point of the cluster at the respective map zoom

  var clusters = findNearestCluster(map, cluster_feature, features);
  var nearestCluster = clusters[0];

  var currentZoom = Math.floor(map.getZoom());
  var nextZoomLevel = supercluster()
      .getClusterExpansionZoom(nearestCluster.id, currentZoom);  

  if (cluster_feature && cluster_feature.properties.cluster) {
    map.jumpTo({
      around: e.lngLat,
      zoom: nextZoomLevel
    });
  }
});

2.显示所有标记(与缩放级别无关)。

我们做了与上面类似的事情，但我们可以使用getLeaves，而不是只使用nextZoomLevel / getClusterExpansionZoom。

getLeaves返回集群中的所有标记-

var clusters = findNearestCluster(map, cluster_feature, features);
var nearestCluster = clusters[0];

var currentZoom = Math.floor(map.getZoom());

var getLeaves = supercluster()
    .getLeaves(nearestCluster.id, currentZoom, Infinity);  

在这里，如果需要，您可以将树叶呈现为mapbox.Markers，类似于leaflet.markercluster。

第二种解决方案的问题是，为了反映mapview的当前位置，您需要在视图发生更改时删除/更新标记。

从自上而下的角度来看，这是可以的，但如果你开始旋转，视图渲染就会有一点混乱，所以我不建议从UI的角度来看。

Answer 2

如果您根据cluster_features中每个点的坐标构建一个lineString，然后执行一个zoomTo-lingstring会怎么样

Answer 3

正如@MeltedPenguin所说(在MapBox - Cluster Zooming中)。您可以在没有SuperCluster的情况下完成。我搜索了几个答案，最后用coffeescript做了我自己的解决方案(你可以用http://js2.coffee/这样的工具把它转换回JS )：

    @clusterRadius = 30
    @map.on 'click', (e) =>
          features = @map.queryRenderedFeatures(e.point, { layers: ['markers_layer'] });
          if features && features.length > 0
            if features[0].properties.cluster
              cluster = features[0].properties

              allMarkers = @map.queryRenderedFeatures(layers:['markers_layer_dot']);
              self = @ #just a way to use 'this' un a function, its more verbose then =>    

              #Get all Points of a Specific Cluster
              pointsInCluster = allMarkers.filter((mk) ->
                pointPixels = self.map.project(mk.geometry.coordinates) #get the point pixel
                #Get the distance between the Click Point and the Point we are evaluating from the Matrix of All point
                pixelDistance = Math.sqrt((e.point.x - (pointPixels.x)) ** 2 + (e.point.y - (pointPixels.y)) ** 2)

                #If the distant is greater then the disance that define a cluster,  then the point si in the cluster
                # add it to the boundaries
                Math.abs(pixelDistance) <= self.clusterRadius
              )

              #build the bounding box with the selected points coordinates
              bounds = new (mapboxgl.LngLatBounds)
              pointsInCluster.forEach (feature) ->
                bounds.extend feature.geometry.coordinates
                return

              #Move the map to fit the Bounding Box (BBox)
              @map.fitBounds bounds, {padding:45, maxZoom: 16}

            else
              window.open('/en/ad/' + features[0].properties.propertyId)

在我的页面上，我有两个层基于相同的数据源，但具有不同的属性。一个定义了所有的点(没有簇)，另一个定义了点和簇。对于我的显示，我使用了带有簇的"markers_layer“，而对于计算距离和内容，我使用了另一个，作为点的DB。

来源：

  @map.addSource "markers_source_wo_cluster",
    type: "geojson"
    data:
      type: "FeatureCollection"
      features: []
    cluster: false
    clusterMaxZoom: 10
    clusterRadius: @clusterRadius

  @map.addSource "markers_source",
    type: "geojson"
    data:
      type: "FeatureCollection"
      features: []
    cluster: true
    clusterMaxZoom: 60
    clusterRadius: @clusterRadius

图层：

##============================================================##
## Add marker layer (Layer for QueryRender all dot without cluster)
##============================================================##
@map.addLayer
  id: 'markers_layer_dot'
  source: 'markers_source_wo_cluster'
  type: "circle"
  paint:
    "circle-radius": 0 #This are 1 pixel dot for ref only

##============================================================##
## Add marker layer
##============================================================##
@map.addLayer
  id: 'markers_layer'
  source: 'markers_source'
  type: 'symbol'
  layout:
    'icon-allow-overlap': true
    'icon-image':'pin_map'
    'icon-size':
      stops: [[0,0.4], [40,0.4]]