Leaflet 笔记七：Leaflet1.0的重大改变

Leaflet 笔记七：Leaflet1.0的重大改变

github源码在此，希望大家一起开发，记得点星:
https://github.com/brandonxiang/example-leaflet1

这篇文章也可以命名为 Leaflet 1.0 和 0.7 的区别。两个版本间虽然有很强的继承，但是也掩盖不了创新和时代的发展方向。

变化一：点线面的整理和选择

众所周知，Leaflet 0.7在点线面展示上非常优秀，并带有不错的交互性。它的展示载体主要还是SVG，通过CSS的tranform改变位置去准确地叠加在地图表面。但是缺点在于线和面的量很大的时候还是会出现效率的问题。marker的效率问题最为严重，当然可以使用circlemarker代替。

进入了1.0的时代，由下方文档截图可以很明显的看出，矢量图层类被重新整理过，把渲染部分Renderer放入基类。基类分出两个分支供用户选择。一个是SVG，即传承了上一代的矢量图层方法。另一个是Canvas，即向更高的效率进发。

Canvas

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

来自 canvas 拖拽实现

0.7和1.0在矢量图层的差异

使用方法

代码来自1.0文档

矢量图层的使用默认是SVG。如果想切换至Canvas渲染，就在map的options中设置renderer指向L.canvas()，也就是说默认它是指向L.SVG()。此时以下所有的矢量图层渲染就是基于Canvas的技术。

var map = L.map('map', {
    renderer: L.canvas();
});

当然我们也可以部分要素使用Canvas渲染。要写一个L.canvas，并针对每一个矢量要素进行设置。

var map = L.map('map');
var myRenderer = L.canvas({ padding: 0.5 });
var line = L.polyline( coordinates, { renderer: myRenderer } );
var circle = L.circle( center, { renderer: myRenderer } );

不足之处

但是Canvas现在还是一个初步阶段，有很多功能并不完善。可能会出现一些功能上的错误，例如图层顺序，局部刷新，resetstyle等等，希望1.0后续版本可以有所加强吧。

变化二：栅格图层

我们知道栅格瓦片一直是互联网地图的一个“命根子”，即使时代怎么发展，遥感图像不会放弃栅格瓦片图层，我们还是会发现1.0将瓦片图层进行了微调。

TileLayer.Canvas被取消？其实并没有，被设置为更底层的基类GridLayer可以自定义程度更高，每一个格子可以被设置成为HTML 要素如, 或

，填充不同的要素。是不是让人脑袋大开？

0.7和1.0在栅格图层的差异

举个栗子，Leaflet 笔记六：瓦片矢量渲染讲述了格网渲染Canvas的要点，我们在L.GridLayer中实现也没有问题，这样的格网结构可以让我们除了图片和Canvas还能嵌入其他要素来展示地图产品。

变化三：

L.Tooltip的加入让L.Popup不再寂寞，你再也不用找插件L.Label去实现提示。

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