首页 / OpenLayers / 使用示例
`r`n 风格化底图
同一份瓦片换一组滤镜,即可近似不同制图风格,成本比换服务商低得多。
`r`n
源码与运行效果
说明
示例底图只有一层 OSM,风格切换通过给地图容器设置 filter 实现:toner 拉高对比并去色,terrain 加饱和度与暖调,watercolor 轻微模糊并降低对比。不透明度滑块作用于图层本身,与滤镜互不干扰。官方接入 Stamen 的专用瓦片,本页用滤镜近似其视觉特征。
| 操作 | 结果 |
|---|---|
| 选择 toner | 底图变为高对比灰度,适合叠加专题色 |
| 选择 terrain | 暖色调增强,山地与绿地更突出 |
| 降低不透明度 | 底图变淡,画布底色透出 |
要点
- 滤镜作用于整个地图容器,控件也会被一并影响,必要时把它移到容器外。
- 图层不透明度与 CSS 滤镜是两套机制,可以叠加使用。
滤镜会消耗 GPU,移动端大面积使用时留意帧率。