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

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

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

加载包：

library("sp")
library("leaflet")
options(stringsAsFactors = FALSE,check.names = FALSE)
#锁定目录：
setwd("D:/R/mapdata/State")

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

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

###案例1：
一个简单的开始：（引用mapbox地图）

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

案例2：

分箱及设置色盘：

1 2	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))

设置鼠标点击事件：

1	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

增加图例：

1 2	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")

联系方式：
wechat：ljty1991
Mail:578708965@qq.com
个人公众号：数据小魔方（datamofang）

qq交流群：[魔方学院]298236508

个人简介：
杜雨
财经专业研究僧；
伪数据可视化达人；
文科背景的编程小白；
喜欢研究商务图表与地理信息数据可视化，爱倒腾PowerBI、SAP DashBoard、Tableau、R ggplot2、Think-cell chart等诸如此类的数据可视化软件，创建并运营微信公众号“数据小魔方”。
Mail:578708965@qq.com