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 拖拽實現
使用方法
代碼來自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現在還是一個初步階段，有很多功能并不完善?？赡軙霈F一些功能上的錯誤，例如圖層順序，局部刷新，resetstyle等等，希望1.0后續版本可以有所加強吧。
變化二：柵格圖層
我們知道柵格瓦片一直是互聯網地圖的一個“命根子”，即使時代怎么發展，遙感圖像不會放棄柵格瓦片圖層，我們還是會發現1.0將瓦片圖層進行了微調。
TileLayer.Canvas被取消？其實并沒有，被設置為更底層的基類GridLayer可以自定義程度更高，每一個格子可以被設置成為HTML 要素如<canvas>, <img>或<div>，填充不同的要素。是不是讓人腦袋大開？
舉個栗子，Leaflet 筆記六：瓦片矢量渲染講述了格網渲染Canvas的要點，我們在L.GridLayer中實現也沒有問題，這樣的格網結構可以讓我們除了圖片和Canvas還能嵌入其他要素來展示地圖產品。
變化三：
L.Tooltip的加入讓L.Popup不再寂寞，你再也不用找插件L.Label去實現提示。
轉載，請表明出處。總目錄Awesome GIS
