2017-03-08 184 views
2

我想從使用Mapbox.js與單張到Mapbox GL。樣式MapBox GL標記

我有以下geojson,應根據附加圖像呈現。不幸的是,在閱讀了許多文章並通過與數據驅動可視化有關的文檔之後,我碰到了一堵牆。想知道是否有人可以幫助一個例子?

這裏的GeoJSON的:

{ "type":"Feature",geometry: { "type":"Point","coordinates":[1.1147,51.7829] },properties: { "title":"Paul","marker-color":"#0094F7","marker-size":"large","marker-symbol":"star" } }, 
{ "type":"Feature",geometry: { "type":"Point","coordinates":[-2.34851,52.6123] },properties: { "title":"Will","marker-color":"#F9883E","marker-size":"large","marker-symbol":"1" } }, 
{ "type":"Feature",geometry: { "type":"Point","coordinates":[-2.76389,53.0232] },properties: { "title":"Mark","marker-color":"#F1574E","marker-size":"large","marker-symbol":"13" } }, 
{ "type":"Feature",geometry: { "type":"Point","coordinates":[-.127211,51.6014] },properties: { "title":"David","marker-color":"#83C736","marker-size":"large","marker-symbol":"20" } }, 
{ "type":"Feature",geometry: { "type":"Point","coordinates":[-2.06682,53.4986] },properties: { "title":"Adam","marker-color":"#FC5C53","marker-size":"large","marker-symbol":"rocket" } } 

顏色值由最終用戶設置和可以是任何東西,所以我不能只是創造出很多適合的圖像,以及數字代表日期,以便將是1-31。

下面是它目前看起來像Mapbox.js:mapbox_markers

謝謝大家!

回答

2

使用Markers,您可以完全控制顯示任何喜歡的HTML元素 - 因此您可以使用CSS構建正確顏色的圓形或淚珠形狀,或SVG圖標。

見這個例子:不是直接加入以GeoJSON作爲源地圖https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/

從本質上講,你將要遍歷每個點,並添加標記地圖。