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

OSM 矢量瓦片

同一份矢量数据可以渲染成任意风格,这是矢量瓦片的核心。

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

说明

OSM 矢量瓦片按图层组织:水系是面、道路是线、地名是点,样式完全由客户端决定。

每个瓦片按坐标生成这三类要素,勾选开关即时切换显示,底图不透明度可调,方便单独观察矢量层。

要点

  • 矢量瓦片换风格只需改样式,不用重新请求数据。
  • 道路按类别分主次,线宽与颜色不同。
  • 地名标签用 ol.style.Text 加白色描边,压在水面上也看得清。

底图调淡后矢量层更清楚,配色要和底图拉开明度差。