Leaflet 笔记六：瓦片矢量渲染

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

图层设置好后，加入地图则完成瓦片矢量渲染。

优点

随着异步功能的使用，效率较高。

缺点

1. 每个格网间失去联系。实现交互功能变得不可能。

2. mapbox GL js使用的是整体一个canvas效率也极其高，与mapbox的设计背道而驰。

个人建议还是使用1.0的L.Canvas实现矢量渲染。

转载，请表明出处。总目录Awesome GIS