首页 / Leaflet / 使用示例
瓦片滤镜
不改底图地址，只给瓦片容器加 CSS 滤镜，就得到灰度、夜间、暖色、高对比四种风格。
源码与运行效果
说明
滤镜加在地图容器的类名上，CSS 规则锁定 .leaflet-tile-pane，
也就是只作用于瓦片层。矢量、标记、弹窗分别在 overlay、marker、popup 三个 pane 中，
颜色完全不受影响，示例里的橙色面和绿色点就是用来验证这一点的。
| 风格 | 滤镜组合 | 用途 |
|---|---|---|
| 灰度 | grayscale(1) contrast(1.12) | 让专题配色成为视觉重点 |
| 夜间 | invert(1) hue-rotate(180deg) brightness(.82) | 深色界面下的底图 |
| 暖色 | sepia(.38) saturate(1.35) | 复古风、纸质地图观感 |
| 高对比 | contrast(1.55) saturate(1.2) | 投影仪、强光环境 |
切换时用 classList 增删滤镜类，不要整体重写 className。
Leaflet 会在容器上动态维护 leaflet-container、leaflet-touch-*
等类，整体覆盖会让交互样式失效。
滤镜由 GPU 合成，全屏大面积使用有一定开销，低端移动设备上可能出现缩放掉帧。 夜间模式尤其要注意路名与背景的对比度，必要时同步调整底图透明度或叠加暗色遮罩。