MapBox GL Javascript - 集群 - 计数不显示

Question

我正在使用 MapBox GL JS v1.4.1

基于此处的示例：https://docs.mapbox.com/mapbox-gl-js/example/cluster/

我的cluster count 无法显示。

我曾尝试直接复制 MapBox 示例并使用我自己的数据，但无论我尝试什么都会导致计数不显示。

这就是我所拥有的：

<div id="map"></div>

mapboxgl.accessToken = 'ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/dark-v10',
  zoom: 1
});

我的 geoJson 数据：

var geoData = {
  "type": 'FeatureCollection',
  "features": [
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [151.12100, -33.78420]
        },
        "properties": {
          "title" : "title",
          "description": "description"
        }
      },
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [151.12100, -33.78420]
        },
        "properties": {
          "title" : "title",
          "description": "description"
        }
      }
  ]
};

加载地图、添加geoJSON、集群等：

map.on('load', function() {

  map.addSource("testMapData", {
    type: "geojson",
    data: geoData,
    cluster: true,
    clusterMaxZoom: 14,
    clusterRadius: 50
  });

  map.addLayer({
    id: "cluster-count",
    type: "symbol",
    source: "testMapData",
    filter: ["has", "point_count"],
    layout: {
      "text-field": "{point_count_abbreviated}",
      "text-font": ["Arial Unicode MS Bold"],
      "text-size": 12,
      "text-allow-overlap" : true
    }
  });

  map.addLayer({
    id: "clusters",
    type: "circle",
    source: "testMapData",
    filter: ["has", "point_count"],
    paint: {
      "circle-color": "#f1f075",
      "circle-radius": 40
    }
  });

  map.addLayer({
    id: "unclustered-point",
    type: "circle",
    source: "testMapData",
    filter: ["!", ["has", "point_count"]],
    paint: {
      "circle-color": "#51bbd6",
      "circle-radius": 8,
      "circle-stroke-width": 1,
      "circle-stroke-color": "#fff"
    }
  });

});

根据上述情况，我应该获取我的每个集群的集群计数，但我只看到没有计数的集群。

控制台也没有显示任何错误。

我无法确定我的 geoJSON 是否存在问题（它通过 linter 验证：http://geojsonlint.com/）...或者问题是否在于我如何添加 cluster-count 层...或某处完全不同。

Answer 1

目前，您在 clusters 层之前添加 cluster-count 层，因此后者覆盖了前者。如果您切换顺序，您将看到两者：https:///codepen.io/pj_leonard/pen/bGGgYwv?editors=1000

将您的代码更新为以下内容：

map.on('load', function() {

  map.addSource("testMapData", {
    type: "geojson",
    data: geoData,
    cluster: true,
    clusterMaxZoom: 14,
    clusterRadius: 50
  });

  map.addLayer({
    id: "clusters",
    type: "circle",
    source: "testMapData",
    filter: ["has", "point_count"],
    paint: {
      "circle-color": "#f1f075",
      "circle-radius": 40
    }
  });  

  map.addLayer({
    id: "cluster-count",
    type: "symbol",
    source: "testMapData",
    filter: ["has", "point_count"],
    layout: {
      "text-field": "{point_count_abbreviated}",
      "text-font": ["Arial Unicode MS Bold"],
      "text-size": 12,
      "text-allow-overlap" : true
    }
  });

  map.addLayer({
    id: "unclustered-point",
    type: "circle",
    source: "testMapData",
    filter: ["!", ["has", "point_count"]],
    paint: {
      "circle-color": "#51bbd6",
      "circle-radius": 8,
      "circle-stroke-width": 1,
      "circle-stroke-color": "#fff"
    }
  });

});

免责声明：我在 Mapbox 工作