在mapbox-gl-js中居中文本标签?
Posted
技术标签:
【中文标题】在mapbox-gl-js中居中文本标签?【英文标题】:Centering text label in mapbox-gl-js? 【发布时间】:2015-08-12 09:42:18 【问题描述】:我正在尝试将文本标签置于 mapbox-gl-js 中的要素多边形的中心。这可能吗?看起来与标签放置相关的唯一选项是“符号放置”布局属性(https://www.mapbox.com/mapbox-gl-style-spec/#symbol):
符号放置
可选枚举。点、线之一。默认为点。
相对于其几何图形的标签放置。 line
只能用于 LineStrings 和 Polygons。
使用“点”将标签放置在特征的右下角:
想法?
【问题讨论】:
【参考方案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',
'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>
【讨论】:
我们能否使用 Mapbox Studio 样式图层将文本放置在多边形的中心。这不涉及编程。请参阅api.mapbox.com/styles/v1/personalrealestate1/… 我希望标签位于多边形的中心而不是它的第一个点。 @RalphYozzo 如何在不使用草皮的情况下在中心添加文本 @KhurshidAnsari 如果 mapbox 支持它的样式,那将是最简单的。也许他们会。我有一阵子没看了。还要记住,标签是基于矢量瓦片的。所以在同一个多边形上会有很多标签的副本。我猜手工制作地图有一些优点:)以上是关于在mapbox-gl-js中居中文本标签?的主要内容,如果未能解决你的问题,请参考以下文章