Javascript 地图盒-群集缩放

是否可以像使用MapBox一样重新创建单击缩放群集？单击时，它将缩放到包含这些位置点的区域

以下是我的群集代码：

map.on('load', function() {
map.addSource("location", {
    type: "geojson",
    data: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/73873/test.geojson",
    cluster: true,
    clusterMaxZoom: 14,
    clusterRadius: 100
});

    map.addLayer({
    id: "clusters",
    type: "circle",
    source: "location",
    filter: ["has", "point_count"],
    paint: {
        "circle-color": {
            property: "point_count",
            type: "interval",
            stops: [
                [0, "#71AAC6"],
                [100, "#71AAC6"],
                [750, "#71AAC6"],
            ]
        },
        "circle-radius": {
            property: "point_count",
            type: "interval",
            stops: [
                [0, 20],
                [100, 30],
                [750, 40]
            ]
        }
    }
});

这是我的演示

---

我不认为您可以在纯Mapbox中完成，至少不容易

但对于这些特定于群集的用途，有一个（官方的Mapbox地理空间点群集库），它正好满足您的需要：

getClusterExpansionZoom（clusterId）

根据群集的

群集id

，返回群集扩展为多个子群集时的缩放（对“单击缩放”功能很有用）

编辑：实际上，您可以在没有超级星团的情况下完成：

使用此选项，可以检索单击的簇的点

map.on('click', function(e) {
    const cluster = map.queryRenderedFeatures(e.point, { layers: ["cluster"] });

    if (cluster[0]) {
    // features: from the added source that are clustered
    const pointsInCluster = features.filter(f => {
        const pointPixels = map.project(f.geometry.coordinates)
      const pixelDistance = Math.sqrt(
        Math.pow(e.point.x - pointPixels.x, 2) + 
        Math.pow(e.point.y - pointPixels.y, 2) 
      );
      return Math.abs(pixelDistance) <= clusterRadius;
    });
    console.log(cluster, pointsInCluster);
  }
});

map.on（'click'，函数（e）{
const cluster=map.queryRenderedFeatures（e.point，{layers:[“cluster”]}）；
if（群集[0]）{
//功能：来自已添加的群集源
const pointsInCluster=features.filter（f=>{
const pointPixels=map.project（f.geometry.coordinates）
常量像素距离=Math.sqrt(
Math.pow（e.point.x-pointPixels.x，2）+
Math.pow（e.point.y-pointPixels.y，2）
);
返回Math.abs（pixelDistance），正如@MeltedPenguin所说。你可以在没有超级星团的情况下完成。我搜索了几个答案，最后使用coffeescript完成了我自己的解决方案（你可以使用以下工具将其转换回JS）：

图层：

##============================================================##
## 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]]

我是这样解决的

可能重复
  @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]]

const handleClusterOnClick = React.useCallback(
    (event: LayerMouseEvent) => {
      if (event && rawMap) {
        const feature = event?.features?.[0];
        const source = rawMap.getSource(SOURCE_ID);

        if (
          feature &&
          feature.properties !== null &&
          // @ts-ignore
          typeof source.getClusterExpansionZoom === "function"
        ) {
          rawMap
            .getSource(SOURCE_ID)
            // @ts-ignore
            .getClusterExpansionZoom(
              feature.properties.cluster_id,
              (err: Error, expansionZoom: number) => {
                if (!err) {
                  rawMap.flyTo({
                    // @ts-ignore
                    center: feature.geometry.coordinates,
                    zoom: expansionZoom,
                    animate: true,
                    essential: true,
                  });
                }
              },
            );
        } else {
          rawMap.flyTo({
            animate: true,
            essential: true,
            center: event.lngLat,
            zoom: rawMap.getZoom() + 3, // This is bad UX, requires multiple clicks
          });
        }
      }
    },
    [rawMap],
  );