• https://blog.csdn.net/gisarmory/article/details/109672301

• leaflet如何加载10万条数据

canvas渲染方式

leaflet支持两种渲染方式，svg 和 canvas，默认是svg渲染，这样可以兼容低版本的IE浏览器。canvas渲染需要IE9+，或谷歌、火狐的高版本浏览器。canvas比svg性能好

• 在初始化地图时，设置map的 preferCanvas 属性为 true，代码如下：

var map = L.map('map', {
    center: [39.905963, 116.390813],
    zoom: 13,    
    preferCanvas: true
});

• 这个设置只针对继承了Path类的矢量图层有效，包括圆点（CircleMarker）、线（Polyline）、面（Polygon）、圆（Circle）、矩形（Rectangle）。针对图片标记（Marker）没有作用。
• 借助插件 Leaflet.Canvas-Markers，提升Marker的显示性能。插件git地址：https://github.com/eJuke/Leaflet.Canvas-Markers
• Leaflet.Canvas-Markers 插件 Leaflet.Canvas-Markers 插件提供了一个 L.canvasIconLayer 类，这个类是一个图层，将 Marker 添加到这个图层中时，这个图层会以 canvas 方式渲染 Marker 中的图片。

// 创建图层，添加到 map
var ciLayer = L.canvasIconLayer({}).addTo(map);

// 定义 Marker
var marker =  L.marker([58.5578, 29.0087], {icon: icon});

// 把 Marker 添加到图层
ciLayer.addMarker(marker);

• 问题，就是地图缩放时，添加的数据不跟着同步缩放，而是等到缩放完成后，再去缩放。这样感觉缩放时，数据在飘着。

• https://github.com/eJuke/Leaflet.Canvas-Markers/pull/21

  • leaflet支持两种渲染方式，svg 和 canvas，canvas的显示性能要明显优于svg。
  • IE9之前版本浏览器不支持canvas方式渲染。
  • 默认是svg方式渲染，要手动切换成canvas方式。
  • 渲染方式设置成canvas后，加载矢量图形性能会提升，加载图片标记的效率仍然低。
  • 通过Leaflet.Canvas-Markers插件来提升图片标记的显示效率。
  • Leaflet.Canvas-Markers插件在缩放地图时有bug，需要在github上找已经解决此bug的版本。