vue3 + arcgis for js 4 打印地图

你可以使用 Vue 3 和 ArcGIS API for JavaScript 4 来打印地图。下面是一个简单的示例代码，展示了如何在 Vue 3 中使用 ArcGIS API for JavaScript 4 来打印地图：

首先，在你的 Vue 3 项目中安装 ArcGIS API for JavaScript 4 的依赖：

npm install --save @arcgis/core

然后，在你的 Vue 组件中引入 ArcGIS API for JavaScript 4 的模块：

import { loadModules } from '@esri/arcgis-rest-loader';

export default {
  name: 'MapPrint',
  data() {
    return {
      map: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    async initMap() {
      // 加载 ArcGIS API for JavaScript 4 的模块
      const [Map, MapView] = await loadModules(['esri/Map', 'esri/views/MapView']);

      // 创建地图实例
      this.map = new Map({
        basemap: 'streets'
      });

      // 创建地图视图
      const mapView = new MapView({
        container: this.$refs.mapViewContainer,
        map: this.map,
        zoom: 12,
        center: [-118.2437, 34.0522] // 设置初始地图中心点坐标
      });
    },
    printMap() {
      // 打印地图
      this.$refs.mapViewContainer.print();
    }
  }
};

在上面的代码中，我们创建了一个名为 `MapPrint` 的 Vue 组件，并通过 `loadModules` 方法加载了 `esri/Map` 和 `esri/views/MapView` 模块。然后，我们在 `mounted` 钩子函数中初始化了地图，并在 `printMap` 方法中调用了 `print` 方法来实现地图的打印功能。

最后，在你的 Vue 组件模板中添加一个地图容器和一个按钮来触发打印地图的操作：

<template>
  <div>
    <div ref="mapViewContainer" style="width: 100%; height: 400px;"></div>
    <button @click="printMap">Print Map</button>
  </div>
</template>

这样，当你在浏览器中打开该 Vue 组件页面时，你将看到一个包含地图的容器和一个打印地图的按钮。点击按钮后，地图将被打印出来。

希望这个示例能对你有所帮助！如果你还有其他问题，请随时提问。