自定义地图样式

时间 2019-11-16

标签自定义地图样式繁體版

原文原文链接

1 官方接口

通常在线地图服务提供商都提供的多种风格的地图，可直接调用，也能够根据需求自定义编辑样式。
高德 https://lbs.amap.com/api/java...
百度 http://lbsyun.baidu.com/index...javascript

若是使用的osm地图，能够借助mapbox实现自定义风格，注册可获取免费token
https://docs.mapbox.com/mapbo...php

2 地图渲染引擎

若是是本身搭建的地图服务，能够在使用地图渲染引擎渲染地图阶段本身设置样式css

3 css滤镜

1的方法针对于特定的地图，2的方法相对麻烦，并且若是赶上须要兼容多种地图切换的场景（好比我碰见过的须要同一系统须要支持百度地图和osm地图展现的状况），上面的方法就显得更加一言难尽，若是你也不巧赶上了类似场景，使用css滤镜能够简单快捷实现地图风格自定义。前端

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

.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;
 }

效果：https://codepen.io/houhou/pen...web

原理就是经过css滤镜改变地图图片颜色，须要注意的是，由于是对地图图片总体修改，因此没法对地图细节部分进行单独设置，另外经过滤镜是基于图片自己进行处理的颜色，因此没法精准获取某种特定风格颜色，可是能够经过设置透明度+设施背景颜色的方法对总体颜色进行二次微调。api