功能场景:
之前在问答中提问图层中的文字是如何实现的,没有合适的答案,现将问题记录一下。
实现代码
提示:这里添加紫色的fill图层与黑色的边框line图层就不赘述,具体可查看上一篇文章
arr.forEach((element, index) => {
this.map.addLayer({
id: `${element.id}Symbol`,
type: 'symbol',
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: element.center,
properties: {
title: element.name
}
}
]
}
},
layout: {
'text-field': '{title}',
'text-font': ['Noto Sans Regular'],
'text-size': 12
},
paint: {
'text-halo-color': '#fff',
'text-halo-width': 2
}
});
});
代码解释:
layout:
- arr为包含区域坐标的数组
- text-field为所要取的变量的名字,需要再properties中定义
- text-font为显示的字体,注意这个需要看glyphs: fonts/{fontstack}/{range}.pbf中有什么字体,否则不会显示文字的!
paint:
- text-halo-color为文字周围光圈的颜色
- text-halo-width为光圈的宽度