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

浏览: 1829

本文针对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()   #地图呈现

image.png

#分箱及设置色盘:

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)             #填充透明度

image.png

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

image.png

#设置鼠标点击事件:

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

image.png

#增加图例:

m %>% addLegend(pal = pal, values = ~density, opacity = 0.7, title = NULL,

  position = "bottomright")

image.png

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

# 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")

欢迎关注魔方学院QQ群


推荐 0
本文由 EasyCharts 创作,采用 知识共享署名-相同方式共享 3.0 中国大陆许可协议 进行许可。
转载、引用前需联系作者,并署名作者且注明文章出处。
本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台,并不用于任何商业目的,如果有任何问题,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

0 个评论

要回复文章请先登录注册