Leaflet 笔记六：瓦片矢量渲染 - 简书
Leaflet 笔记六：瓦片矢量渲染
Leaflet 笔记六：瓦片矢量渲染
github源码在此，希望大家一起开发，记得点星:
结合，我们可以知道如今互联网地图逐渐走向一个方向就是Canvas。减少实现传统的栅格瓦片，SVG。而是用Canvas针对数据整体绘画。优点在于效率高，可以很轻地渲染上万个点，上万条线，上万个面，不卡顿，例子参考。所以说这是一个未来的方向。
随着leaflet进入1.0，它在一定程度下更多使用了Canvas，详情，让我们更好地享受大数据时代的快感。
针对海量的矢量数据，怎样才能高效渲染呢？
瓦片分片异步渲染Canvas是最最高效的一种体现。每一个256*256的格网当中，都存在一个Canvas，每个Canvas独立渲染。这依赖于Leaflet 0.7 中的L.TileLayer.Canvas或者是1.0中的L.GridLayer，所以该库分开两分支分别实现。
0.7 leaflet
leaflet1.0.0
1.0 leaflet
实现的方式依赖于，它可以帮我们把geojson分解为瓦片大小的线条，我们只需要通过瓦片编号x,y,z去索引对应的格网中的矢量数据。
var tile = tileIndex.getTile(zoom, tilePoint.x, tilePoint.y);
我扩展了L.TileLayer或L.GridLayer这个类，结合geojson-vt的数据，实现对应的绘画。该项目受到一个例子的启发。
首先，设置对应的参数，参数内容参考 和 。
var options = {
maxZoom: 16,
tolerance: 3,
fillColor: '#1EB300',
color: '#F2FF00',
var canvasLayer = L.tileLayer.canvas.geoJson(json, options).addTo(map);
图层设置好后，加入地图则完成瓦片矢量渲染。
随着异步功能的使用，效率较高。
每个格网间失去联系。实现交互功能变得不可能。
mapbox GL js使用的是整体一个canvas效率也极其高，与mapbox的设计背道而驰。
个人建议还是使用1.0的L.Canvas实现矢量渲染。
转载，请表明出处。
求职中 深圳 非诚勿扰 微信号brandonxiangleaflet本地加载arcgis切片&(转)
&& var origin = [-,
];//图层起点坐标
var resolutions = [
& &338681, //
& &16934, //
& &08467, //
& &042335, //
& &529.75 //
var crs = new L.Proj.CRS(
'+proj=cea +lon_0=0 +lat_ts=0 +x_0=0 +y_0=0 +datum=WGS84
+units=m +no_defs' , {
origin: &origin,
resolutions: resolutions
& var map = L.map('map',{
continuousWorld: true,
worldCopyJump: false
}).setView([23.38189], 0);
var tileLayer = new
L.TileLayer.TileLoad('http://localhost:8080/resources/china',
& & maxZoom: resolutions.length -
& & minZoom: 0,
& & continuousWorld: true
tileLayer.addTo(map);
L.TileLayer.TileLoad = L.TileLayer.extend({
initialize: function (url, options) {
options = L.setOptions(this, options);
this.url = url + "/Layers/_alllayers/{z}/{x}/{y}.png";
L.TileLayer.prototype.initialize.call(this, this.url,
L.TileLayer.prototype.getTileUrl = function(tilePoint) {
return L.Util.template(this._url, L.extend({
s: this._getSubdomain(tilePoint),
z: function() {
var value = tilePoint.z.toString(16);
return "L" + pad(value, 2);
x: function() {
var value = tilePoint.y.toString(16);
return "R" + pad(value, 8);
y: function() {
var value = tilePoint.x.toString(16);
return "C" + pad(value, 8);
L.tileLayer.tileLoad = function(url, options){
& return new L.TileLayer.TileLoad(url,
var pad = function(numStr, n) {
& & var len =
& & while(len & n)
& numStr = "0" + numS
& len++; &
& & return numS
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。esri-leaflet加载TileLayer的时候，有时候由于数据的原因，造成部分瓦片缺失的问题，网页加载TileLayer的时候，当地图范围正好拖动到缺失的范围的时候，会一直请求&/support/TechArticles/blank256.png,图片
解决方案有两个：
A.leaflet的解决方案，在初始化TileLayer的时候添加errorTileUrl，用来指定缺失的图片的代替图片：
new TileLayer('serverUrl', {
errorTileUrl:'./img/miss.png'
& & & & & & &&
B.在arcgis api for js中的解决方案：在切片缓存目录里添加指定的缺少瓦片(例如：C:\arcgisserver\arcgiscache\MyMapService\Layers\_alllayers\missing.png )，具体详情见：/technical-article/& & & &
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：7741次
排名：千里之外
原创：31篇
转载：10篇
评论：13条
(16)(15)(16)(1)Esri的四个开源JS项目：Esri-Leaflet、Geoservices.js、Terraformer、Pushlet_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Esri的四个开源JS项目：Esri-Leaflet、Geoservices.js、Terraformer、Pushlet
上传于|0|0|文档简介
&&Esri的四个开源JS项目：Esri-Leaflet、Geoservices.js、Terraformer、Pushlet
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩8页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢3668人阅读
GIS（101）
互联网（5）
可视化（20）
做Javascript相关地图开发的码农，特别关心可视化和开源的同学，都听说过Leaflet这样一个神包（神马，你没有听说过……好吧，当我没说，你自己先搜索一下……）
用官方（自吹自擂）的话来说，Leaflet包是号称最受欢迎的JS的开源交互式地图包（ most popular open-source JavaScript libraries for interactive maps），可以直接加载 OpenStreetMap, Mapbox, and CartoDB的底图数据（谢天谢地，这些底图都没有被墙，热泪盈眶啊有木有）。下面就是用Leaflet做的一个地图：
当然，虾神我年轻的时候写过一段时间JS，受伤太深，形成心理阴影了，所以看见JS就有缺氧的赶脚，这里直接无视JS，跳到R语言，进入正文。
今天要讲的是Leaflet for R 这样一个神奇的包。
LeafletR主要是用R语言的语法封装了JS版的Leaflet，可以在R语言的plot窗口，利用html5技术显示各种地图，还可以绘制自己的要素图形。
它有如下功能：
&&& 交互地图浏览（缩放、平移）&&& 使用多种底图进行任意组合&&& 加载地图瓦片（WMTS）&&& 点要素定位标记&&& 多边形要素标记&&& 线要素标记&&& 弹出窗口&&& 解析加载GeoJson&&& 从R或者RSutido创建地图窗口&&& 可以把地图嵌入 knitr/R包所生成的Markdown文档中，或者是Shiny制作的APP中。&&& 可以直接获取通过SP包生成就（加载）的空间对象以及包含经纬度的数据框进行展示。&&& 可以设定地图范围以及封装自定义的鼠标事件。
下面我们从安装开始：
因为Leaflet是一个标准的R语言包，所以直接通过命令就可以安装了：
install.packages(&leaflet&)
下面来看看这个包的基本用法：
一般来说，它的基本使用步骤如下：
1、加载leaflet包
2、通过leaflet包创建地图控件。
3、通过图层操作的方法（如addTiles、 addMarkers、 addPolygons）来处理图层数据，并且修改地图插件的各种参数，来把图层显示在地图控件上。
4、可以重复第三步，可以增加更多的图层数据。
5、把地图部件显示出来。完成绘图。
下面来看一个例子：
m &- leaflet()
at &- addTiles(m)
addMarkers(at,lng=116.391, lat=39.912, popup=&这里是北京&)
结果如下：
官方的文档里面，对于这种需要重复进行容器嵌套的写法，提供了管道操作符“%&%”来实现，它的主要作用就是把前面的语句（变量）传递给下一个语句，并且作为第一个参数使用，上面那三个语句，利用管道操作符来写，如下,输出结果是完全一样的，但是语句变得简单了。
leaflet()%&%addTiles()%&%addMarkers(lng=116.391, lat=39.912, popup=&这里是北京&)
简单解释一下管道操作符：
leaflet() %&% addTiles()
m &- leaflet()
at &- addTiles(m)
就是把leaflet()语句创建的地图控件，传递给addTiles()这个方法，并且作为第一个参数来使用。虽然开始用起来怪怪的，但是习惯之后发现这种写法也很舒服，下面的代码，我尽量把两种写法都用上。
二、地图控件
在leaflet包初始化的时候，一般调用leaflet()这个方法，这个方法就是对地图控件进行初始化，会生成一个地图容器，以后所有的图层操作，都在这个容器内处理。一般来说，这个方法都被作为其他方法的第一个参数来使用。我们可以通过显示参数设定或者通过管道操作符%&%来把这个容器传递给其他的方法。
地图控件的基本方法有下面这三个：
setView() :设定地图的显示级别缩放比例、和地图的中心点。
fitBounds()：设定地图的范围，一般是一个矩形，结构是：[lng1, lat1] – [lng2, lat2]。
clearBounds()：清除地图的范围设定。
下面来看个例子：
m&- leaflet()
m&- setView(m,lng=116.38,lat=39.9,zoom=9)
addTiles(m)
或者用管道操作符
leaflet()%&%setView(lng=116.38,lat=39.9,zoom=9)%&%addTiles()
结果如下：
初始化改为3级的话，结果如下：
leaflet()%&%setView(lng=116.38,lat=39.9,zoom=3)%&%addTiles()
leaflet包支持各种与空间信息有关的对象，包括使用sp包定义的空间对象，和R语言中带有空间信息的数据框等，如下所示：
与R相关的：
由经纬度信息组成矩阵带有经纬度字段的数据框。
与sp包相关的：
SpatialPoints[DataFrame]Line/LinesSpatialLines[DataFrame]Polygon/PolygonsSpatialPolygons[DataFrame]
还有就是maps包里面的各种空间图形信息
这些对象都可以直接用于leaflet里面的方法，作为图层添加到地图上。下面我们通过leaflet来绘制一些地图
当然，最简单的，还是绘制点，通过经纬度，把点画上去，我们先生成一批随机点：
df = data.frame(Lat = rnorm(100), Lon = rnorm(100))
然后画上去：
m &-leaflet(df)
addCircles(m)
df %&%leaflet()%&%addCircles()
或者自定义polygon，然后绘制成多边形的方法
下面用自定义的坐标，绘制出一个马里奥大叔：
library(sp)
library(leaflet)
Sr1 = Polygon(cbind(c(3.......................................................),
&&&&&&&&&&&&&&&&&& &
c(0.........-0..............................................)))
srs1 = Polygons(list(Sr1), &s1&)
SpP = SpatialPolygons(list(srs1))
leaflet(height = &900px&) %&% addPolygons(data = SpP)
addPolygons(leaflet(height = &600px&),data = SpP)
当然，上面两种画法是没有加载底图的，下面我们加载底图绘制一些点，比如生成一批在亚洲范围内的点，然后用彩虹色进行随机渲染，并且画到地图上：
df = data.frame(
& lat = runif(100,min=0,max=70),
& lng = runif(100,min=0,max=160),
& size = runif(100, 5, 10),
& co = substr(rainbow(100),1,7)
m &- leaflet(data=df)
m&- addTiles(m)
addCircleMarkers(m,lng=~lng,lat=~lat,radius = ~size, color = ~co, fill = TRUE)
#管道操作符写法：
df%&%leaflet()%&%addTiles()%&%
& addCircleMarkers(lng=~lng,lat=~lat,radius = ~size, color = ~co, fill = TRUE)
当然，除了自己通过数据框定义，还可以直接用现成的空间对象，比如R语言里面有一个maps包，这个包里面就给了很多现成的空间数据，我们通过maps包提供的数据直接来绘制地图：
################################################
#利用maps包里面的数据绘制不同颜色的美国各州地图
################################################
library(maps)
mapStates = map(&state&, fill = TRUE, plot = FALSE)
m &- leaflet(data = mapStates)
at &- addTiles(m)
addPolygons(at,fillColor = topo.colors(10, alpha = NULL), stroke = FALSE)
#管道操作符写法
leaflet(data = mapStates) %&% addTiles() %&%
& addPolygons(fillColor = topo.colors(10, alpha = NULL), stroke = FALSE)
当然，如果我们有本地的shape file，也可以通过maptools包来读取，变成空间对象，然后也可以画出来了，如下所示：
#####################################################
#绘制Shape file的多边形
####################################################
library(maptools)
path &- &E:/example/ch2/china/&
poly &- readShapePoly(paste(path,&CNPG_S.shp&,sep =&&))
#转换字符编码
poly$FIRST_NAME = iconv(poly$FIRST_NAME,&UTF8&,&CP936&)
#绘制全国，并且以省的名字为弹出窗
addPolygons(addTiles(leaflet()),data = poly,popup=~FIRST_NAME,
&&&&&&&&&&& fillColor = topo.colors(10, alpha = NULL), stroke = FALSE
&&&&&&&&&&& )
#管道操作符写法
leaflet(poly)%&%addTiles()%&%addPolygons(popup=~FIRST_NAME,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& fillColor = topo.colors(10, alpha = NULL),
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& stroke = FALSE)
再比如，我们筛选出有南字结尾的省，并且画出来（河南、湖南、云南、海南）
d =poly[substr(poly$FIRST_NAME,2,2)==&南&,]
addPolygons(addTiles(leaflet()),data = d,popup=~FIRST_NAME
&&&&&&&&&& ,fillColor = topo.colors(5, alpha = NULL), stroke = FALSE)
#管道操作符
d%&%leaflet()%&%addTiles()%&%addPolygons(popup=~FIRST_NAME
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ,fillColor = topo.colors(5, alpha = NULL),
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& stroke = FALSE)
后面还有多篇文章，在编写过程中，待续未完。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：296673次
积分：4683
积分：4683
排名：第5967名
原创：154篇
评论：141条
(7)(5)(14)(7)(8)(4)(1)(1)(5)(6)(1)(8)(5)(4)(4)(5)(7)(8)(2)(6)(2)(5)(19)(6)(1)(2)(2)(1)(2)(2)(7)(4)(1)}