Leaflet 笔记六：瓦片矢量渲染
github源码在此，希望大家一起开发，记得点星:
https://github.com/brandonxiang/leaflet-geojson-vt
前言
结合地图瓦片整体介绍，我们可以知道如今互联网地图逐渐走向一个方向就是Canvas。减少实现传统的栅格瓦片，SVG。而是用Canvas针对数据整体绘画。优点在于效率高，可以很轻地渲染上万个点，上万条线，上万个面，不卡顿，例子参考一条数据狗的上海房价研究。所以说这是一个未来的方向。
随着leaflet进入1.0，它在一定程度下更多使用了Canvas，详情Leaflet 笔记七：Leaflet1.0的重大改变，让我们更好地享受大数据时代的快感。
问题
针对海量的矢量数据，怎样才能高效渲染呢？
结构
瓦片分片异步渲染Canvas是最最高效的一种体现。每一个256*256的格网当中，都存在一个Canvas，每个Canvas独立渲染。这依赖于Leaflet 0.7 中的L.TileLayer.Canvas或者是1.0中的L.GridLayer，所以该库分开两分支分别实现。
master => 0.7 leaflet
leaflet1.0.0 => 1.0 leaflet
实现的方式依赖于mapbox/geojson-vt，它可以帮我们把geojson分解为瓦片大小的线条，我们只需要通过瓦片编号x,y,z去索引对应的格网中的矢量数据。
var tile = tileIndex.getTile(zoom, tilePoint.x, tilePoint.y);
我扩展了L.TileLayer或L.GridLayer这个类，结合geojson-vt的数据，实现对应的绘画。该项目受到一个例子geojson-vt-leaflet的启发。
使用方法
首先，设置对应的参数，参数内容参考geojson-vt options 和 L.geojson style。
var options = {
maxZoom: 16,
tolerance: 3,
debug: 0,
style: {
fillColor: '#1EB300',
color: '#F2FF00',
weight: 2
}
};
var canvasLayer = L.tileLayer.canvas.geoJson(json, options).addTo(map);
图层设置好后，加入地图则完成瓦片矢量渲染。
优点
随着异步功能的使用，效率较高。
缺点
-
每个格网间失去联系。实现交互功能变得不可能。
-
mapbox GL js使用的是整体一个canvas效率也极其高，与mapbox的设计背道而驰。
个人建议还是使用1.0的L.Canvas实现矢量渲染。
转载，请表明出处。总目录Awesome GIS
网友评论