1 官方接口
一般在線地圖服務提供商都提供的多種風格的地圖，可直接調用，也可以根據需求自定義編輯樣式。
高德 https://lbs.amap.com/api/javascript-api/guide/map/map-style/
百度 http://lbsyun.baidu.com/index.php?title=jspopular/guide/custom
如果使用的osm地圖，可以借助mapbox實現自定義風格，注冊可獲取免費token
https://docs.mapbox.com/mapbox-gl-js/examples/
2 地圖渲染引擎
如果是自己搭建的地圖服務，可以在使用地圖渲染引擎渲染地圖階段自己設置樣式
3 css濾鏡
1的方法針對於特定的地圖，2的方法相對麻煩，而且如果遇上需要兼容多種地圖切換的場景（比如我遇見過的需要同一系統需要支持百度地圖和osm地圖展示的情況），上面的方法就顯得更加一言難盡，如果你也不巧遇上了相似場景，使用css濾鏡可以簡單快捷實現地圖風格自定義。
比如：在使用了osm地圖+leafletde 情況下只需前端樣式文件中添加
.lleaflet-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/moGQVj
原理就是通過css濾鏡改變地圖圖片顏色，需要注意的是，因為是對地圖圖片整體修改，所以無法對地圖細節部分進行單獨設置，另外通過濾鏡是基於圖片本身進行處理的顏色，所以無法精准獲取某種特定風格顏色，但是可以通過設置透明度+設施背景顏色的方法對整體顏色進行二次微調。