2016-11-04 3 views
1

Я хотел был бы добавить текст к linestring. В принципе, так же, как название улицы отображается на картах Google. Поэтому, если я увеличиваю или перемещаю карту, текст все равно появляется на линии.mapbox Как добавить ярлык в linestring?

Нужно ли добавить новый слой с теми же координатами?

Для начала введите 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%; } 

ответ

1

Намного лучшее решение - http://jsfiddle.net/brianssheldon/wm18a33d/27/

Добавить свойства GeoJSON с properties.title и аддитер для символов меняет «текстовое поле» на «{title}»

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

и в addLayer для символов, используйте этот

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

Я был в состоянии заставить его работать 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": {} 
}); 
Смежные вопросы