Leaflet前端性能优化的几种方法

1. 坐标系统统一

后端返回统一的坐标系(如WGS84)，避免前端转换计算损耗

2.矢量图层聚类

如果marker点比较密集 可以使用Leaflet.markercluster等聚集工具处理数据

import MarkerCluster from 'leaflet.markercluster';
const clusters = new MarkerCluster().addTo(map);
data.forEach(p => clusters.addLayer(L.marker(p)))

3. 渲染模式

使用Canvas渲染模式

const map = L.map('map', { preferCanvas: true });

4. GeoJSON格式

个人使用体验是直接使用geoJson方法加载geoJson数据比较快

 layer = L.geoJson(res.data, options);
                layer.addTo(map);

单纯的几百条marker数据不太需要做优化 主要是项目中有大量的项目图层及保护区缓冲区数据 这种情况下尽量分批次加载