在mapbox-gl-js中居中放置文本标签？

Question

我正在尝试在mapbox-gl-js中的要素多边形上居中放置文本标签。 这可能吗？ 似乎与标签的放置有关的唯一选项是“ symbol-placement”布局属性（ https://www.mapbox.com/mapbox-gl-style-spec/#symbol ）：

符号放置

可选的枚举。 点，线之一。 默认为指向。 标签相对于其几何形状的放置。 line只能用于LineStrings和Polygons。

使用“点”将标签放置在特征的右下角：

有想法吗？

Answer 1

您可以使用草皮库查找多边形的质心，然后使用该点的坐标作为符号，并在其中添加文本字段。

有关在面要素的质心上显示的文本标签，请参见以下示例

 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', { 'type': 'geojson', 'data': centroidPt }); // 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': { '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>