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

影像与矢量叠加

一张静态影像加上矢量标注,范围对齐就能严丝合缝。

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

说明

ol.source.ImageStatic 把一张图铺到指定 imageExtent,矢量层用同一经纬度范围就天然对齐。

官方示例叠的是静态扫描图与标注层。这里底图由画布画出街区、河流与快速路,标注点用 fromLonLat 换算,两个开关分别控制影像与矢量。

要点

  • imageExtent 必须是视图投影下的范围,经纬度先 transformExtent。
  • 影像随缩放拉伸会变糊,适合低倍浏览。
  • 矢量层单独开关,便于核对是否对齐。

检查对齐时临时打开半透明网格,比对着地图猜快得多。