mapbox如何添加標籤到線串？

我想將文本添加到線串中。基本上，街道名稱在Google地圖中顯示的方式基本相同。所以如果我放大或移動地圖，文本仍然顯示在線上。mapbox如何添加標籤到線串？

我是否需要添加某種具有相同座標的新圖層？

這是一個jsfiddle開始。

<body> 

<div id='map'></div> 

</body> 

mapboxgl.accessToken = 'pk.eyJ1Ijoib2tpZWJ1YmJhIiwiYSI6ImNpdHZscGs3ajAwNXYyb284bW4ydWUzbGsifQ.1PoNrSP0F65WolWgqKhV4g'; 

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

map.on('load', function() { 
    map.addSource("route", { 
     "type": "geojson", 
     "data": { 
      "type": "Feature", 
      "properties": {}, 
      "geometry": { 
       "type": "LineString", 
       "coordinates": [ 
        [-88.451092, 33.325422], 
        [-88.248037, 33.436312] 
       ] 
      } 
     } 
    }); 

    map.addLayer({ 
     "id": "route", 
     "type": "line", 
     "source": "route", 
     "layout": { 
      "line-join": "round", 
      "line-cap": "round" 
     }, 
     "paint": { 
      "line-color": "#888", 
      "line-width": 8 
     } 
    }); 



}); 


     body { margin:0; padding:0; } 
     #map { position:absolute; top:0; bottom:0; width:100%; }

來源

2016-11-04 okieBubba

更好的解決方案 - http://jsfiddle.net/brianssheldon/wm18a33d/27/

添加的屬性與properties.title並以GeoJSON的符號的附加層將「text-field」更改爲「{title}」

"properties": { 
     "title": 'aaaaaa' 
    }

並在addLayer的符號，使用該

"text-field": '{title}',

來源

2016-11-30 14:35:43 okieBubba

我能得到它的工作http://jsfiddle.net/brianssheldon/wm18a33d/8/

我加入這個代碼

map.addLayer({ 
    "id": "symbols", 
    "type": "symbol", 
    "source": "route", 
    "layout": { 
     "symbol-placement": "line", 
     "text-font": ["Open Sans Regular"], 
     "text-field": 'this is a test', 
     "text-size": 32 
    }, 
    "paint": {} 
});

來源

2016-11-29 19:25:03 okieBubba

mapbox如何添加標籤到線串？

回答

相關問題