记录openlayers 7.5.2版本地图下载 导出

加载本地切片地图 瓦片图资源方法

  tileLayer = new TileLayer({
    source: new XYZ({
      crossOrigin: 'anonymous',//设置地图瓦片图允许跨域
      url: mapUrl,
    }), visible: true,
  });

下载地图方法函数

getImg() {

    let thaut = this
    thaut.map.render();
    thaut.map.once('rendercomplete', function () {
      const mapCanvas = document.createElement('canvas');
      const size = thaut.map.getSize();
      mapCanvas.width = size[0];
      mapCanvas.height = size[1];
      const mapContext = mapCanvas.getContext('2d')
      Array.prototype.forEach.call(
        thaut.map.getViewport().querySelectorAll('.ol-layer canvas, canvas.ol-layer'),
        function (canvas) {
          if (canvas.width > 0) {
            const opacity = canvas.parentNode.style.opacity;
            mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
            let matrix;
            const transform = canvas.style.transform;
            if (transform) {
              // Get the transform parameters from the style's transform matrix
              matrix = transform
                .match(/^matrix\(([^\(]*)\)$/)[1]
                .split(',')
                .map(Number);
            } else {
              matrix = [
                parseFloat(canvas.style.width) / canvas.width,
                0,
                0,
                parseFloat(canvas.style.height) / canvas.height,
                0,
                0,
              ];
            }
            // Apply the transform to the export map context
            CanvasRenderingContext2D.prototype.setTransform.apply(
              mapContext,
              matrix
            );
            const backgroundColor = canvas.parentNode.style.backgroundColor;
            if (backgroundColor) {
              mapContext.fillStyle = backgroundColor;
              mapContext.fillRect(0, 0, canvas.width, canvas.height);
            }
            mapContext.drawImage(canvas, 0, 0);
          }
        }
      );
      mapContext.globalAlpha = 1;
      mapContext.setTransform(1, 0, 0, 1, 0, 0);
      const link = document.createElement('a');
      link.href = mapCanvas.toDataURL("image/jpg");
      var event = new MouseEvent('click');
      link.download = (new Date()).getTime() + ".jpg";
      link.dispatchEvent(event);
    });
    thaut.map.renderSync();
  }