首页 / OpenLayers / API 文档

OSMSource

先看结论

类名是 ol.source.OSM，OpenStreetMap 官方瓦片的预设数据源。不需要注册、不需要 Key，适合做底图和示例。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-27 · 引用本文

new ol.source.OSM(options)

构造参数

参数	说明
`url`	瓦片地址模板，默认 `https://tile.openstreetmap.org/{z}/{x}/{y}.png`
`attributions`	版权文本，默认指向 OSM 贡献者
`maxZoom`	最大级别，默认 19
`crossOrigin`	跨域模式，默认 `'anonymous'`，导出图片依赖它
`wrapX`	是否东西方向重复，默认 true
`tileLoadFunction`	自定义瓦片加载，可加缓存或鉴权
`interpolate`	缩放过程是否插值，默认 true，关闭后瓦片更锐利
`transition`	瓦片淡入时长，继承自瓦片图像源

直接使用

var osm = new ol.source.OSM({
  attributions: '© OpenStreetMap contributors'
});

var layer = new ol.layer.Tile({ source: osm });

默认地址已经包含 {z}/{x}/{y} 占位符，修改 url 就等于换了整套瓦片。换成 Humanitarian 配色时不需要新建数据源类型，这个地址结构同样适用：

var hot = new ol.source.OSM({
  url: 'https://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
  attributions: ' Humanitarian OSM'
});

和 XYZ 的关系

ol.source.OSM 继承自 ol.source.XYZ，区别只在于预设了地址、版权和最大级别。需要更细的控制（自定义瓦片网格、多个子域名、非标准坐标范围）时，用 ol.source.XYZ 更合适：

var xyz = new ol.source.XYZ({
  url: 'https://{a-c}.tile.example.com/{z}/{x}/{y}.png',
  maxZoom: 18,
  tileSize: 512,
  crossOrigin: 'anonymous'
});

OSM 官方瓦片服务有使用政策，只适合低流量场景。生产环境应换用自建瓦片或商业服务，否则可能被限流。 maxZoom 超过服务实际支持的级别会返回 404 图块。

瓦片加载函数

tileLoadFunction 可以接管单个瓦片的加载过程，用于加请求头、走代理、或者把瓦片缓存到 IndexedDB：

var source = new ol.source.OSM({
  tileLoadFunction: function (imageTile, src) {
    imageTile.getImage().src = '/proxy?url=' + encodeURIComponent(src);
  }
});

引用本文

经纬志（2026）。《OSMSource》。https://www.jingweizhi.com/openlayers/api/osm-source.html（访问日期 2026-11-03）。