mapbox-gl-js - 如何从 Mapbox GL 中的 geojson 图层添加文本字段？

Question

我在文件中有一些 JSON:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-87.5048, 33.2943],
        "properties": {
          "museum_count": 8465,
          "sw": [27.9802015625,-98.5048],
          "ne": [38.6083984375,-76.5048]
        }
      }
    }
  }
}

我正在将其加载到 map 中并尝试使用 museum_count 向圆圈添加标签:

mapboxgl.accessToken = 'pk.eyJ1IjoibXl0b3Vyc2FwcCIsImEiOiJDRUVsckI0In0.-eKUxQLVBgTtyoyhxyFyYQ';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v9',
  center: [0,0],
  zoom: 4
});

map.addControl(new mapboxgl.Navigation());

map.on('load', function() {
  map.addSource('clusters', {
    type: "geojson",
    data: '/en/map.json'
  });

  map.addLayer({
      "id": "clusters",
      "type": "circle",
      "source": "clusters",
      "paint": {
          "circle-radius": 18,
          "circle-color": "#3887be"
      }
  });

  map.addLayer({
    "id": "clusters-label",
    "type": "symbol",
    "source": "clusters",
    "layout": {
      "text-field": "{museum_count}",
      "text-font": [
        "DIN Offc Pro Medium",
        "Arial Unicode MS Bold"
      ],
      "text-size": 12
    }
  });
});

问题是 museum_count 似乎为空。它似乎没有从属性层获取数据。对这里出了什么问题有什么想法吗？

Answer 1

你好藤壶巴恩斯!

您的问题源于您使用的 GeoJSON。它不符合 GeoJSON 规范(我发现一处语法错误和一处结构错误)。我建议使用像 GeoJSONLint 这样的工具诊断问题并防止将来出现类似问题。

http://jsbin.com/yekewogevu/1/edit?html,output