经纬志
首页 / MapLibre / 使用示例

符号图层

城市点位配英文名,字号随缩放连续变大,滑块再乘一个系数。 符号图层同时负责文字与图标,碰撞检测是它默认开启的能力。

MapLibre GL JS 4.x · 更新 2026-10-28
源码与运行效果
运行效果

说明

文字由 text-field 读取属性,text-size 用 interpolate 按缩放从 10 过渡到 17,再与滑块系数相乘。 乘法表达式写在同一个数组里,改动一次即可整体生效。

demo 的字形服务器只提供 Noto Sans Regular,中文地名会缺字, 所以示例统一用英文名。生产项目应把中文字体打包成 glyphs 或改用 glyphs 自建地址。

属性取值作用
text-font['Noto Sans Regular']字形栈,缺字体时文字不显示
text-offset[0, 1.2]文字相对点的偏移,单位 em
text-anchor'top'文字在锚点下方展开
text-halo-width1.6白色描边,压住底图线条
text-allow-overlapfalse默认避让,密集时自动隐藏

低缩放时点位挤在一起,避让会让部分名字消失。这是预期行为: 宁可少显示,也不要叠成一团。需要全部显示时再打开 text-allow-overlap,代价是文字互相遮挡。

标注不出现先查 text-font。字体名不在字形服务器上时, 请求返回 404,图层不报样式错误,只是没有文字。