leaflet地图生成图片下载

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 = () => {// 获取markerlet 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");// 生成地图canvasleafletImage(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();})}

leaflet地图生成图片下载相关推荐

leaflet地图截图批量导出(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
在Leaflet地图上集成Echarts
需求背景: 现在我要在地图上加上Echarts的散点图还有线集,看起来就很牛B的那种.上效果图: 需求分析: 我先看了看Echarts官网上有提供加载地图的例子,主要包括三种方式: 1.加载js格式的 ...
leaflet地图总结（不断更新）
一.创建leaflet地图输入指令npm install leaflet 页面引入 import L from "leaflet"; import "leaflet/d ...
搜狗浏览器智慧版_奥维互动地图浏览器下载_奥维互动地图浏览器64位版v7.1.2
<奥维互动地图浏览器>64位版是一款地图软件,可以导入各种地图数据并且实时显示三维地图,结合卫星图与高程数据,自动进行快速3D建模,让你清晰知道周围的地形和所在地位置.本软件支持64位电脑 ...
mc穿越时空地图android,我的世界RPG地图穿越时空地图存档下载
我的世界RPG地图穿越时空地图存档是一个非常出名的RPG地图存档,今天17173小编就为大家带来我的世界RPG地图穿越时空地图存档下载. 我的世界RPG地图穿越时空地图存档: 地图名称:穿越时空地图 ...
百度离线地图开发，node实现地图瓦片下载
最近有个Web项目要用离线地图,项目是在内网环境,找了很多资料,踩了很多坑,好在已经实现了,下面把资料整理一下. 首先是百度离线地图开发包,原文地址是http://www.xiaoguo123.com ...
leaflet地图资源整理
leaflet地图资源整理均来自网络 React-Leaflet(v2.0-beta)を試す https://qiita.com/sugasaki/items/d225cf548e9a787dbd9c ...
天地图矢量数据下载_全球谷歌卫星地图影像数据下载
1. 概述 <全球谷歌卫星地图影像数据下载>项目即将完成,该离线卫星地图数据为全球2到19级,用一台16盘位的阵列柜存储,如下图所示. 全球谷歌卫星影像数据阵列柜这里,我们将对<全 ...
ArcGIS中做一张新闻1+1演播厅背景图（附世界矢量地图.shp下载）
ArcGIS中做一张新闻1+1演播厅背景图(附世界矢量地图.shp下载) 前段时间ceibake大佬的博客终于更新了,介绍了关于ArcMap中如何一张新闻1+1演播厅的背景图. 就是那张由点组成的世界 ...

leaflet地图生成图片下载

leaflet地图生成图片下载相关推荐

最新文章

热门文章