当前位置：首页 > news >正文

maptalks在地图中进行矩形绘制，并把绘制区域截图下载

news 2025/7/5 10:59:53

<!DOCTYPE html>
<html>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>交互 - 绘制工具</title>
<style type='text/css'>html,body {margin: 0px;height: 100%;width: 100%;}.container {width: 100%;height: 100%;}
</style>
<link rel='stylesheet' href='https://maptalks.com/api/maptalks-gl.css' />
<script type='text/javascript' src='https://maptalks.com/api/maptalks-gl.js'></script><body><div id="map" class="container"></div><script>const map = new maptalks.Map("map", {center: [113.049, 51.498568],zoom: 8,baseLayer: new maptalks.TileLayer("base", {urlTemplate: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",subdomains: ["a", "b", "c", "d"],attribution: "&copy; <a href='http://osm.org'>OpenStreetMap</a> contributors, &copy; <a href='https://carto.com/'>CARTO</a>",}),});let startPoint, rectangle, endPoint;const layer = new maptalks.VectorLayer("vector").addTo(map);const drawTool = new maptalks.DrawTool({mode: "Point",}).addTo(map).disable();drawTool.on("drawend", function (param) {console.info(param.geometry);console.log(param.geometry.getCoordinates());// 获取绘制的矩形图形对象const rectangle = param.geometry;// 获取矩形外接矩形范围（西南角/东北角坐标）const extentRange = rectangle.getExtent();console.log('西北角(左上)：', extentRange.xmin, extentRange.ymax)console.log('东北角（右上）：', extentRange.xmax, extentRange.ymax);console.log('东南角（右下）：', extentRange.xmax, extentRange.ymin)console.log('西南角（左下）：', extentRange.xmin, extentRange.ymin);layer.addGeometry(param.geometry);startPoint = {x: extentRange.xmin,y: extentRange.ymax}endPoint = {x: extentRange.xmax,y: extentRange.ymin}// const extent = maptalks.Coordinate.getExtent(startPoint, endPoint);const extent = rectangle.getExtent();// 获取地图Canvasconst canvas = map.getRenderer().canvas;// 转换坐标到屏幕像素const min = map.coordinateToContainerPoint(extent.getMin());const max = map.coordinateToContainerPoint(extent.getMax());console.log(min, max);// 创建临时Canvasconst tempCanvas = document.createElement('canvas');const ctx = tempCanvas.getContext('2d');tempCanvas.width = max.x - min.x;tempCanvas.height = min.y - max.y;console.log('tempCanvas', tempCanvas.width, tempCanvas.height);// 截取区域ctx.drawImage(canvas,min.x, max.y, tempCanvas.width, tempCanvas.height,0, 0, tempCanvas.width, tempCanvas.height);// 导出图片const img = tempCanvas.toDataURL('image/png');// console.log(img); // 图片链接，在项目中到这一步就可以了// vectorLayer.removeGeometry(rectangle); // 清除矩形startPoint = null;// 下载截图const link = document.createElement('a');link.download = 'map-screenshot.png';link.href = img;link.click();});const items = ["Point","LineString","Polygon","Circle","Ellipse","Rectangle","FreeHandLineString","FreeHandPolygon",].map(function (value) {return {item: value,click: function () {drawTool.setMode(value).enable();},};});const toolbar = new maptalks.control.Toolbar({items: [{item: "Shape",children: items,},{item: "Disable",click: function () {drawTool.disable();},},{item: "Clear",click: function () {layer.clear();},},],}).addTo(map);</script>
</body></html>