首页 / OpenLayers / 使用示例
替换底图瓦片源
两个 XYZ 瓦片源共用同一套 OSM 瓦片地址，用图层 className 加 CSS 滤镜做出灰度底图，单选切换。
源码与运行效果
说明
官方示例接入第三方底图服务的现成样式。示例改用 OSM 瓦片演示同一套接入方式：
ol.source.XYZ 只认一个带 {z}/{x}/{y} 的模板，
换服务商时改模板即可，图层结构不用动。
风格差异由图层 className 承担：灰度层拿到 .gray-tiles 类名，
它的 canvas 被 CSS filter 处理成灰度并提高对比度，不需要预先生成一套灰色瓦片。
| 操作 | 结果 |
|---|---|
| 切换到「灰度底图」 | 底图变灰，地图内容不变 |
| 切换到「标准底图」 | 恢复彩色底图 |
| 缩放地图 | 两套图层都按标准网格请求瓦片 |
CSS filter 作用在 canvas 上会带来一次合成开销，图层多时建议直接使用服务端提供的灰度瓦片样式。