javascript - Mapbox 相同的圆半径簇重叠并且未显示计数

Question

我们按照以下示例为 map 设置了数千个点的集群:https://www.mapbox.com/mapbox-gl-js/example/cluster/

我们希望所有簇的大小相同，但遇到了一个问题，即簇彼此重叠，因此簇内的计数并不总是显示，或者显示计数但未显示该簇(部分隐藏/被另一个簇重叠)。我们尝试了 clusterRadius、circle-radius/circle-color(不同步骤)的不同组合。

var map = makeMap({
  container: 'map',
  locationSearch: true,
  zoom: 10
});

map.addSource("scheduled", {
  type: "geojson",
  data: geojsonScheduled,
  cluster: true,
  clusterMaxZoom: 24, // Max zoom to cluster points on
  clusterRadius: 8 // Radius of each cluster when clustering points (defaults to 50)
});

map.addLayer({
  id: "scheduled-clusters",
  type: "circle",
  source: "scheduled",
  filter: ["has", "point_count"],
  paint: {
    "circle-color": [
      "step",
      ["get", "point_count"],
      "#f1733b",
      100,
      "#f1733b"
    ],
    "circle-radius": [
      "step",
      ["get", "point_count"],
      10,
      100,
      10
    ],
    "circle-stroke-width": 0.5,
    "circle-stroke-color": "#ffffff"
  }
});

map.addLayer({
  id: "scheduled-cluster-count",
  type: "symbol",
  source: "scheduled",
  filter: ["has", "point_count"],
  layout: {
    "text-field": "{point_count_abbreviated}",
    "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
    "text-size": 9
  }
});

map.addLayer({
  id: "scheduled-unclustered-point",
  type: "circle",
  source: "scheduled",
  filter: ["!has", "point_count"],
  paint: {
    "circle-color": "#f1733b",
    "circle-radius": 4.5,
    "circle-stroke-width": 0.5,
    "circle-stroke-color": "#ffffff"
  }
});

感谢任何帮助或指示。谢谢!

Answer 1

将 "text-allow-overlap": true 添加到 Scheduled-Cluster-Count 图层的布局对象中。这将显示缺失的计数。