Центрирование текстовой метки в mapbox-gl-js?

Question

Я пытаюсь центрировать текстовую метку поверх многоугольника функции в mapbox-gl-js. Это возможно? Похоже, что единственный вариант, связанные с размещением метки является «символом-размещения» свойство макета (https://www.mapbox.com/mapbox-gl-style-spec/#symbol):

символов размещения

Дополнительное перечисление. Одна из точек, линия. По умолчанию указывается точка. Расположение этикеток относительно его геометрии. line может использоваться только в LineStrings и Polygons.

Используя "точку" ставит метку в правом нижнем углу функции:

Идеи?

Answer 1

Вы можете использовать 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>