leaflet在线地图进阶宝典——高级交互特性

本文针对leaflet的高级交互特性进行展开，主要涉及到leaflet中等值线地图的鼠标悬浮效果及点击效果的动态呈现。这也是leaflet的天然HTML属性所具有的强大优势。

在制作高质量在线数据地图的项目中，leaflet结合扩展的HTML性能，可以呈现非常人性化的动态效果，如能结合css、shiny等装饰器和交互框架，几乎可以胜任常见的动态交互网站的制作。

library("sp") library("leaflet")

options(stringsAsFactors = FALSE,check.names = FALSE)

锁定目录：

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

导入美国地图素材（含数据）

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

一个简单的开始：（引用mapbox地图）

m <- leaflet(states) %>% setView(-96, 37.8, 4) %>% #设置呈现的视觉中心 addProviderTiles("MapBox", options = providerTileOptions( id = "mapbox.light", #添加地图图层 accessToken = Sys.getenv('MAPBOX_ACCESS_TOKEN'))) m %>% addPolygons() #地图呈现

#分箱及设置色盘：

bins <- c(0, 10, 20, 50, 100, 200, 500, 1000, Inf) pal <- colorBin("YlOrRd", domain = states$density, bins = bins)

m %>% addPolygons( fillColor = ~pal(density), #显式声明颜色映射变量 weight = 2, #线宽 opacity = 1, #透明度 color = "white", #颜色 dashArray = "3", fillOpacity = 0.7) #填充透明度

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

#设置鼠标点击事件：

labels <- sprintf("<strong>%s</strong><br/>%g people / mi²",states$name,states$density) %>% lapply(htmltools::HTML) #转化为HTML格式标签

m <-m %>% addPolygons( fillColor = ~pal(density), weight = 2, opacity = 1, color = "white", dashArray = "3", fillOpacity = 0.7, highlight = highlightOptions( weight = 5, color = "#666", dashArray = "", fillOpacity = 0.7, bringToFront = TRUE ), label = labels, labelOptions = labelOptions( #标签选项设置（参数类别HTML属性） style=list("font-weight"="normal",padding="3px 8px"), textsize="15px", direction="auto") );m

#增加图例：

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

以下是该案例的完整代码：

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

（数据源，js格式记得保存为geojson格式）

bins <- c(0, 10, 20, 50, 100, 200, 500, 1000, Inf) pal <- colorBin("YlOrRd", domain = states$density, bins = bins)

labels <- sprintf( "<strong>%s</strong><br/>%g people / mi²", states$name, states$density ) %>% lapply(htmltools::HTML)

leaflet(states) %>% setView(-96, 37.8, 4) %>% addProviderTiles("MapBox", options = providerTileOptions( id = "mapbox.light", accessToken = Sys.getenv('MAPBOX_ACCESS_TOKEN'))) %>% addPolygons( fillColor = ~pal(density), weight = 2, opacity = 1, color = "white", dashArray = "3", fillOpacity = 0.7, highlight = highlightOptions( weight = 5, color = "#666", dashArray = "", fillOpacity = 0.7, bringToFront = TRUE), label = labels, labelOptions = labelOptions( style = list("font-weight" = "normal", padding = "3px 8px"), textsize = "15px", direction = "auto")) %>% addLegend(pal = pal, values = ~density, opacity = 0.7, title = NULL, position = "bottomright")