html map 样式,自定义地图样式

1 官方接口

如果使用的osm地图，可以借助mapbox实现自定义风格，注册可获取免费token

https://docs.mapbox.com/mapbo...

2 地图渲染引擎

如果是自己搭建的地图服务，可以在使用地图渲染引擎渲染地图阶段自己设置样式

3 css滤镜

1的方法针对于特定的地图，2的方法相对麻烦，而且如果遇上需要兼容多种地图切换的场景(比如我遇见过的需要同一系统需要支持百度地图和osm地图展示的情况)，上面的方法就显得更加一言难尽，如果你也不巧遇上了相似场景，使用css滤镜可以简单快捷实现地图风格自定义。

比如：在使用了osm地图+leafletde 情况下只需前端样式文件中添加

.leaflet-tile-pane img{

-webkit-filter:invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;

-ms-filter:invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;

-moz-filter:invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;

filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(1%) !important;

}

原理就是通过css滤镜改变地图图片颜色，需要注意的是，因为是对地图图片整体修改，所以无法对地图细节部分进行单独设置，另外通过滤镜是基于图片本身进行处理的颜色，所以无法精准获取某种特定风格颜色，但是可以通过设置透明度+设施背景颜色的方法对整体颜色进行二次微调。