这个代码,能不能哪位老师能做个demo看看:https://blog.csdn.net/chysxsl...
一直想找这个功能。
我只写了矩形的demo
HTML
<!-- Load Leaflet from CDN-->
<script src='/uploads/allimg/210419/150100J38-0.jpg'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.css' rel='stylesheet' />
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css' rel='stylesheet' />
<script src='/uploads/allimg/210419/1501002T2-1.jpg'></script>
<!-- Load Esri Leaflet from CDN -->
<script src="/uploads/allimg/210419/15010051P-2.jpg"></script>
<script src="/uploads/allimg/210419/1501006120-3.jpg" />
<script src="/uploads/allimg/210419/1501002149-4.jpg"></script>
<div id="map"></div>
css
body {
margin: 0;
padding: 0;
}
#map {
height: 400px;
width: 800px;
}
js
let points = []
var map = L.map('map').setView([60, 30], 8);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var featureGroup = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
draw: {
polygon: false,
polyline: false,
circle: false,
marker: false
},
edit: {
featureGroup: featureGroup,
edit: false,
remove:false
}
}).addTo(map);
map.on('draw:created', function(e) {
featureGroup.addLayer(e.layer);
let latlngs = e.layer._latlngs
points = latlngs
var r = confirm("是否截图当前框选");
if (r == true) {
createMapImage()
} else {
console.log("您按了取消!");
}
featureGroup.removeLayer(e.layer);
});
function createMapImage() {
let bounds = this.map.getBounds(),
zero = [bounds._northEast.lat, bounds._southWest.lng],
// 计算当前 视窗内的 原点经纬度 ==> 对应的屏幕坐标 (地图位移及缩放时计算 startPoint的偏移量)必须!!!
zeroPoint = map.latLngToLayerPoint(zero)
let startPoint = map.latLngToLayerPoint(points[1]), // latlng 转 屏幕坐标 计算 起点及宽高
endPoint = map.latLngToLayerPoint(points[points.length - 1]),
width = Math.abs(startPoint.x - endPoint.x),
height = Math.abs(startPoint.y - endPoint.y);
html2canvas(document.getElementById('map'), {
useCORS: true,
onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
downloadIamge(canvas, (startPoint.x - zeroPoint.x), (startPoint.y - zeroPoint.y), width, height)
}
})
}
function downloadIamge(canvas, capture_x, capture_y, capture_width, capture_height) {
// 创建一个用于截取的canvas
var clipCanvas = document.createElement('canvas')
clipCanvas.width = capture_width
clipCanvas.height = capture_height
// 截取图片
clipCanvas.getContext('2d').drawImage(canvas, capture_x, capture_y, capture_width, capture_height, 0, 0, capture_width, capture_height)
var clipImgBase64 = clipCanvas.toDataURL() // 生成图片url
// 下载图片
let link = document.createElement("a");
link.href = clipImgBase64; //下载链接
link.setAttribute("download", new Date().toLocaleString() + "_截图.png");
link.style.display = "none"; //a标签隐藏
document.body.appendChild(link);
link.click(); // 点击下载
document.body.removeChild(link); // 移除a标签
}