將文本標籤置於mapbox-gl-js中？

我試圖將文本標籤放在mapbox-gl-js中的要素多邊形上。這可能嗎？它看起來像有關標籤的位置唯一的選擇是「符號放置」佈局屬性（https://www.mapbox.com/mapbox-gl-style-spec/#symbol）：將文本標籤置於mapbox-gl-js中？

符號放置

可選枚舉。一點，一線。默認爲點。標籤相對於其幾何體的位置。 line只能用於LineStrings和Polygons。

使用「點」的功能的右下角放置標籤：

enter image description here

想法？

來源

2015-05-29 sillfishes

您可以使用turf library查找多邊形的質心，然後用該點座標作爲符號並向其添加文本字段。

參見下面的例子爲一個面要素的質心顯示的文本標籤

mapboxgl.accessToken = 'pk.eyJ1IjoiYXJ1bmFicmFoYW0iLCJhIjoiODBJTV9WUSJ9.m5tbZ5XYg8VhD-8Qu7d_SA'; 
 

 
// Initialize the map 
 
var map = new mapboxgl.Map({ 
 
    container: 'map', // container id 
 
    style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location 
 
    center: [-68.13734351262877, 45.137451890638886], // starting position 
 
    zoom: 3 // starting zoom 
 
}); 
 

 
// Add a feature 
 
var feature = { 
 
    'type': 'Feature', 
 
    'properties': { 
 
     'name': 'Maine' 
 
    }, 
 
    'geometry': { 
 
     'type': 'Polygon', 
 
     'coordinates': [[[-67.13734351262877, 45.137451890638886], 
 
      [-66.96466, 44.8097], 
 
      [-68.03252, 44.3252], 
 
      [-69.06, 43.98], 
 
      [-70.11617, 43.68405], 
 
      [-70.64573401557249, 43.090083319667144], 
 
      [-70.75102474636725, 43.08003225358635], 
 
      [-70.79761105007827, 43.21973948828747], 
 
      [-70.98176001655037, 43.36789581966826], 
 
      [-70.94416541205806, 43.46633942318431], 
 
      [-71.08482, 45.3052400000002], 
 
      [-70.6600225491012, 45.46022288673396], 
 
      [-70.30495378282376, 45.914794623389355], 
 
      [-70.00014034695016, 46.69317088478567], 
 
      [-69.23708614772835, 47.44777598732787], 
 
      [-68.90478084987546, 47.184794623394396], 
 
      [-68.23430497910454, 47.35462921812177], 
 
      [-67.79035274928509, 47.066248887716995], 
 
      [-67.79141211614706, 45.702585354182816], 
 
      [-67.13734351262877, 45.137451890638886]]] 
 
    } 
 
}; 
 

 
// Make a point feature for displaying the text; 
 
// User turf library to find the centroid of the polygon 
 
var centroidPt = turf.centroid(feature); 
 
centroidPt.properties.title = 'label'; 
 

 
map.on('style.load', function() { 
 
    // Add the feature source 
 
    map.addSource('maine', { 
 
     'type': 'geojson', 
 
     'data': feature 
 
    }); 
 

 
    // Add the label point source 
 
    map.addSource('label', { 
 
    \t 'type': 'geojson', 
 
     'data': centroidPt 
 
    }); 
 

 
\t // Add the feature style 
 
    map.addLayer({ 
 
     'id': 'route', 
 
     'type': 'fill', 
 
     'source': 'maine', 
 
     'layout': {}, 
 
     'paint': { 
 
      'fill-color': '#088', 
 
      'fill-opacity': 0.8 
 
     } 
 
    }); 
 

 
    // Add the label style 
 
    map.addLayer({ 
 
     'id': 'label-style', 
 
     'type': 'symbol', 
 
     'source': 'label', 
 
     'layout': { 
 
     \t 'text-field': 'Label', 
 
      
 
     }, 
 
     'paint': { 
 
      'text-color': 'red' 
 
      
 
     } 
 
    }); 
 
    
 
});

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

<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js"></script> 
 
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.14.1/mapbox-gl.css" rel="stylesheet"/> 
 
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.14.1/mapbox-gl.js"></script> 
 

 

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

來源

2016-02-19 14:09:28

我們可以在使用Mapbox工作室風格層多邊形的中心放置文本。這不涉及編程。見https://api.mapbox.com/styles/v1/personalrealestate1/cinm4j4ku001eaanfn7imnwr6.html?title=true&access_token=pk.eyJ1IjoicGVyc29uYWxyZWFsZXN0YXRlMSIsImEiOiJjaW5kb2duMG4weGZsdmdrdjd5ZTJha3N6In0.dJaZdwb6R11O5g6fzjUomQ#18.27/40.71065/-73.99161我想的標籤是在的中心多邊形不在它的第一點。 –

將文本標籤置於mapbox-gl-js中？

回答

相關問題