javascript - 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"
        }
      }
  ]
};

加载 map ，添加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

目前，您正在簇层之前添加簇计数层，因此后者覆盖了前者。如果您切换顺序，您将看到: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 工作