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

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

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

动态效果:

视频内容

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

网格线:Graticule

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

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

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

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

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

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

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

leaflet() %>% addTiles() %>% addTerminator( resolution=10, time = "2013-06-20T21:00:00Z", group = "daylight") %>% addLayersControl( overlayGroups = "daylight", options = layersControlOptions(collapsed = FALSE))

mini导航地图:Minimap

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

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

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

辅助工具菜单:

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}); }")))

动态效果:

视频内容

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

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

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

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)); }) }")

原文发布于微信公众号 - 数据小魔方(datamofang)

原文发表时间:2017-06-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏何俊林

今日力推: Android 高仿哔哩哔哩动画客户端 / Android MD版的花瓣网App

一、CardSwipeLayout 仿探探卡片滑动效果的布局 ? 链接: http://pan.baidu.com/s/1qYApDfQ 密码: fz3q 二、...

3909
来自专栏数据结构与算法

菜鸡博客开……开……开源了!

因为很多人找我要过博皮源码,所以本宝宝经过深思熟虑,最终决定把自己的源码分享给大家!

1614
来自专栏数据小魔方

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

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

4226
来自专栏菩提树下的杨过

ExtJs学习笔记(7)_获取GridPanel选中行的详细信息

这一节,我们将学习如何获取Grid当前选中行的信息 1.xml数据源内容: <?xml version="1.0" encoding="UTF-8"?> <D...

22410
来自专栏向治洪

深入理解Android渲染机制

基础知识 CPU: 中央处理器,它集成了运算,缓冲,控制等单元,包括绘图功能.CPU将对象处理为多维图形,纹理(Bitmaps、Drawables等都是一起打包...

4236
来自专栏性能与架构

Web前端开发技术栈

前端领域的发展非常迅猛,大前端的时代到来了,据说每隔12-24个月,前端的难度将增加一倍,从下面的技术栈就可以看出前端领域的丰富度和复杂度 核心概念 HTML ...

4579
来自专栏PPV课数据科学社区

【学习】七天搞定SAS(四):数据输出

弄清楚了基本的PROC之后,开始研究SAS的输出...毕竟有了数据处理的结果之后,还要有一个比较舒服的输出格式才可以嘛。 SAS的结果发送系统:ODS SAS里...

3858
来自专栏python爬虫实战之路

极验验证码破解之selenium

这一篇写完很久了,因为识别率一直很低,没办法拿出来见大家,所以一直隐藏着,今天终于可以拿出来见见阳光了。

2354
来自专栏老司机的简书

老司机带你走进Core Animation 之几种动画的简单应用

之所以要写这几种简单应用呢,是为了帮大家扩展一下思维,基于CAAnimation和CADisplayLink其实我们可以做到很多事情,不过我们都还是需要一个思路...

1182
来自专栏24K纯开源

用Qt写软件系列五:一个安全防护软件的制作(1)

引言       又有许久没有更新了。Qt,我心爱的Qt,为了找工作不得不抛弃一段时间,业余时间来学一学了。本来计划要写一系列关于Qt组件美化的博文,但是写了几...

2317

扫码关注云+社区

领取腾讯云代金券