自定義地圖樣式

Airmusic 發(fā)布于2019-08-30 15:56 / 1321人閱讀

摘要：官方接口一般在線地圖服務提供商都提供的多種風格的地圖，可直接調(diào)用，也可以根據(jù)需求自定義編輯樣式。

1 官方接口

一般在線地圖服務提供商都提供的多種風格的地圖，可直接調(diào)用，也可以根據(jù)需求自定義編輯樣式。
高德 https://lbs.amap.com/api/java...
百度 http://lbsyun.baidu.com/index...

如果使用的osm地圖，可以借助mapbox實現(xiàn)自定義風格，注冊可獲取免費token
https://docs.mapbox.com/mapbo...

2 地圖渲染引擎

如果是自己搭建的地圖服務，可以在使用地圖渲染引擎渲染地圖階段自己設(shè)置樣式

3 css濾鏡

1的方法針對于特定的地圖，2的方法相對麻煩，而且如果遇上需要兼容多種地圖切換的場景（比如我遇見過的需要同一系統(tǒng)需要支持百度地圖和osm地圖展示的情況），上面的方法就顯得更加一言難盡，如果你也不巧遇上了相似場景，使用css濾鏡可以簡單快捷實現(xiàn)地圖風格自定義。

比如：在使用了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濾鏡改變地圖圖片顏色，需要注意的是，因為是對地圖圖片整體修改，所以無法對地圖細節(jié)部分進行多帶帶設(shè)置，另外通過濾鏡是基于圖片本身進行處理的顏色，所以無法精準獲取某種特定風格顏色，但是可以通過設(shè)置透明度+設(shè)施背景顏色的方法對整體顏色進行二次微調(diào)。

云服務器 GPU云服務器自定義地圖自定義按鈕樣式 h5視頻播放器可自定義樣式 html表格定義樣式

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/117553.html

相關(guān)文章

FineReport如何操作離線點地圖

摘要：問題描述當用戶沒有網(wǎng)絡(luò)，使用點地圖時會發(fā)現(xiàn)圖層無法顯示，這時怎么辦呢解決方法可以用組合地圖的方式，將區(qū)域地圖作為底層數(shù)據(jù)為空，在其中添加點地圖進行展示。問題描述當用戶沒有網(wǎng)絡(luò)，使用點地圖時會發(fā)現(xiàn)gis圖層無法顯示，這時怎么辦呢？解決方法可以用組合地圖的方式，將區(qū)域地圖作為底層（數(shù)據(jù)為空），在其中添加點地圖進行展示。示例3.1 準備數(shù)據(jù) 新建工作薄，添加內(nèi)置數(shù)據(jù)集tourism...

figofuture 2019-08-21 11:47 評論0 收藏0
FineReport如何操作離線點地圖

摘要：問題描述當用戶沒有網(wǎng)絡(luò)，使用點地圖時會發(fā)現(xiàn)圖層無法顯示，這時怎么辦呢解決方法可以用組合地圖的方式，將區(qū)域地圖作為底層數(shù)據(jù)為空，在其中添加點地圖進行展示。問題描述當用戶沒有網(wǎng)絡(luò)，使用點地圖時會發(fā)現(xiàn)gis圖層無法顯示，這時怎么辦呢？解決方法可以用組合地圖的方式，將區(qū)域地圖作為底層（數(shù)據(jù)為空），在其中添加點地圖進行展示。示例3.1 準備數(shù)據(jù) 新建工作薄，添加內(nèi)置數(shù)據(jù)集tourism...

mdluo 2019-08-15 10:48 評論0 收藏0
FineReport如何操作離線點地圖

摘要：問題描述當用戶沒有網(wǎng)絡(luò)，使用點地圖時會發(fā)現(xiàn)圖層無法顯示，這時怎么辦呢解決方法可以用組合地圖的方式，將區(qū)域地圖作為底層數(shù)據(jù)為空，在其中添加點地圖進行展示。問題描述當用戶沒有網(wǎng)絡(luò)，使用點地圖時會發(fā)現(xiàn)gis圖層無法顯示，這時怎么辦呢？解決方法可以用組合地圖的方式，將區(qū)域地圖作為底層（數(shù)據(jù)為空），在其中添加點地圖進行展示。示例3.1 準備數(shù)據(jù) 新建工作薄，添加內(nèi)置數(shù)據(jù)集tourism...

curried 2019-08-29 12:55 評論0 收藏0
FineReport如何操作離線點地圖

摘要：問題描述當用戶沒有網(wǎng)絡(luò)，使用點地圖時會發(fā)現(xiàn)圖層無法顯示，這時怎么辦呢解決方法可以用組合地圖的方式，將區(qū)域地圖作為底層數(shù)據(jù)為空，在其中添加點地圖進行展示。問題描述當用戶沒有網(wǎng)絡(luò)，使用點地圖時會發(fā)現(xiàn)gis圖層無法顯示，這時怎么辦呢？解決方法可以用組合地圖的方式，將區(qū)域地圖作為底層（數(shù)據(jù)為空），在其中添加點地圖進行展示。示例3.1 準備數(shù)據(jù) 新建工作薄，添加內(nèi)置數(shù)據(jù)集tourism...

zhichangterry 2019-08-01 17:09 評論0 收藏0
如何自定義谷歌地圖按鈕（縮放，全屏，地形圖，衛(wèi)星圖）的位置

摘要：默認情況下，谷歌地圖會在地圖的左上角排放地圖類型按鈕，比如衛(wèi)星圖，地形圖。在方法中生成一個谷歌地圖，在配置的時候?qū)⒃O(shè)置為。此時地圖上沒有任何控制按鈕，純粹就是一張地圖。谷歌地圖確實提供了支持。默認情況下，谷歌地圖會在地圖的左上角排放地圖類型按鈕，比如衛(wèi)星圖，地形圖。在右上角排放全屏按鈕，在右下角排放縮放按鈕。如下圖所示： showImg(https://segmentfault.co...

Lin_R 2019-08-26 10:11 評論0 收藏0