Question

我们按照示例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图层的布局对象。这将显示丢失的计数。

Mapbox相同的圆半径簇重叠且不显示计数

1 个答案: