`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

富文本标注

标注不只是文字:字体、底色、描边、内边距组合起来,决定了它在底图上的可读性。

OpenLayers 10.3.1 · 更新 2026-10-28
`r`n
源码与运行效果
运行效果
`r`n

说明

ol.style.Text 提供 fill、stroke、backgroundFill、backgroundStroke 与 padding。示例按要素的 kind 属性分三套写法:白底描边的深色字适合浅色底图,深色胶囊配白字适合杂乱底图,粗斜体无底色则用于强调。offsetY 控制文字与点位的距离,正值向下。

操作结果
缩放地图文字尺寸以像素固定,不随比例缩放
观察三种样式胶囊标签在花底图上最清晰

要点

  • backgroundFill 会按文字范围自动铺底,省去手工量尺寸。
  • 描边宽度取 3 到 5 像素即可,过粗会糊字。

同一图层里混用多种文字样式时,注意字重差异不要过大,否则视觉重心会跑偏。

`r`n
`r`n