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

另类瓦片源

用 XYZ 源完整展示地址模板、版权、跨域与加载函数四个参数,指向 OSM 瓦片。

OpenLayers 10.3.1 · 对应官方 google.html · 更新 2026-10-28
源码与运行效果
运行效果

说明

官方示例接入 Google Maps 瓦片。Google 的瓦片服务需要密钥且条款限制直接复用,示例改用同一套 XYZ 源写法指向 OSM,把 url 模板、attributions、crossOrigin、tileLoadFunction 四个参数完整展示出来。

自定义源叠在默认 OSM 之上,透明度一致,可以看到两者完全对齐,说明模板参数正确。

操作结果
取消勾选只剩默认底图
顶栏计数显示已加载瓦片数
地址模板出错触发 tileloaderror 提示

第三方瓦片接入失败时先看控制台请求地址,多半是 {z}/{x}/{y} 顺序与坐标系不匹配。