leaflet在线地图进阶宝典之——高级辅助特性

本文跟大家分享leaflet在线地图的高级附加属性,这些属性通常来讲仅仅作为我们数据额可视化项目的修饰元素,而并不会影响数据元素。

但是有了这些辅助修饰元素,往往可以使你的数据可视化项目变得更具人性化。

本文内容根据leaflet的官方主页(R语言接口)翻译而来:

附加属性:

  • 测度工具:Leaflet Measure

    增加该工具可以轻而易举的让你在可视化地图中通过鼠标打点,测量两点之间的距离,如果是闭合区域,则可以直接计算闭合区域的真实面积。

  • 网格线:Graticule

    网格线可以提供平面坐标系下地理空间的经纬度位置参考线。

  • 昼夜分界线:Terminator (day/night indicator)

    昼夜分界线可以提供一天中不同地区的昼夜分界状况。

  • mini小地图:Minimap

    mini窗口小地图可以提供定位窗口,让你知道主版面中位置在更大范围地理区域上的大致方位,就相当于游戏中的mini导航图。

  • 辅助按钮:EasyButton

    辅助按钮可以提供一键初始化比例尺,一键定位功能。

  • 自定义js属性:Custom JavaScript with htmlwidgets::onRender

    你可以利用leaflet与HTML的接口工具对地图版面进行更加丰富的属性设置。

测度工具:Leaflet Measure

1
2
3
library(leaflet)
m<-leaflet()%>%addTiles()
m %>%fitBounds(-73.9,40.75,-73.95,40.8) %>%addMeasure()

右上侧的小弹窗打开之后选择创建测距选项,就可以通过鼠标打点儿,测量两点之间的地理距离,如果是三个以上的点,则会测量出闭合多边形区域的面积。

动态效果:

1
2
3
4
5
6
7
8
m %>%
fitBounds(13.76134, 52.675499, 13.0884, 52.33812) %>% #设定版面呈现的地理区域范围
addMeasure(
position = "bottomleft", #测距菜单位置
primaryLengthUnit = "meters", #测量的点距离输出单位
primaryAreaUnit = "sqmeters", #测量的闭合多边形区域面积输出单位
activeColor = "#3D535D", #
completedColor = "#7D4479")

网格线:Graticule

1
leaflet() %>% addTiles() %>% setView(0,0,2) %>% addGraticule()

1
2
leaflet() %>% addTiles() %>% setView(0,0,2) %>%
addGraticule(interval = 10, style = list(color = "#FF0000", weight = 1))

而且网格线系统是可控元素,控制方式就是将其当成一个单独的图层,然后分组。

1
2
3
leaflet() %>% addTiles() %>% setView(0,0,2) %>%
addGraticule(group = "Graticule") %>%
addLayersControl(overlayGroups = c("Graticule"),options=layersControlOptions(collapsed = FALSE))


昼夜分界线:Terminator (day/night indicator)

1
leaflet() %>% addTiles() %>% addTerminator()

昼夜分界线支持自定义日期和分组功能:

1
2
3
4
5
6
7
8
9
leaflet() %>%
addTiles() %>%
addTerminator(
resolution=10,
time = "2013-06-20T21:00:00Z",
group = "daylight") %>%
addLayersControl(
overlayGroups = "daylight",
options = layersControlOptions(collapsed = FALSE))

mini导航地图:Minimap

1
2
3
leaflet() %>% setView(0,0,3) %>%
addProviderTiles(providers$Esri.WorldStreetMap) %>%
addMiniMap()

mini导航地图中的地图背景也是支持自定义的:

1
2
3
leaflet() %>% setView(0,0,3) %>%
addProviderTiles(providers$Esri.WorldStreetMap) %>%
addMiniMap(tiles = providers$Esri.WorldStreetMap,toggleDisplay = TRUE)

视频演示:

辅助工具菜单:

1
2
3
4
5
6
7
8
9
library(htmltools)
library(htmlwidgets)
leaflet() %>% addTiles() %>%
addEasyButton(easyButton( #添加一键恢复初始窗口比利时
icon="fa-globe", title="Zoom to Level 1",
onClick=JS("function(btn, map){ map.setZoom(1); }"))) %>%
addEasyButton(easyButton( #添加一键定位功能(根据你的所在位置)
icon="fa-crosshairs", title="Locate Me",
onClick=JS("function(btn, map){ map.locate({setView: true}); }")))

动态效果:

辅助按钮:EasyButton

以下代码展示了如何通过调用js工具控件来通过打开菜单工具开启地图上的点聚合功能,同时关闭菜单工具按钮,关闭点聚合功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
leaflet() %>% addTiles() %>%
addMarkers(data=quakes,
clusterOptions = markerClusterOptions(),
clusterId = "quakesCluster") %>%
addEasyButton(easyButton(
states = list(
easyButtonState( #状态1:打开菜单,开启点聚合
stateName="unfrozen-markers",
icon="ion-toggle",
title="Freeze Clusters",
onClick = JS("
function(btn,map) {
var clusterManager =
map.layerManager.getLayer('cluster', 'quakesCluster');
clusterManager.freezeAtZoom();
btn.state('frozen-markers');
}")
),
easyButtonState( #状态2:关闭菜单,结束点聚合功能
stateName="frozen-markers",
icon="ion-toggle-filled",
title="UnFreeze Clusters",
onClick = JS("
function(btn, map) {
var clusterManager =
map.layerManager.getLayer('cluster', 'quakesCluster');
clusterManager.unfreeze();
btn.state('unfrozen-markers');
}")
)
)
))

动态效果:

自定义js属性:Custom JavaScript with htmlwidgets::onRender

基础图层会根据导航窗内的图层风格改变而随之转换:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
mymap<-leaflet() %>% setView(0,0,3)
esri <- grep("^Esri", providers, value = TRUE)
for (provider in esri) {
mymap <-mymap %>% addProviderTiles(provider, group = provider)
}
mymap %>%
addLayersControl(baseGroups = names(esri),
options = layersControlOptions(collapsed = FALSE)) %>%
addMiniMap(tiles = esri[[1]], toggleDisplay = TRUE,
position = "bottomleft") %>%
htmlwidgets::onRender("
function(el, x) {
var myMap = this;
myMap.on('baselayerchange',
function (e) {
myMap.minimap.changeLayer(L.tileLayer.provider(e.name));
})
}")

动态效果:


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

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

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


备注信息:
知识共享许可协议
本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。

坚持原创技术分享,您的支持将鼓励我继续创作!