2016-09-08 99 views
1

我有一些JSON在一個文件中:如何從Mapbox GL中的geojson圖層添加文本字段?

{ 
    "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] 
     } 
     } 
    } 
    } 
} 

而且我加載到一個地圖,並試圖添加一個標籤與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似乎爲空。它似乎沒有從屬性層拾取和數據。任何關於這裏出了什麼問題的想法?

回答

4

你好barnaclebarnes!

您的問題源於您使用的GeoJSON。它不符合GeoJSON規範(我發現一個語法錯誤和一個結構錯誤)。我建議使用像GeoJSONLint這樣的工具來診斷問題並防止未來的問題。

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

+0

乾杯!我一直盯着它太久,並沒有注意到當我重構一些代碼時,我已經堵塞了嵌套。 – barnaclebarnes