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如何添加标签到线串？

回答

相关问题