自定義地圖樣式

1 官方接口

通常在線地圖服務提供商都提供的多種風格的地圖，可直接調用，也能夠根據需求自定義編輯樣式。
高德 https://lbs.amap.com/api/java...
百度 http://lbsyun.baidu.com/index...

若是使用的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;
 }

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

原理就是經過css濾鏡改變地圖圖片顏色，須要注意的是，由於是對地圖圖片總體修改，因此沒法對地圖細節部分進行單獨設置，另外經過濾鏡是基於圖片自己進行處理的顏色，因此沒法精準獲取某種特定風格顏色，可是能夠經過設置透明度+設施背景顏色的方法對總體顏色進行二次微調。