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

})

}")

本文由EasyCharts 创作，采用 知识共享署名-相同方式共享 3.0 中国大陆许可协议 进行许可。

转载、引用前需联系作者，并署名作者且注明文章出处。

本站文章版权归原作者及原出处所有 。内容为作者个人观点， 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台，并不用于任何商业目的，如果有任何问题，请及时联系我们，我们将根据著作权人的要求，立即更正或者删除有关内容。本站拥有对此声明的最终解释权。