javascript - Centering text label in mapbox-gl-js? - Stack Overflow

admin管理员组

文章数量:1271756

I'm trying to center a text label over a feature polygon in mapbox-gl-js. Is this possible? It looks like the only option related to the placement of a label is the "symbol-placement" layout property ():

symbol-placement

Optional enum. One of point, line. Defaults to point. Label placement relative to its geometry. line can only be used on LineStrings and Polygons.

Using "point" places the label at the bottom right corner of the feature:

Ideas?

I'm trying to center a text label over a feature polygon in mapbox-gl-js. Is this possible? It looks like the only option related to the placement of a label is the "symbol-placement" layout property (https://www.mapbox./mapbox-gl-style-spec/#symbol):

symbol-placement

Optional enum. One of point, line. Defaults to point. Label placement relative to its geometry. line can only be used on LineStrings and Polygons.

Using "point" places the label at the bottom right corner of the feature:

Ideas?

• javascript
• json
• mapbox
• mapbox-gl-js

Share Improve this question Follow asked May 29, 2015 at 13:33 sillfishessillfishes 39033 silver badges99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

You can use the turf library to find the centroid of the polygon, then make a symbol with that point co-ordinate and add the text field to it.

See the below example for a text label displayed on the centroid of a polygon feature

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


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

本文标签： javascriptCentering text label in mapboxgljsStack Overflow