当前位置：首页 > news >正文

MapLibre GL JS第57课：使用 text-variable-anchor-offset 允许高优先级标签移动位置以保持在地图上（标签避碰2）。

news 2026/6/18 23:51:50

📌 学习目标

掌握带偏移的变量标签放置的实现方法
理解相关API的使用
能够独立完成类似功能开发

🎯 核心概念

使用text-variable-anchor-offset允许高优先级标签移位以保持可见。

💻 完整代码

<!DOCTYPEhtml><htmllang="en"><head><title>Variable label placement with offset</title><metaproperty="og:description"content="使用 text-variable-anchor-offset 允许高优先级标签移动位置以保持在地图上。"/><metaproperty="og:created"content="2025-06-25"/><metacharset='utf-8'><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel='stylesheet'href='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css'/><scriptsrc='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js'></script><style>body{margin:0;padding:0;}html, body, #map{height:100%;}</style></head><body><divid="map"></div><script>constplaces={'type':'FeatureCollection','features':[{'type':'Feature','properties':{'description':'Ford\'s Theater','icon':'theatre'},'geometry':{'type':'Point','coordinates':[-77.038659,38.931567]}},{'type':'Feature','properties':{'description':'The Gaslight','icon':'theatre'},'geometry':{'type':'Point','coordinates':[-77.003168,38.894651]}},{'type':'Feature','properties':{'description':'Horrible Harry\'s','icon':'bar'},'geometry':{'type':'Point','coordinates':[-77.090372,38.881189]}},{'type':'Feature','properties':{'description':'Bike Party','icon':'bicycle'},'geometry':{'type':'Point','coordinates':[-77.052477,38.943951]}},{'type':'Feature','properties':{'description':'Rockabilly Rockstars','icon':'music'},'geometry':{'type':'Point','coordinates':[-77.031706,38.914581]}},{'type':'Feature','properties':{'description':'District Drum Tribe','icon':'music'},'geometry':{'type':'Point','coordinates':[-77.020945,38.878241]}},{'type':'Feature','properties':{'description':'Motown Memories','icon':'music'},'geometry':{'type':'Point','coordinates':[-77.007481,38.876516]}}]};constmap=newmaplibregl.Map({container:'map',style:'https://tiles.openfreemap.org/styles/bright',center:[-77.04,38.907],zoom:11.15});map.on('load',()=>{// 添加包含地点坐标和信息的GeoJSON源。map.addSource('places',{'type':'geojson','data':places});map.addLayer({'id':'poi-labels','type':'symbol','source':'places','layout':{'text-field':['get','description'],'text-font':['Noto Sans Regular'],'text-variable-anchor-offset':['top',[0,1],'bottom',[0,-2],'left',[1,0],'right',[-2,0]],'text-justify':'auto','icon-image':['get','icon']}});map.rotateTo(180,{duration:10000});});</script></body></html>

🔍 代码解析

1. 初始化地图

使用new maplibregl.Map()创建地图实例，配置了基础地图样式和华盛顿特区区域，展示多个兴趣点（POI）。

2. 关键配置项

text-variable-anchor-offset: 为每个锚点位置指定不同的偏移量，提供更精细的标签位置控制
text-justify: 文本对齐方式，设为auto时根据锚点位置自动调整

⚙️ 参数说明

参数	类型	必填	说明
text-variable-anchor-offset	array	是	锚点位置和偏移量对：[‘top’, [0, 1], ‘bottom’, [0, -2], …]
text-justify	string	否	对齐方式：‘auto’, ‘left’, ‘center’, ‘right’
icon-image	expression	否	根据属性动态选择图标