|
leaflet提供了相关插件leaflet-image,但是很遗憾不支持用html展示的label和marker.
Leaflet.label: will not work because it uses HTML to display labels.Leaflet.markercluster: will not work because it uses HTML for clusters.
而html生成图片常用的解决方案就是 html -> canvas -> img，这里可以利用html2canvas; 因此为了将地图生成图片再下载可以先将leaflet-image不支持的marker生成图片然后绘制到地图生成的canvas进行地图和marker的合成，然后再生成图片。
实现代码
import leafletImage from 'leaflet-image';
import html2canvas from 'html2canvas';
creat = () => {
// 获取marker
let markers = mapContainer.querySelector('.leaflet-marker-pane');
// 保证marker生成的图片和leaflet生成的大小一致，避免marker位置偏差
html2canvas(markers, {
width: mapContainer.offsetWidth,
height: tmapContainer.offsetHeight,
backgroundColor: null
}).then(canvas => {
let markImg = new Image();
markImg.src = canvas.toDataURL("image/png");
// 生成地图canvas
leafletImage(mapInstance, function(err, canvas) {
let ctx = canvas.getContext('2d');
ctx.drawImage(markImg, 0, 0);
let a = document.createElement("a");
a.href = canvas.toDataURL("image/png");
a.download = name;
a.click();
})
}
|