R+大地图时代︱ leaflet/leafletCN 动态、交互式绘制地图（遍地代码图）-爱编程
R+大地图时代︱ leaflet/leafletCN 动态、交互式绘制地图（遍地代码图）
好久没有学习R的新包了，甚是想念啊！
昨天、今天看到两个极好、不得不学的packages+早上被AWS的服务器整得郁闷ing…于是就来点颜色看看~
本篇受Lchiffon老师的github启发，对两个packages进行简单的试玩。leaflet是一个国外动态交互图做得很棒的网站，Lchiffon老师对其进行一些封装，适应了“中国国情”，那就让我们先来看看Lchiffon的leafletCN。
一、leafletCN
本节主要“抄袭”Lchiffon的blog、github，对简单封装的函数进行简述。leafletCN封装了之后，函数并不多，但是实打实的好用。
超详细版PPT：
1、安装与函数简述
install.packages("leafletCN")
devtools::install_github("lchiffon/leafletCN")
主函数介绍：
regionNames：找地名函数，极其方便
demomap：有地名就给你输出一个交互、动态的区域图，真方便
geojsonMap：作用是分区块标色
辅助函数介绍：
amap ()：中国国情，高德地图的象征
read.geoShape：可以将geojson的对象,保存成spdataframe,以方便leaflet调用
leafletGeo：地图+小显示框，用地图名以及一个数据框创建一个sp的对象
2、主函数介绍
（1）regionNames函数
#主函数——regionNames：找地名函数
regionNames("浙江")
regionNames("浙江省")
regionNames("杭州")
regionNames("杭州市")
regionNames()
regionNames的粒度是省级、县级，在细分就没有了。执行regionNames()之后，可以知道包里面存着哪些地方，是否有你要的内容。
（2）主函数——demomap：区域式地图
install.packages("rgeos")
demomap("杭州")
交互式界面，可以拖拽。
（3）主函数——geojsonmap：地图标色函数
#主函数——geojsonmap：地图标色函数
dat = data.frame(name = regionNames("china"),
value = runif(34))
geojsonMap(dat,"china")
输入数据的长这样，好简单！！
regionNames..china..
新疆维吾尔自治区 0.
西藏自治区 0.
内蒙古自治区 0.
黑龙江省 0.
3、辅助函数
（1）辅助函数——amap：高德地图底图
leaflet() %&%
当然了，这么执行只有一个白板地图，并不是实体的。
（2）辅助函数——read.geoShape：genjson格式转化
if(require(sp)){
filePath = system.file("geojson/china.json",package = "leafletCN")
map = read.geoShape(filePath)
读入了china.json格式的内容。
（3）辅助函数——leafletGeo：地图+小显示框
把一个数据框和一个地图组合在一起, 方便用leaflet调用, 其中名字的 变量为name, 数值的变量为value
4、leafletCN 两个案例
案例在Lchiffon的博客基础上进行简单改编，以便对其中的函数进行简单说明。
（1）单点标注：地图+标点
leaflet() %&%
amap() %&%
addMarkers(lng=121.48, lat=31.22, popup="企业天地")
# 经度：lng
# 维度：lat
#popup：点的名称
第一、第二行调用高德地图底图，addMarkers为leaflet的标点函数，其中经纬度你可以自己上网查一下，这里简单百度了一下我的公司位置。
（2）多点标注：地图+标点+带icoon
iconList = awesomeIconList(
"home" = makeAwesomeIcon(icon = "home",markerColor = "skyblue"),
"weixin" = makeAwesomeIcon(icon = "cutlery",markerColor = "red"),
"bank" = makeAwesomeIcon(icon = "plus-sign",markerColor = "orange"),
"automobile" = makeAwesomeIcon(icon = "trash",markerColor = "purple"),
"coffee" = makeAwesomeIcon(icon = "book")
geo = data.frame(lon = rep(121.44, 5),
lat = rep(31.22, 5),
city = rep("Shanghai", 5))
geo$lon = geo$lon+rnorm(5,0,0.003)
geo$lat = geo$lat+rnorm(5,0,0.003)
geo$type = c("home",
"automobile",
"coffee" )
leaflet(geo) %&% amap() %&%
addMiniMap() %&%
addAwesomeMarkers(icon = ~iconList[type])
awesomeIconList是小框框定义的一个函数；
geo 是坐标点的经纬度，geo$type是坐标点的属性；
leaflet(geo) ，放入数据； amap()，调出高德地图； addMiniMap() ，看到右下角的小显示框了没？； addAwesomeMarkers(icon = ~iconList[type])加入坐标点+坐标的icon
- （3）地图+分区域显示+色彩
if(require(leaflet)){
region=regionNames("浙江")
dat = data.frame(region,runif(length(region)))
map = leafletGeo("浙江", dat)
pal &- colorNumeric(
palette = "Blues",
domain = map$value)
leaflet(map) %&% amap() %&%
addPolygons(stroke = TRUE,
smoothFactor = 1,
fillOpacity = 0.7,
weight = 1,
color = ~pal(value),
popup = ~htmltools::htmlEscape(popup)
addLegend("bottomright", pal = pal, values = ~value,
title = "legendTitle",
labFormat = leaflet::labelFormat(prefix = ""),
opacity = 1)
map 阶段，是导入数据，当然这里你也可以导入省级、县级，这里我导入的是浙江省。
addPolygons为加入边界；addLegend加入右下角的程度显示框。
二、leaflet
来到了更牛X的leaflet包了，那么leafletCN的函数都继承，因为有太多函数+应用，我这边只是简单列举+试玩一些。直接上案例，不介绍简单函数啦~
leaflet官网：
详细R文档：
github地址：
1、说说底图
leaflet 的地图太多了，不过大多以全世界、美国的视角，简单列举几个：
leaflet() %&% addTiles() #openStreetMap 正常的世界地图
leaflet() %&% amap()
# 高德(leafletCN)
leaflet() %&% addProviderTiles("Thunderforest.SpinalMap")# 暗黑火焰风格
leaflet() %&% addProviderTiles("Esri.WorldImagery")# 卫星地图
leaflet() %&% addProviderTiles("OpenTopoMap")
#带海拔的地图
leaflet() %&% addProviderTiles("NASAGIBS.ViirsEarthAtNight2012")
leaflet() %&% addProviderTiles("Stamen.Toner")
有很多，可以到这个网址（）去找，网址最右边有底图的名称，挑一个你喜欢的就行。
2、案例一——世界地图+多标记+标记显示数字
data(quakes)
# Show first 20 rows from the `quakes` dataset
leaflet(data = quakes[1:20,]) %&% addTiles() %&%
addMarkers(~long, ~lat, popup = ~as.character(mag), label = ~as.character(mag))
quakes是packages自带的数据，数据长这样：
long depth mag stations
-20.42 181.62
-20.62 181.03
-26.00 184.10
-17.97 181.66
leaflet(data = quakes[1:20,]) ，显示quakes数据集的前20个；
addTiles() ，世界地图底纹；
addMarkers(~long, ~lat, popup = ~as.character(mag), label = ~as.character(mag))中，
~long, ~lat分别代表经度、维度；popup、label 从图中可以看到，那个数字6.1有两种显示方式，一个是标签式、一个是弹窗。
3、案例二——世界地图+多标记+图案标记
对图案标记没有抵抗力，觉得很萌，所以对这块倒是研究了一下。本节案例来源：《》
图像icon下载网站：
geo = data.frame(long = rep(121.44, 1000),
lat = rep(31.22, 1000),
mag=rep(5,1000))
geo$long = geo$long+rnorm(1000,0,0.1)
geo$lat = geo$lat+rnorm(1000,0,0.1)
geo$mag = geo$mag+rnorm(1000,0,1)
quakes1 &- geo[1:10,]
#数据生成阶段，数据长这样
121.2867 31.29484 4.604269
121.3998 31.03906 4.946211
121.5652 31.33814 3.646438
121.3395 31.25626 5.845534
#图标标记阶段
leafIcons &- icons(
iconUrl = ifelse(quakes1$mag & 4.6,
"/examples/custom-icons/leaf-green.png",
ifelse(quakes1$mag & 6,"/examples/custom-icons/leaf-red.png",
"/examples/custom-icons/leaf-orange.png")
iconWidth = 38, iconHeight = 95,
iconAnchorX = 22, iconAnchorY = 94,
shadowUrl = "/examples/custom-icons/leaf-shadow.png",
shadowWidth = 50, shadowHeight = 64,
shadowAnchorX = 4, shadowAnchorY = 62
leaflet(data = quakes1) %&% amap() %&%
addMarkers(~long, ~lat, icon = leafIcons)
分为数据生成、图标标记阶段、地图生成阶段。
小叶子，来自于网络，所以直接输入图片链接即可，iconUrl 是三种颜色的小树，其中shadowUrl 是小树苗的阴影，感觉很赞，iconWidth、shadowWidth 等 其他是一些大小指标。
leaflet(数据) %&% amap(高德地图) %&% addMarkers(经纬度+图标)
4、案例三——地图+点集区域+复选框+NASA星空图
geo = data.frame(long = rep(121.44, 1000),
lat = rep(31.22, 1000),
mag=rep(5,1000))
#mag函数是用来衡量后面，点集范围大小
geo$long = geo$long+rnorm(1000,0,1)
geo$lat = geo$lat+rnorm(1000,0,1)
geo$mag = geo$mag+rnorm(1000,0,1)
outline &- geo[chull(geo$long, geo$lat),]
map &- leaflet(geo) %&%
# 底层阶段
# 第一层底图，高德
amap(group = "高德") %&%
# 第二层底图，黑底图NASA
addProviderTiles(providers$NASAGIBS.ViirsEarthAtNight2012, group = "黑底") %&%
# 第三层底图，白底层
addProviderTiles(providers$Stamen.TonerLite, group = "白底") %&%
# 点集+区域轮廓阶段
addCircles(~long, ~lat, ~7^mag/50, stroke = F, group = "圈点",color="#97FFFF") %&%
# 描点画圈，stroke=T的话，边界包边，丑
# 绘制轮廓，利用前面的凸集点
addPolygons(data = outline, lng = ~long, lat = ~lat,
fill = F, weight = 2, color = "#FFFFCC", group = "轮廓") %&%
addLayersControl(
baseGroups = c("高德", "黑底", "白底"),
overlayGroups = c("圈点", "轮廓"),
options = layersControlOptions(collapsed = FALSE)
outline 是数据生成阶段，数据长这样：
308 124.0785 30.32667 5.294831
885 124.0496 30.20941 3.524118
amap和addProviderTiles的两个，都是底图样式（其他底图可见：），其中的group是自定义的名称，可以自己命名。
点集+区域轮廓阶段
addCircles是描绘点的，long,lat是经度、维度，stroke是点是否包边，为true很丑；group是自定义的名称，color是圈圈的颜色，
addPolygons是描绘外围的轮廓的，数据outline是通过求凸集函数chunk求得，lng和lat分别是经度维度。
复选框阶段
addLayersControl加入控件组，baseGroups 是右上角的一个框，overlayGroups 是下面的数字框
延伸：chull凸集函数
其中要说一下chull求凸集函数：
X &- matrix(stats::rnorm(2000), ncol = 2)
hpts &- chull(X)
hpts &- c(hpts, hpts[1])
lines(X[hpts, ])
chull可以实现，在点集中求得凸点，然后用lines进行框选。
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。一.Leaflet简介
官方网站：
官网上的api和例子大家多看看，多学习学习。
Lefalet 是一个为建设移动设备友好的互动地图，而开发的现代的、开源的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发，虽然代码仅有 31 KB，但它具有开发人员开发在线地图的大部分功能。
Lefalet 设计坚持简便、高性能和可用性好的思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。
国外有个MapBox.js也加入了Leaflet的特性和功能，所以有时也可以参考下，MapBox的的文档和例子。
小功能效果：
移动和放缩
// disable drag and zoom handlers
//禁止移动和放大缩小
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
// disable tap handler, if present.
//禁止单击
if (map.tap) map.tap.disable();
var popup = new L.popup();
function onMapClick(e) {
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
map.on('click', onMapClick);
添加zoom控制，在右下角
var zoomControl = L.control.zoom({
position: 'bottomright'
map.addControl(zoomControl);
添加比例尺
L.control.scale().addTo(map);
瓦片图层加载
L.tileLayer('/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',{
maxZoom: 18,
reuseTiles: true
}).addTo(map);
添加底图(esri-leaflet插件)
&需要引入esri-leaflet.js
百度盘下载：
L.esri.basemapLayer("Streets").addTo(map);//此行可行
//ArcGIS Server Dynamic Map Service, Historic Hurricane Tracks
dynLayer = L.esri.dynamicMapLayer(kaifaqu, {
opacity: 1,
layers: [0, 1]
map.setView([30.60, 119.65], 9); //浙江
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
map.on('locationfound', onLocationFound);
添加shapefile
需要引入shapefile.js
百度盘（shp.min.js下载后引入即可）：
1 //添加shapefile
2 function addShapeFile() {
map.setView([34.72, 18.6328125], 2);
var geo = L.geoJson({
features: []
onEachFeature: function popUp(f, l) {
var out = [];
if (f.properties) {
for (var key in f.properties) {
out.push(key + ": " + f.properties[key]);
l.bindPopup(out.join("&br /&"));
})//.addTo(map);
//保存到 图层数组
map_layers.push(geo);
//此处指向shapefile的zip文件即可
var base = 'files/bou1_4m.zip';
shp(base).then(function(data) {
geo.addData(data);
&关键词：leaflet.js shapefile esri-leaflet
阅读(...) 评论()1542人阅读
Leaflet的好处就不多说了，简单的几点：轻量、支持HTML5、插件多，在与图形组件（如HT组件）结合后，可以开发出丰富的GIS应用，可以说几乎所有的GIS场景都能支持。
在使用GIS的时候，想必有个问题一直困扰开发者，就是我们的底图基本上都是有偏移的，如果使用GPS采集的资源（真实经纬度）叠加到底图上，与底图有很大的偏移，叠加不上。从测试上来说，高德的底图，偏差可达到20公里。
处理偏移问题，一般有两个思路：
第一个是将真实的经纬度按照偏移算法（一般底图供应商会提供）偏移到加密的地图上，从而达到叠加效果。这样的问题是相当于将错就错，如果从地图上去采集经纬度就是偏移的，最后还得纠偏回去。而纠偏又是一个大问题，几乎所有的底图供应商都不提供纠偏算法，单单这个问题，都可以再写一篇文章。
第二个是改造地图组件，将底图进行反向偏移，这样GPS采集的经纬度可以无缝的叠加上，在地图上采集的经纬度都是无需纠偏的。进行底图偏移的前提是，需要知道偏移量offset，如果是线性偏移，这个offset就是个常量，如果不是线性偏移，则这个offset是依赖于视窗中心点的变量。
笔者查看Leaflet的源码，其中并没有对偏移的处理方法，在阅读源码并经过反复测试后，获得了以下的思路：
1.在获取切片的时候，计算切片X,Y值的时候增加上偏移量;
var map = this._map,
bounds = map.getPixelBounds(),
sw = map.unproject(bounds.getBottomLeft()),&span style=&font-family: Arial, Helvetica, sans-&&//获取左下角经纬度&/span&
ne = map.unproject(bounds.getTopRight()),&span style=&font-family: Arial, Helvetica, sans-&&//获取右上角经纬度&/span&&span style=&font-family: Arial, Helvetica, sans-&& &/span&&span style=&font-family: Arial, Helvetica, sans-&&&span style=&white-space:pre&&
&/span&zoom = map.getZoom(),&/span&
tileSize = this._getTileSize();
if (zoom & this.options.maxZoom || zoom & this.options.minZoom) {
var offsetX = this._offsetX;//经度偏移量
var offsetY = this._offsetY;//纬度偏移量
if(offsetX != null
&& offsetY != null)
sw = new L.LatLng(sw.lat - parseFloat(offsetY),sw.lng - parseFloat(offsetX));//增加偏移量
ne = new L.LatLng(ne.lat - parseFloat(offsetY),ne.lng - parseFloat(offsetX));
var swPoint = map.project(sw);//将经纬度进行投影
&span style=&white-space:pre&& &/span&var nePoint = map.project(ne);
bounds = L.bounds(swPoint,nePoint);
2.在显示图片的时候，图片位置减去偏移量；
&span style=&white-space:pre&&
&/span&var offsetX = this._offsetX;
var offsetY = this._offsetY;
if(offsetX != null
&& offsetY != null)
var latLng = this._map.layerPointToLatLng(tilePos);
tilePos = this._map.latLngToLayerPoint(new L.LatLng(latLng.lat + parseFloat(offsetY),latLng.lng + parseFloat(offsetX)));
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：7387次
排名：千里之外
(5)(1)(1)(1)日—1.0leaflet,最快的,最稳定和严谨的leaflet,终于出来了!
leaflet是领先的开源JavaScript库为移动设备设计的互动地图。重33 KB的JS,所有映射大多数开发人员所需要的特性。
leaflet设计简单,性能和可用性。它有效地在所有主要的桌面和移动平台,可以扩展的插件,有一个美丽的,易于使用和证据确凿的API和一个简单的、易读的源代码,是一个快乐作出贡献。
让我们开始一个小实例：准备一个空白页
这里我们创建一个地图在地图的div,添加瓷砖的选择,然后添加一个标记,在弹出一些文本:
&地图在编写任何代码之前,您需要做以下页面上制备步骤:
包括leaflet CSS文件标题部分的文档:
&link rel="stylesheet" href="/leaflet@1.0.1/dist/leaflet.css" /&
　　（没有这个文件可以去下载，也可以自己引入,以下不再累述），;
包括传单JavaScript文件:
&script src="/leaflet@1.0.1/dist/leaflet.js"&&/script&
放一个div元素与特定的id,你想要你的地图:
&div id="mapid"&&/div&
　　（id名字可以随便设定，但是必须与下面js代码定义个一样。。）
确保定义的映射容器有一个高度,例如通过设置CSS（必须定义一个高度，因为无法获取指定的id名，因此这个库并没有进行高度的处理设置，自己必须设置高度，如同div默认是没有高度的一样）:
#mapid { height: 180 }
现在您已经准备好初始化地图,用它做一些东西。
让我们创建一个地图的中心北京某个地点漂亮Mapbox街道瓷砖。首先我们将初始化和设置它的视图映射到我们选择的地理坐标和缩放级别（里面的 &mapid &必须和设置的id保持一致）:
var mymap = L.map('mapid').setView([39.226], 14);
在默认情况下(我们没有通过任何选项创建地图实例)时,所有鼠标和触摸交互启用了在地图上,它有放大和归因控制。（这些都可以通过js来控制，目前只是入门，有深入了解的可以自己摸索）
注意setView调用返回地图对象——大多数leaflet方法这样的行为时不返回一个显式的值,它允许方便类jQuery方法控制。
接下来,我们将添加一个砖层来增加我们的地图,在这种情况下这是一个Mapbox街道砖层。创建一个砖层通常涉及瓷砖图像的模板设置URL(在Mapbox得到你),归因的文本和的最大缩放级别层:
L.tileLayer('https://api./v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data (C) &a href="http://openstreetmap.org"&OpenStreetMap&/a& contributors, &a href="http://creativecommons.org/licenses/by-sa/2.0/"&CC-BY-SA&/a&, Imagery (C) &a href=""&Mapbox&/a&',
maxZoom: 18,
id: 'your.mapbox.project.id',
accessToken: 'your.mapbox.public.access.token'
}).addTo(mymap);
　　确保所有的代码称为div和传单。js包含。就是这样!现在你有一个工作leaflet地图。
标记,圆圈和多边形
除了砖层,您可以轻松地向地图添加其他东西,包括标志、折线、多边形、圆和弹出窗口。让我们添加一个标记:
L.marker([39.226]).addTo(mymap)
.bindPopup("北京大厦&br&").openPopup();
添加一个圆是相同的(除了指定半径米作为第二个参数),但允许您控制看起来如何通过选择在创建对象时作为最后一个参数:
L.circle([39.625], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap).bindPopup("颐和园欢迎你");
添加一个多边形很简单:
L.polygon([
[39.9591],
[39.9676],
]).addTo(mymap).bindPopup("故宫");
弹出窗口时通常使用您想要一些信息附加到地图上的一个特定的对象。传单有非常方便的快捷方式（和上面添加的方式一样，直接添加或者，另行添加，实际是一样的 &openPopup是表示默认是否打开）:
marker.bindPopup("北京大厦").openPopup();
circle.bindPopup("颐和园");
polygon.bindPopup(故宫");
　试着点击我们的对象。bindPopup方法高度与指定的HTML内容弹出你的标记弹出出现当你点击对象,和openPopup方法(标记)立即打开弹出。
& &您还可以使用弹出窗口层(当你需要更多的东西比附加一个弹出一个对象):
var popup = L.popup()
.setLatLng([51.5, -0.09])
.setContent("I am a standalone popup.")
.openOn(mymap);
　　这里我们用openOn代替遭受因为它处理自动关闭之前打开弹出当打开一个新的良好的可用性。
每次发生在leaflet,比如用户点击地图上标记或缩放变化,相应的对象发送一个事件,你可以订阅功能。它允许您对用户交互（这里显示的是每次你点击位置的经纬度）:
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
mymap.on('click', onMapClick);
每个对象都有自己的一组事件,有关详细信息,请参阅文档。侦听器函数的第一个参数是一个事件对象,它包含有用的信息的事件发生。例如,地图点击事件对象(e在上面的示例中)latlng属性点击出现的位置。
让我们改善我们的例子中,使用一个弹出一个警告:
var popup = L.popup();
function onMapClick(e) {
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
mymap.on('click', onMapClick);
　　试着点击地图,你会看到一个弹出的坐标。
阅读(...) 评论()