Vue 和 React 中使用 ArcGIS Maps SDK for JavaScript

写在前面

在之前很长的一段时间中，使用 ArcGIS Maps SDK for JavaScript 开发 WebGIS 系统的时候，还是基于传统的前端框架和各种前端技术来开发，这些框架和技术各位使用过的大概有这些：Dojo、jQuery、Bootstrap、CommonJS 等。用这些传统的技术框架结合 ArcGIS Maps SDK for JavaScript 去开发的时候，我们引入 ArcGIS Maps SDK for JavaScript 是在系统的 HTML 页面中通过 script 和 style 标签来引入，通常的做法是在主页（index.html）中引入，代码如下所示：

<link rel="stylesheet" href="http://localhost/4.27/esri/themes/light/main.css" /> 
<script src="http://localhost/4.27/init.js"></script>

目前，随着前端技术的不断发展，React 和 Vue 等前端开发技术已经成为了一名前端开发者的标配，作为 GISer 的我们也毫无例外，在开发许许多多的 WebGIS 项目系统时，我们都会去选择目前主流的这些开发技术，其中使用最多的就是 React 和 Vue 这两种。所以本文就主要介绍下我们如何使用 React 和 Vue 结合 ArcGIS Maps SDK for JavaScript 去开发我们的项目系统。

ArcGIS Maps SDK for JavaScript 在 React 和 Vue 项目中使用方式都是一模一样的，不管你用的 Vue2 还是 Vue3 创建的项目，或者使用 React 创建的项目，引入 ArcGIS Maps SDK for JavaScript 的方式都是没有任何区别，这一点请牢记。所以本文直接按 Vue2 项目来介绍如何在这些主流的前端框架中使用 ArcGIS Maps SDK for JavaScript。

截止 ArcGIS Maps SDK for JavaScript 4.27 版本，ArcGIS Maps SDK for JavaScript 在主流的前端框架中使用方式默认支持两种：esri-loader 方式和 ES modules 方式。两种方式的区别仅仅是如何在前端框架中引入 ArcGIS Maps SDK for JavaScript 方式的不同，至于引入 ArcGIS Maps SDK for JavaScript 之后，各个 API 模块的使用其实也是一模一样的，两种方式博主都推荐，具体用哪种看各位选择。

开始前的技术基础

• 有一定的 React 或 Vue 基础知识，熟悉 ES6（能看懂一个 React 或 Vue 文件中 HTML 标签、CSS 代码、JS 代码之前的联系就行）
• 计算机安装了 NodeJS，听说过 npm 这个东西

操作步骤

1、环境准备

在开始介绍之前，我们要准备下开发环境，本文对开发环境有两个要求：NodeJS 环境和 Vue 环境（React的话可以直接用 npx 工具来创建项目，无需额外安装特定的工具）。如果各位没有这两个环境的话，请看下文进行安装；如果机子上有这两个环境，请跳过此节，从第二节开始阅读。

1.1、NodeJS 环境安装

1.1.1、进入到 NodeJS 官网(https://nodejs.org/en/)下载最新版的 NodeJS，此处推荐下载 LTS 版本，这是稳定的并且官方长期支持更新的一个版本。

1.1.2、下载完安装包之后，双击安装包，弹出安装界面，选择相应的安装目录后，我们一路点击【Next】按钮即可，中间过程并没有特别需要注意的地方。

1.1.3、安装完成后，我们打开命令行窗口，通过以下命令查看是否安装成功，如果出现版本号信息，则表示 NodeJS 环境安装部署成功：

node -v 
npm -v

NodeJS 和 npm 是两个紧密相关的工具，它们在 JavaScript 开发中扮演不同的角色。NodeJS 是一个基于 Chrome V8 引擎构建的 JavaScript 运行时环境，用于在服务器端运行JavaScript 代码。它提供了许多内置的 API 和功能，使开发者能够在服务器上构建高性能的网络应用程序。npm 是 NodeJS 的包管理器，是一个用于安装、管理和共享 JavaScript 代码包的工具。它是 NodeJS 生态系统中最常用的包管理工具，允许开发者从 npm 仓库中下载并安装各种 JavaScript 模块、库和工具，以便在项目中使用。关系方面，NodeJS 自带了 npm 作为其默认的包管理器。当安装 NodeJS 时，npm 也会随之安装。因此，通过 NodeJS 安装的 npm 工具可以直接在命令行中使用。通过 npm，可以轻松地安装第三方模块、库和工具，管理项目的依赖项，并在开发过程中共享和发布自己的代码包。总结来说，NodeJS 是一个 JavaScript 运行时环境，用于在服务器端运行 JavaScript 代码，而 npm 是 NodeJS 的默认包管理器，用于安装、管理和共享 JavaScript 代码包。它们密切配合，使得开发者能够更便捷地构建和管理 JavaScript 项目。

1.1.4、在此处我们安装 NodeJS 环境，说白了也是为了安装 npm 这个包管理器才进行的操作。

1.2、Vue 环境搭建

Vue 环境搭建其实就做两件事情，安装 Vue 和 Vue 脚手架工具。这两个安装都是通过 npm 来安装的。文章开始就说过，ArcGIS Maps SDK for JavaScript 在 Vue2 和 Vue3 项目中使用方式都是一模一样的，所以本文关于 Vue 项目的所有介绍都是针对于 Vue2 来展开，使用 Vue3 的小伙伴也继续阅读本文，对你学习 ArcGIS Maps SDK for JavaScript 不受任何影响。

1.2.1、打开命令行工具，通过以下两个命令来分别安装 Vue 环境和 Vue 的脚手架工具，如下：

npm install vue 
npm install -g @vue/cli

1.2.2、安装完成后，通过以下命令进行测试，出现版本号信息，则说明安装成功：

vue --version

到此处为止，我们的环境准备工作已经完成，接下来我们进入今天的正题，使用 React 和 Vue 结合 ArcGIS Maps SDK for JavaScript 来开发。

2、初始化项目demo

2.1、在合适的目录下新建文件夹，然后在此文件夹中打开命令行工具，通过以下命令来创建一个基础的 Vue 项目 demo，如下：

vue create vuejsapi414demo

以上命令使用了 Vue 的脚手架工具来初始化一个项目 demo，demo 名称为“vuejsapi414demo”，此名称可以自己随意取名。输入以上命令按回车之后，会出现项目初始化窗口，在此处需要我们选择项目中使用的插件，此处选择第一个默认的即可。

选择之后按回车，会进行插件安装和项目初始化工作。

2.2、项目初始化结束后，我们使用命令行中提示的命令进入到项目根目录，然后通过提示命令来启动项目，并且在浏览器中通过地址“localhost:8080”来查看，如下：

cd .\vuejsapi414demo 
npm run serve

2.3、此时，初始化项目操作已经完成。我们通过 vue 脚手架来创建了一个基础的 vue 项目 demo，接下来我们通过这个 demo 来介绍 ArcGIS Maps SDK for JavaScript 如何跟 Vue 结合来开发使用。

3、ArcGIS Maps SDK for JavaScript 和 Vue 结合开发

以上过程已经完成了环境安装部署和项目初始化工作，接下来就要进行 ArcGIS Maps SDK for JavaScript 的开发介绍了。

esri-loader 方式

3.1、在 Vue 项目中使用 ArcGIS Maps SDK for JavaScript 时已经不像传统的开发方式那样在 index.html 中引入 JS 和 CSS 文件来使用 ArcGIS Maps SDK for JavaScript，而是通过一个叫“esri-loader”的中间件，将我们的 ArcGIS Maps SDK for JavaScript 和 Vue 项目做一个无缝衔接。

3.2、在命令行中通过 Ctrl+C 来停止项目的运行，然后通过以下命令来安装 esri-loader，如下：

npm install esri-loader --save-dev

3.3、安装结束后，通过命令“npm run serve”重新启动项目，然后用编辑器打开我们初始化的这个项目代码，此处使用的是 VS Code 编辑器，各位可以使用 Hbuilder、SublimeText3、webStrom 等编辑器，不做强制要求。

3.4、然后打开项目根目录下的 package.json 文件，在这个文件中我们可以看到刚才安装的 esri-loader 插件，此时使用的是 V2.13.0 版本。

3.5、接下来我们就在项目根目录下的 src 文件夹中，通过修改 App.vue 这个文件夹来介绍如何在 Vue 中使用 ArcGIS Maps SDK for JavaScript 开发。如下，我们先删除 App.vue 这个文件中多余的 HTML 标签和一些 JS 代码，最后这个文件代码如下所示：

<template>
  <div id="app">
  </div>
</template>
 
<script>
export default {
  name: 'app',
}
</script>
 
<style>
#app {
 
}
</style>

3.6、在此处我们就不新建标签了，直接在id为“app”的这个 div 中来实例化一个地图。接下来我们修改下 body 标签和 id 为“app”这个 div 的标签样式。代码如下：

body {
    margin: 0;   /**主要是去除谷歌浏览器默认的8像素的外边距 */
}
#app {
    position: absolute;   /**使这个div的大小撑满整个屏幕 */
    width: 100%;
    height: 100%;
}

3.7、然后加载引入我们安装的 esri-loader 插件，如下：

import {loadModules} from 'esri-loader';

3.8、引入 esri-loader 之后，接下来就让我们的项目系统和 ArcGIS Maps SDK for JavaScript 做一个衔接。在这里大家一定要理解一个概念：我们在 Vue 中使用 JS API 时，调的接口这些还是我们传统开发调的那些接口 API，esri-loader 在这里仅仅是充当一个桥梁的作用，所以大家不要误认为 esri-loader 也是一个开发包。也就是说，你最终使用的 ArcGIS Maps SDK for JavaScript 开发包还是我们本地部署或者 ArcGIS Maps SDK for JavaScript 官网的开发包，并不是 esri-loader 里面的开发包。

做衔接之前，我们先创建一个 mounted 生命周期函数，然后在这个函数里调用创建地图的函数，代码如下：

import {loadModules} from 'esri-loader';
 
export default {
  name: 'app',
  methods: {
 
      //创建地图
      _createMapView: function() {
            const _self = this;   //定义一个_self防止后续操作中this丢失
            const option = {      //定义一个包含有JS API中js开发包和css样式文件的对象
                url: 'http://localhost/4.27/init.js',
                css: 'http://localhost/4.27/esri/themes/light/main.css',
            };
 
            //通过loadModules来做衔接
            loadModules([], option)
                .then(([]) => {
                    
                    //业务代码在此处编写
                    
                }).catch((err) => {
                    _self.$message('地图创建失败，' + err);
                });
      },
  },
  mounted: function() {
      this._createMapView();
  }
}

通过以上的代码，就将我们的项目系统代码和 ArcGIS Maps SDK for JavaScript 做了一个衔接，其实就是在我们 Vue 项目中引入了 ArcGIS Maps SDK for JavaScript。接下来进行 ArcGIS Maps SDK for JavaScript 的开发。

3.9、本文主要是通过实例化一张地图来介绍如何使用 ArcGIS Maps SDK for JavaScript 开发。接下来的操作跟我们传统的开发方式就变得类似了，先是加载相应的 ArcGIS Maps SDK for JavaScript 模块，然后在实例化各个模块，如下所示：

            //通过loadModules来做衔接
            loadModules(['esri/Map',
            'esri/views/MapView'], option)
                .then(([Map, MapView]) => {
                    
                    //业务代码在此处编写
                    const map = new Map({    //实例化地图
                        basemap: "streets"
                    });
 
                    const view = new MapView({   //实例化地图视图
                        container: "app",
                        map: map,
                        zoom: 11, 
                        center: [104.072044,30.663776] 
                    });
 
                    view.ui.components = [];   //清除掉地图左上角默认的缩放图标
                }).catch((err) => {
                    _self.$message('地图创建失败，' + err);
                });

3.10、通过以上步骤，就实例化了一张二维地图。

ES modules 方式

使用 ES modules 方式来进行 ArcGIS Maps SDK for JavaScript 的开发，其实只需要关注每个 API 模块怎么引入即可，至于引入后的使用流程跟上述介绍的一模一样，所以接下来主要看一下如何通过 ES modules 的方式引入 ArcGIS Maps SDK for JavaScript。

此时我们在 Vue 项目中就不再是通过 npm install esri-loader 的方式来安装 esri-loader 了，而是通过一下命令直接在项目中安装进去一份 ArcGIS Maps SDK for JavaScript 开发包，如下：

npm install @arcgis/core

安装完成之后就是引入各个 API 模块来进行项目开发，例如我们还是跟前文一样想实例化一张二维地图的话，还是需要引入“esri/Map”和“esri/views/MapView”模块，只不过此时引入的话就不再是具体的实例化函数方法中去通过 loadModules 去引入了。而是直接在当前 Vue 代码文件的顶部通过 import 的方式引入两个 API 模块，如下：

import Map from "@arcgis/core/Map.js"; 
import MapView from "@arcgis/core/views/MapView.js";

引入之后，后续的使用方式还是跟上文介绍的一样，直接实例化相应的模块即可实例化出一张二维地图，参考代码如下：

<template>
  <div id="app">
    
  </div>
</template>
 
<script>
import Map from "@arcgis/core/Map.js";
import MapView from "@arcgis/core/views/MapView.js";
 
export default {
  name: 'app',
  methods: {
 
      //创建地图
      _createMapView: function() {
  
            //业务代码在此处编写
            const map = new Map({    //实例化地图
                  basemap: "streets"
            });
 
            const view = new MapView({   //实例化地图视图
                  container: "app",
                  map: map,
                  zoom: 11, 
                  center: [104.072044,30.663776]
             });
 
             view.ui.components = [];   //清除掉地图左上角默认的缩放图标
      },
  },
  mounted: function() {
      this._createMapView();
  }
}
</script>
 
<style>
body {
    margin: 0;   /**主要是去除谷歌浏览器默认的8像素的外边距 */
}
#app {
    position: absolute;   /**使这个div的大小撑满整个屏幕 */
    width: 100%;
    height: 100%;
}
</style>

总结

本文沿着 Vue 基础项目 demo 搭建到 ArcGIS Maps SDK for JavaScript 的引入，并最终生成一张二维地图的过程进行了详细的介绍。本篇文章适合有一定 Vue 基础和 ArcGIS Maps SDK for JavaScript 开发基础的人员查看学习，在本文中我们通过 esri-loader 方式使用的 ArcGIS Maps SDK for JavaScript 是本地部署的 ArcGIS Maps SDK for JavaScript，大家也可以将 API 地址换成官网的，只需要修改 option 这个对象的属性值即可，类似于下面：

const option = {      //定义一个包含有JS API中js开发包和css样式文件的对象
    url: 'https://js.arcgis.com/4.27/init.js',
    css: 'https://js.arcgis.com/4.27/esri/themes/light/main.css',
};

通过修改如上的代码，就将 ArcGIS Maps SDK for JavaScript 的引用地址换成了官网地址，只不过在此处运行的时候需要注意下跨域的问题。如果遇到跨域问题，可以通过配置 Vue 的配置文件来解决，具体操作不在本文范围内，可自行百度解决。如果是通过 ES modules 的方式使用，则默认使用最新版 ArcGIS Maps SDK for JavaScript。大家在 Vue 和 ArcGIS Maps SDK for JavaScript 结合开发时如果遇到什么问题，请联系博主解答。