leaflet在線地圖進階寶典之——高級輔助特性

本文跟大家分享leaflet在線地圖的高級附加屬性，這些屬性通常來講僅僅作為我們數據額可視化項目的修飾元素，而並不會影響數據元素。

但是有了這些輔助修飾元素，往往可以使你的數據可視化項目變得更具人性化。

本文內容根據leaflet的官方主頁（R語言介面）翻譯而來：

附加屬性：

測度工具：Leaflet Measure

###增加該工具可以輕而易舉的讓你在可視化地圖中通過滑鼠打點，測量兩點之間的距離，如果是閉合區域，則可以直接計算閉合區域的真實面積。

網格線：Graticule

### 網格線可以提供平面坐標系下地理空間的經緯度位置參考線。

晝夜分界線：Terminator (day/night indicator)

###晝夜分界線可以提供一天中不同地區的晝夜分界狀況。

mini小地圖：Minimap

mini窗口小地圖可以提供定位窗口，讓你知道主版面中位置在更大範圍地理區域上的大致方位，就相當於遊戲中的mini導航圖。

輔助按鈕：EasyButton

輔助按鈕可以提供一鍵初始化比例尺，一鍵定位功能。

自定義js屬性：Custom JavaScript with htmlwidgets::onRender

你可以利用leaflet與HTML的介面工具對地圖版面進行更加豐富的屬性設置。

測度工具：Leaflet Measure

library(leaflet)nm<-leaflet()%>%addTiles()nm %>%fitBounds(-73.9,40.75,-73.95,40.8) %>%addMeasure()n

右上側的小彈窗打開之後選擇創建測距選項，就可以通過滑鼠打點兒，測量兩點之間的地理距離，如果是三個以上的點，則會測量出閉合多邊形區域的面積。

m %>%n fitBounds(13.76134, 52.675499, 13.0884, 52.33812) %>% #設定版面呈現的地理區域範圍n addMeasure(n position = "bottomleft", #測距菜單位置n primaryLengthUnit = "meters", #測量的點距離輸出單位n primaryAreaUnit = "sqmeters", #測量的閉合多邊形區域面積輸出單位n activeColor = "#3D535D", #n completedColor = "#7D4479")n

網格線：Graticule

leaflet() %>% addTiles() %>% setView(0,0,2) %>% addGraticule()n

leaflet() %>% addTiles() %>% setView(0,0,2) %>% naddGraticule(interval = 10, style = list(color = "#FF0000", weight = 1))n

而且網格線系統是可控元素，控制方式就是將其當成一個單獨的圖層，然後分組。

leaflet() %>% addTiles() %>% setView(0,0,2) %>%n addGraticule(group = "Graticule") %>%n addLayersControl(overlayGroups = c("Graticule"),options=layersControlOptions(collapsed = FALSE))n

晝夜分界線：Terminator (day/night indicator)

leaflet() %>% addTiles() %>% addTerminator()n

晝夜分界線支持自定義日期和分組功能：

leaflet() %>%n addTiles() %>%n addTerminator(n resolution=10,n time = "2013-06-20T21:00:00Z",n group = "daylight") %>%n addLayersControl(n overlayGroups = "daylight",n options = layersControlOptions(collapsed = FALSE))n

mini導航地圖：Minimap

leaflet() %>% setView(0,0,3) %>%n addProviderTiles(providers$Esri.WorldStreetMap) %>%n addMiniMap()n

mini導航地圖中的地圖背景也是支持自定義的：

leaflet() %>% setView(0,0,3) %>%n addProviderTiles(providers$Esri.WorldStreetMap) %>%n addMiniMap(tiles = providers$Esri.WorldStreetMap,toggleDisplay = TRUE)n

輔助工具菜單：

library(htmltools)nlibrary(htmlwidgets)nleaflet() %>% addTiles() %>%n addEasyButton(easyButton( #添加一鍵恢復初始窗口比利時n icon="fa-globe", title="Zoom to Level 1",n onClick=JS("function(btn, map){ map.setZoom(1); }"))) %>%n addEasyButton(easyButton( #添加一鍵定位功能（根據你的所在位置）n icon="fa-crosshairs", title="Locate Me",n onClick=JS("function(btn, map){ map.locate({setView: true}); }")))n

以下代碼展示了如何通過調用js工具控制項來通過打開菜單工具開啟地圖上的點聚合功能，同時關閉菜單工具按鈕，關閉點聚合功能。

leaflet() %>% addTiles() %>%n addMarkers(data=quakes,n clusterOptions = markerClusterOptions(),n clusterId = "quakesCluster") %>%n addEasyButton(easyButton(n states = list(n easyButtonState( #狀態1：打開菜單，開啟點聚合n stateName="unfrozen-markers",n icon="ion-toggle",n title="Freeze Clusters",n onClick = JS("n function(btn,map) {n var clusterManager =n map.layerManager.getLayer(cluster, quakesCluster);n clusterManager.freezeAtZoom();n btn.state(frozen-markers);n }")n ),n easyButtonState( #狀態2：關閉菜單，結束點聚合功能n stateName="frozen-markers",n icon="ion-toggle-filled",n title="UnFreeze Clusters",n onClick = JS("n function(btn, map) {n var clusterManager =n map.layerManager.getLayer(cluster, quakesCluster);n clusterManager.unfreeze();n btn.state(unfrozen-markers);n }")n )n )n ))n

自定義js屬性：Custom JavaScript with htmlwidgets::onRender

基礎圖層會根據導航窗內的圖層風格改變而隨之轉換：

mymap<-leaflet() %>% setView(0,0,3)nesri <- grep("^Esri", providers, value = TRUE)n

for (provider in esri) {

mymap %>%n addLayersControl(baseGroups = names(esri),n options = layersControlOptions(collapsed = FALSE)) %>%n addMiniMap(tiles = esri[[1]], toggleDisplay = TRUE,n position = "bottomleft") %>%n htmlwidgets::onRender("n function(el, x) {n var myMap = this;n myMap.on(baselayerchange,n function (e) {n myMap.minimap.changeLayer(L.tileLayer.provider(e.name));n })n }")n

聯繫方式：

微信：ljty1991

博客主頁：raindus home

個人公眾號：數據小魔方（datamofang）

團隊公眾號：EasyCharts

qq交流群：[魔方學院]553270834