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

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

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

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

Использование «точки» помещает метку в нижний правый угол объекта:

введите описание изображения здесь

Идеи?


person sillfishes    schedule 29.05.2015    source источник


Ответы (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>

person Arun Abraham    schedule 19.02.2016
comment
Можем ли мы разместить текст в центре многоугольника, используя слой стиля Mapbox Studio. Это не требует программирования. См api.mapbox.com/styles/v1/personalrealestate1/ Я бы хотел, чтобы метка находилась в центре многоугольника, а НЕ в его первой точке. - person Ralph Yozzo; 01.05.2016
comment
@RalphYozzo, как добавить текст в центр без использования дерна - person Khurshid Ansari; 21.11.2019
comment
@KhurshidAnsari Было бы проще, если бы mapbox поддерживал его стилем. Может, и есть. Давненько я не смотрел. Также помните, что метка основана на векторном тайле. Таким образом, на одном многоугольнике будет много копий метки. Думаю, у ручного создания карт есть свои достоинства :) - person Ralph Yozzo; 30.11.2019