0

我正在使用 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图层......或其他地方完全。

4

1 回答 1

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

于 2019-10-22T00:11:14.050 回答