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

本文链接：https://blog.csdn.net/aa12364567/article/details/147310325
maptalks在地图中进行矩形绘制，并把矩形区域截图
<!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();

      // 获取地图Canvas
      const canvas = map.getRenderer().canvas;

      // 转换坐标到屏幕像素
      const min = map.coordinateToContainerPoint(extent.getMin());
      const max = map.coordinateToContainerPoint(extent.getMax());

      console.log(min, max);


      // 创建临时Canvas
      const 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>