leaflet插件推荐之如何处理大量点位

技术 , , 评论

1.Leaflet.markercluster 点位聚合

用法：

1
2
3
4
5
6
7
8
9
10
11
12

import 'leaflet.markercluster';

import './MarkerCluster.css';

markerClusterGroup = L.markerClusterGroup();

markerClusterGroup.addLayer(marker);

map.addLayer(markerClusterGroup);


点击查看demo

2.Leaflet.PixiOverlay

使用Pixi.js绘制叠加层，Pixi.js是一个使用 WebGL 绘制的 JavaScript 库

点击查看demo

3.leaflet-markers-canvas

用法：

1
2
3
4
5
6
7
8
9
10

require('./leaflet-markers-canvas.min.js');

markersCanvas = new L.MarkersCanvas();

markersCanvas.addTo(map);

markersCanvas.addMarker(marker, null);


点击查看demo

4.leaflet.canvas-markers

用法：

1
2
3
4
5
6
7
8
9
10
11
12

import './leaflet.canvas-markers';

markersCanvas = L.canvasIconLayer({}).addTo(map);

markersCanvas.addOnClickListener(function(e, arr){
  const data = arr[0].data;
})

ciLayerref.current.addLayers(markers);


点击查看demo

使用插件leaflet.canvas-markers在缩放时，图标的缩放会产生延迟，使用fork的分支

5.canvas marker如何使用自定义颜色的图标？

之前项目的一个核心需求就是可以自定义图标颜色，然而canvas marker类插件只支持固定的图片图标。难道要制作N个不同颜色的图标文件吗？

百般研究之后，我的解决方案是（把原来的SVG图标文件）————转成cavans函数绘制，然后颜色值作为fillcolor传参

使用 svg2canvas 工具即可