vue+openlayers导出整幅地图为image图片（附源码）

1.实现步骤

1. 创建OpenLayers地图。
2. 使用ol.Map获取渲染地图的canvas元素。
3. 使用HTMLCanvasElement的toDataURL方法导出为图片。

2.页面效果

3.导出图片效果

4.附完整源码

<template>
  <div id="map" class="imap">
  </div>
  <div class="export-map">
    <button @click="exportMap">导出地图</button>
  </div>

</template>
<script setup>
  // 导出整幅地图为image图片
  import {
    onMounted,
    ref
  } from 'vue'
  import 'ol/ol.css';
  import {
    Map,
    View
  } from 'ol';
  import TileLayer from 'ol/layer/Tile';
  import OSM from 'ol/source/OSM';
  var map = null
  onMounted(() => {
    map = new Map({
      target: 'map',
      layers: [
         new TileLayer({
          source: new OSM(),
          crossOrigin: 'anonymous',
        })
      ],
      view: new View({
        //地图初始中心点
        center: [0, 0],
        projection: "EPSG:3857",
        minZoom: 2,
        maxZoom: 18,
        zoom: 2
      })
    });
    window.olmap = map
  })

  function exportMap() {
    map.once('rendercomplete', function (event) {
      debugger
      var canvas = map.getTargetElement().querySelector('canvas'); // 获取地图的canvas元素
      if (canvas) {
        // 使用canvas对象进行操作，例如打印或导出
        console.log(canvas);
        var link = document.createElement('a');
        link.setAttribute("download", "map.png");
        link.href = canvas.toDataURL('image/png');
        link.click();
      } else {
        console.error('无法找到Canvas元素');
      }
    });
    map.renderSync()
  }
</script>
<style scoped>
  .imap {
    height: 100%;
    width: 100%;
  }

  .export-map {
    position: absolute;
    right: 10px;
    top: 10px;
    border: 5px solid red;
  }
</style>