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工作

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

1 个答案: