leaflet在線地圖進階寶典——高級交互特性

本文針對leaflet的高級交互特性進行展開，主要涉及到leaflet中等值線地圖的滑鼠懸浮效果及點擊效果的動態呈現。這也是leaflet的天然HTML屬性所具有的強大優勢。

在製作高質量在線數據地圖的項目中，leaflet結合擴展的HTML性能，可以呈現非常人性化的動態效果，如能結合css、shiny等裝飾器和交互框架，幾乎可以勝任常見的動態交互網站的製作。

library("sp")nlibrary("leaflet")noptions(stringsAsFactors = FALSE,check.names = FALSE)n

鎖定目錄：

setwd("D:/R/mapdata/State")n

導入美國地圖素材（含數據）

states<-geojsonio::geojson_read("us-states.geojson", what = "sp")n

一個簡單的開始：（引用mapbox地圖）

m <- leaflet(states) %>%n setView(-96, 37.8, 4) %>% #設置呈現的視覺中心n addProviderTiles("MapBox", options = providerTileOptions(n id = "mapbox.light", #添加地圖圖層n accessToken = Sys.getenv(MAPBOX_ACCESS_TOKEN)))nm %>% addPolygons() #地圖呈現n

#分箱及設置色盤：

bins <- c(0, 10, 20, 50, 100, 200, 500, 1000, Inf)npal <- colorBin("YlOrRd", domain = states$density, bins = bins)nm %>% addPolygons(n fillColor = ~pal(density), #顯式聲明顏色映射變數n weight = 2, #線寬n opacity = 1, #透明度n color = "white", #顏色n dashArray = "3",n fillOpacity = 0.7) #填充透明度n

m %>% addPolygons(n fillColor = ~pal(density),n weight = 2,n opacity = 1,n color = "white",n dashArray = "3",n fillOpacity = 0.7,n highlight = highlightOptions( #設置高亮屬性n weight = 5,n color = "#666",n dashArray = "",n fillOpacity = 0.7,n bringToFront = TRUE))n

#設置滑鼠點擊事件：

labels <- sprintf("<strong>%s</strong><br/>%g people / mi<sup>2</sup>",states$name,states$density) %>% lapply(htmltools::HTML) #轉化為HTML格式標籤n

m <-m %>% addPolygons(n fillColor = ~pal(density),n weight = 2,n opacity = 1,n color = "white",n dashArray = "3",n fillOpacity = 0.7,n highlight = highlightOptions(n weight = 5,n color = "#666",n dashArray = "",n fillOpacity = 0.7,n bringToFront = TRUEn ),n label = labels,n labelOptions = labelOptions( #標籤選項設置（參數類別HTML屬性）n stylex=list("font-weight"="normal",padding="3px 8px"),n textsize="15px",n direction="auto")n );mn

#增加圖例：

m %>% addLegend(pal = pal, values = ~density, opacity = 0.7, title = NULL,n position = "bottomright")n

以下是該案例的完整代碼：

# From http://leafletjs.com/examples/choropleth/us-states.jsn

（數據源，js格式記得保存為geojson格式）

bins <- c(0, 10, 20, 50, 100, 200, 500, 1000, Inf)npal <- colorBin("YlOrRd", domain = states$density, bins = bins)nnlabels <- sprintf(n "<strong>%s</strong><br/>%g people / mi<sup>2</sup>",n states$name, states$densityn) %>% lapply(htmltools::HTML)nnleaflet(states) %>%n setView(-96, 37.8, 4) %>%n addProviderTiles("MapBox", options = providerTileOptions(n id = "mapbox.light",n accessToken = Sys.getenv(MAPBOX_ACCESS_TOKEN))) %>%n addPolygons(n fillColor = ~pal(density),n weight = 2,n opacity = 1,n color = "white",n dashArray = "3",n fillOpacity = 0.7,n highlight = highlightOptions(n weight = 5,n color = "#666",n dashArray = "",n fillOpacity = 0.7,n bringToFront = TRUE),n label = labels,n labelOptions = labelOptions(n style = list("font-weight" = "normal", padding = "3px 8px"),n textsize = "15px",n direction = "auto")) %>%n addLegend(pal = pal, valuesn

= ~density, opacity = 0.7, title = NULL,n position = "bottomright")n

聯繫方式：

微信：ljty1991

博客主頁：raindus home

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

團隊公眾號：EasyCharts

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