本文针对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<sup>2</sup>",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<sup>2</sup>", 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")