console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>OpenLayers Screenshot</title>
	<link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css">
	<style>
		#map {
			width: 100%;
			height: 100vh;
		}
	</style>
</head>

<body>
	<div id="map" class="map"></div>
	<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.5.0/build/ol.js">
	</script>
	<script>
		// 初始化地图
    const raster = new ol.layer.Tile({
      source: new ol.source.OSM(),
    });

    const map = new ol.Map({
      layers: [raster],
      target: 'map',
      view: new ol.View({
        center: ol.proj.fromLonLat([0, 0]),
        zoom: 2,
      }),
    });

    // 添加绘制交互
    const source = new ol.source.Vector({ wrapX: false });
    const vector = new ol.layer.Vector({
      source: source,
    });

    map.addLayer(vector);

    const draw = new ol.interaction.Draw({
      source: source,
      type: 'Circle',
      geometryFunction: ol.interaction.Draw.createBox(),
    });

    map.addInteraction(draw);

    draw.on('drawend', function (evt) {
      const extent = evt.feature.getGeometry().getExtent();
      takeScreenshot(extent);
    });

    // 截取地图并下载截图
    function takeScreenshot(extent) {
      const size = map.getSize();
      const mapCanvas = document.createElement('canvas');
      mapCanvas.width = size[0];
      mapCanvas.height = size[1];
      const mapContext = mapCanvas.getContext('2d');

      Array.prototype.forEach.call(
        document.querySelectorAll('.ol-layer canvas'),
        function (canvas) {
          if (canvas.width > 0) {
            const opacity = canvas.parentNode.style.opacity;
            mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
            let transform = canvas.style.transform;
            // Get the transform parameters from the style's transform matrix
            const matrix = transform
              .match(/^matrix\(([^\(]*)\)$/)[1]
              .split(',')
              .map(Number);
            // Apply the transform to the map context
            CanvasRenderingContext2D.prototype.setTransform.apply(
              mapContext,
              matrix
            );
            mapContext.drawImage(canvas, 0, 0);
          }
        }
      );

      // 获取框选区域像素坐标
      const topLeft = map.getPixelFromCoordinate(ol.extent.getTopLeft(extent));
      const bottomRight = map.getPixelFromCoordinate(ol.extent.getBottomRight(extent));
      const width = bottomRight[0] - topLeft[0];
      const height = bottomRight[1] - topLeft[1];

      // 确保坐标转换精确
      const screenshotCanvas = document.createElement('canvas');
      screenshotCanvas.width = width;
      screenshotCanvas.height = height;
      const screenshotContext = screenshotCanvas.getContext('2d');

      screenshotContext.drawImage(
        mapCanvas,
        topLeft[0],
        topLeft[1],
        width,
        height,
        0,
        0,
        width,
        height
      );

      // 创建下载链接
      screenshotCanvas.toBlob(function (blob) {
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = 'map-screenshot.png';
        link.click();
      });
    }
	</script>
</body>

</html>