用途:为 MapLibre GL JS 样式提供制图规范,帮助在发布前审查样式、选择标注配色、自托管图标并正确排列图层。
主要能力:
- 标注配色。MapLibre 动态放置标注,无法遮罩背景,需靠 text-halo-color 与 text-color 配合。浅色矢量底图用深色文字配浅色半透明光晕;深色矢量底图用白字配深色半透明光晕;卫星/航拍影像背景不可预测,统一用白字配深色半透明光晕,如 "text-color": "#ffffff"、"text-halo-color": "rgba(0,0,0,0.75)"、"text-halo-width": 1.2。常见错误是无透明度的白色光晕,以及把浅色矢量配色直接用于影像。彩色标注(公园、水体、POI)宜用语义色的浅色调。光晕宽度按要素级别取 0.8–2.0 像素。
- 影像上的点符号。航拍影像饱和度低,宜用高饱和填充色(琥珀、陶土色)拉开对比;用 icon-halo-color/icon-halo-width 勾边,但仅对 SDF 精灵图有效,全彩栅格图标需在图形内烘焙边缘。可加渐变与接触阴影增强立体感,光照方向与底图山体阴影方向一致。
- 视觉层级。按要素重要性递减文字大小,用 text-font 字重、text-transform、text-letter-spacing 强化层级;双行标注可将 text-line-height 设为约 0.9。
- 影像上的矢量道路。降低饱和度、以宽度和明度而非色相表达层级、使用不透明填充与描边,并按缩放插值颜色。
- 精灵图。sprite 为无扩展名的基础 URL,MapLibre 自动追加 .json、.png 与 @2x;icon-image 必须与精灵图 JSON 中的 ID 完全一致,否则图标静默不渲染。建议自托管,勿在生产环境指向 raw.githubusercontent.com。可用 spritezero、spreet、Martin 从 SVG 生成精灵图。
- 图层顺序。样式按 layers 数组顺序绘制,先画在下。运行时注入数据图层应插入到第一个 symbol 图层之前,否则会盖住标注。自定义样式推荐顺序:background、栅格影像、山体阴影、地形填充、线图层、自有数据面线、底图符号、自有符号。
- 无障碍。文字对比度建议满足 WCAG 2.1 AA(普通文字 4.5:1,大号文字 3:1),不单靠颜色区分,标注最小约 10px;WebGL 画布对屏幕阅读器不友好,需提供数据表或文字描述等替代方案。
适用场景:样式发布前审查、迁移样式配色、自托管精灵图、向现有底图注入数据、影像上重绘道路、排查路线盾牌缺失、对比度审计。
限制:资料未提供具体收费、价格与平台信息;部分示例 URL 仅供测试,不可用于生产。