1官方接口一般在线地图服务商都会提供各种样式的地图,可以直接调用,也可以根据需要自定义编辑。高德https://lbs.amap.com/api/java...百度http://lbsyun.baidu.com/index...如果使用osm地图,可以使用mapbox实现自定义样式,注册即可获取Freetokenhttps://docs.mapbox.com/mapbo...2如果地图渲染引擎是自己搭建的地图服务,使用地图渲染引擎渲染地图时可以自行设置样式。cssfilter方法1是针对特定的Maps,方法2比较繁琐,如果遇到需要兼容多图切换的场景(比如我遇到的需要同一个系统支持的情况百度地图和osm地图显示),上面的方法就更难描述了。如果你也碰巧遇到了类似的场景。使用cssfilters可以方便快捷的实现地图样式定制。例如:使用osmmap+leafletde时,只需在前端添加.leaflet-tile-paneimg{-webkit-filter:invert(1)grayscale(0)saturate(0.5)brightness(1.6)opacity(1)样式文件)色调旋转(334度)棕褐色(10%)!重要;-ms-filter:invert(1)grayscale(0)saturate(0.5)brightness(1.6)opacity(1)hue-rotate(334deg)sepia(10%)重要;-moz-filter:invert(1)grayscale(0)saturate(0.5)brightness(1.6)opacity(1)hue-rotate(334deg)sepia(10%)!重要;过滤器:反转(1)灰度(0)饱和(0.5)亮度(1.6)不透明度(1)色调旋转(334deg)棕褐色(1%)!重要;}效果:https://codepen.io/houhou/pen...原理是通过cssfilter改变地图图片的颜色。需要注意的是,因为是对地图图片进行整体修改,所以无法单独设置地图细节。另外,滤镜是根据图片本身的颜色来判断的,所以无法准确获取特定的颜色。样式颜色,但整体颜色可以通过设置透明度+设施背景色进行二次微调。
