如何使用ArcGIS JS进行地图截图？

ArcGIS JS 地图截图

背景介绍

ArcGIS API for JavaScript是Esri公司提供的一款强大的Web GIS开发工具，主要用于构建交互式的Web地图和地理信息系统（GIS）应用，通过该API，开发人员可以利用丰富的地图数据和功能，为用户提供各种地理分析功能，在实际应用中，经常会遇到需要对当前地图视图或特定区域的地图内容进行截图保存或分享的需求，本文将详细介绍如何使用ArcGIS API for JavaScript实现地图截图功能，并提供相关代码示例和问题解答。

实现方法

一、ArcGIS API for JavaScript自带的截图方式

1. 使用Print微件

ArcGIS API for JavaScript自带了一个名为“esri/widgets/Print”的截图微件，可以方便地实现地图截图功能，具体代码如下：

const print = new Print({
  view: view,
  printServiceUrl: "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
});
view.ui.add(print, {
  position: "top-left"
});

使用这种方式非常简单，只需要几行代码就可以实现截图功能，这种方式的自由度并不高，因为它已经自带了一份写好的微件UI。

2. 自定义截图功能

在项目开发中，如果需要更灵活的截图功能，可以通过esri/tasks/PrintTask来实现，以下是具体实现代码：

const { view } = props;
const [PrintTask, PrintTemplate, PrintParameters] = await loadModules(['esri/tasks/PrintTask', 'esri/tasks/support/PrintTemplate', 'esri/tasks/support/PrintParameters'], gconfig.arcgis_options);
let printTask = new PrintTask({
    url: 'https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task'
});
let template = new PrintTemplate({
    format: "pdf",
    exportOptions: {
        dpi: 300
    },
    layout: "a4-portrait",
    layoutOptions: {
        titleText: "pdf标题",
        authorText: "作者信息"
    }
});
let params = new PrintParameters({
    view: view,
    template: template
});
printTask.execute(params).then((printResult) => {
    if (printResult.url) {
        message.success('pdf报告生成成功');
        window.open(printResult.url);
    } else {
        message.error('pdf报告生成失败');
    }
});

上述代码中，我们借用了PrintTask来自定义截图功能，截图所需的各类参数直接在代码中写好，这种方式可以实现用户自定义打印，灵活性较高。

二、html2canvas实现地图截图

如果ArcGIS自带的截图方式不能满足需求，可以使用第三方插件如html2canvas来实现地图截图，以下是具体实现步骤：

1. 安装html2canvas

需要安装html2canvas模块：

npm install html2canvas

2. 引入html2canvas并实现截图功能

import html2canvas from 'html2canvas';
// 使用html2canvas截图
html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

上述代码完成了安装、引入和使用三个环节，非常简洁。

3. 解决底图缺失问题

在使用html2canvas截图时，可能会遇到底图缺失的问题，解决方法是在地图实例化后设置canvas的preserveDrawingBuffer属性为true：

map.scene.screenshot({
    preserveDrawingBuffer: true, // 关键设置项
}).then((screenshot) => {
    const canvas = screenshot.canvas;
    const base64Image = canvas.toDataURL("image/png");
    console.log(base64Image);
});

这个设置可以确保截图时保留底图。

常见问题与解答

1. 如何在ArcGIS API for JavaScript中使用html2canvas进行地图截图？

答：要在ArcGIS API for JavaScript中使用html2canvas进行地图截图，首先需要安装html2canvas模块，然后引入并使用它，具体步骤如下：

1、安装html2canvas：npm install html2canvas

2、引入html2canvas并实现截图功能：

import html2canvas from 'html2canvas';
// 使用html2canvas截图
html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

如果遇到底图缺失的问题，可以在地图实例化后设置canvas的preserveDrawingBuffer属性为true。

2. 如何在ArcGIS API for JavaScript中自定义截图功能？

答：要在ArcGIS API for JavaScript中自定义截图功能，可以使用esri/tasks/PrintTask来实现，具体步骤如下：

1、加载必要的模块：

const { view } = props;
const [PrintTask, PrintTemplate, PrintParameters] = await loadModules(['esri/tasks/PrintTask', 'esri/tasks/support/PrintTemplate', 'esri/tasks/support/PrintParameters'], gconfig.arcgis_options);

2、创建PrintTask、PrintTemplate和PrintParameters对象，并执行截图任务：

let printTask = new PrintTask({
    url: 'https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task'
});
let template = new PrintTemplate({
    format: "pdf",
    exportOptions: {
        dpi: 300
    },
    layout: "a4-portrait",
    layoutOptions: {
        titleText: "pdf标题",
        authorText: "作者信息"
    }
});
let params = new PrintParameters({
    view: view,
    template: template
});
printTask.execute(params).then((printResult) => {
    if (printResult.url) {
        message.success('pdf报告生成成功');
        window.open(printResult.url);
    } else {
        message.error('pdf报告生成失败');
    }
});

这种方式可以实现用户自定义打印，灵活性较高。

本文详细介绍了如何使用ArcGIS API for JavaScript实现地图截图功能，包括自带截图方式和html2canvas插件的使用，通过这些方法，开发者可以根据实际需求选择适合的截图方式，并在项目中实现高效的地图截图功能。

小伙伴们，上文介绍了“arcgis js 地图截图”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。