`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

风格化底图

同一份瓦片换一组滤镜,即可近似不同制图风格,成本比换服务商低得多。

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

说明

示例底图只有一层 OSM,风格切换通过给地图容器设置 filter 实现:toner 拉高对比并去色,terrain 加饱和度与暖调,watercolor 轻微模糊并降低对比。不透明度滑块作用于图层本身,与滤镜互不干扰。官方接入 Stamen 的专用瓦片,本页用滤镜近似其视觉特征。

操作结果
选择 toner底图变为高对比灰度,适合叠加专题色
选择 terrain暖色调增强,山地与绿地更突出
降低不透明度底图变淡,画布底色透出

要点

  • 滤镜作用于整个地图容器,控件也会被一并影响,必要时把它移到容器外。
  • 图层不透明度与 CSS 滤镜是两套机制,可以叠加使用。

滤镜会消耗 GPU,移动端大面积使用时留意帧率。

`r`n
`r`n