leaflet性能优化

之前在开发项目中，由于数据太多，而且需要对图上的内容进行交互，导致数据渲染到底图上会很卡，就开始想着如何对页面进行优化

非标记点优化

开始优化

1. 使用canvas进行渲染

// 对底图使用canvas
var map = L.map('map', { renderer: L.canvas() });
// 对需要渲染的图像使用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渲染后，效果并没有很大的提升，页面进行缩放与交互的时候还是很卡，canvas不适合大量数据的业务需求

2. 配合gis图进行优化 页面是用后端传递过来的gis图，为map绑定点击事件，在点击时通过 identify() 方法可以查询该位置下存在哪些地理要素，比如点、线、面等类型的要素

layer.identify().at([e.latlng.lat, e.latlng.lng]).on(map.value).run(function (error, featureCollection)

由于内容都是后端返回的gis渲染而来，页面性能得到很大提升，不会有卡顿体验（由于页面都是后端返回渲染，导致对需要渲染的样式方面不能修改）