Vue中使用ArcGIS JS API 4.14开发

本文主要介绍如何在Vue项目中使用ArcGIS JS API进行开发，文中使用的JS API是目前最新版本的ArcGIS JS API 4.14，主要是在Vue项目demo中用JS API实例化了一张二维地图。

概述

在以前很长的一段时间中，使用ArcGIS JS API(如下简称“JS API”)开发WebGIS系统的时候，仍是基于传统的前端框架和各类前端技术来开发，这些框架和技术各位使用过的大概有这些：Dojo、jQuery、Bootstrap、CommonJS等。用这些传统的技术框架结合JS API去开发的时候，咱们引入JS API是在系统是在主页(index.html)中引入，代码以下所示：
<link rel="stylesheet" href="http://localhost/4.14/esri/themes/light/main.css" />
<script src="http://localhost/4.14/init.js"></script>

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

开始前的技术基础

• 有必定的Vue基础知识，熟悉ES6(能看懂一个Vue文件中HTML标签、CSS代码、JS代码以前的联系就行)
• 计算机安装了NodeJS,据说过npm这个东西

环境准备

在开始今天的介绍以前，咱们要准备下开发环境，本文对开发环境有两个要求：NodeJS环境和Vue环境。若是各位没有这两个环境的话，请看下文进行安装；若是机子上有这两个环境，请跳过此节，从第二节开始阅读。

NodeJS环境安装

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

1.1.二、下载完安装包以后，双击安装包，弹出安装界面，选择相应的安装目录后，咱们一路点击【Next】按钮便可，中间过程并无特别须要注意的地方。
1.1.三、安装完成后，咱们打开命令行窗口，经过如下命令查看是否安装成功，若是出现如下版本号信息，则表示NodeJS环境安装部署成功：

node -v
npm -v

在这里可能有人会问NodeJS和npm的关系，其实NodeJS就是javaScripe的一个运行环境，它对谷歌V8引擎作了封装，是一个服务器端的JS解释器。npm是NodeJS的一个包管理器。咱们在开发时若是要用到什么插件，须要先搜索、下载、安装到NodeJS环境中，而后才可使用这个插件来开发完成某个需求，这个过程是至关繁琐的。有了npm包管理器，咱们只须要在项目根目录下运行命令行，而后经过npm的安装命令将须要的插件一键安装到此项目或者NodeJS环境中，这是很是便捷的一件事情，并且不少大神将本身开发好的轮子上传到了npm网站上面，因此咱们须要哪一个插件，直接npm安装便可，不须要再去进行搜索、下载、安装这么麻烦的过程。
1.1.四、在此处咱们安装NodeJS环境，说白了也是为了安装npm这个包管理器才进行的操做。

Vue环境搭建

Vue环境搭建其实就作两件事情，安装Vue和Vue脚手架工具。这两个安装都是经过npm来安装的，详细过程以下：
1.2.一、打开命令行工具，经过如下两个命令来分别安装Vue环境和Vue的脚手架工具，以下：

npm install vue
npm install -g @vue/cli

1.2.二、安装完成后，经过如下命令进行测试，出现版本号信息，则说明安装成功：

vue --version

到此处为止，咱们的环境准备工做已经完成，接下来咱们进入今天的正题，使用Vue结合JS API来开发。

初始化项目demo

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

vue create vuejsapi414demo

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

选择以后按回车，会进行插件安装和项目初始化工做，以下：

2.二、项目初始化结束后，咱们使用命令行中提示的命令进入到项目根目录，而后经过提示命令来启动项目，而且在浏览器中经过地址“localhost:8080”来查看：

2.三、此时，初始化项目操做已经完成。咱们经过vue脚手架来建立了一个基础的vue项目demo，接下来咱们经过这个demo来介绍JS API如何跟Vue结合来开发使用。

ArcGIS JS API和Vue结合开发

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

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

3.二、在命令行中经过Ctrl+C来中止项目的运行，而后经过如下命令来安装esri-loader，以下：

npm install esri-loader --save-dev

3.三、安装结束后，经过命令npm run serve从新启动项目，而后用编辑器打开咱们初始化的这个项目代码，此处使用的是VS Code编辑器，各位可使用Hbuilder、SublimeText三、
webStrom等编辑器，不作强制要求，以下：

3.四、而后打开项目根目录下的package.json文件，在这个文件中咱们能够看到刚才安装的esri-loader插件，此时使用的是V2.13.0版本，以下所示：

3.五、接下来咱们就在项目根目录下的src文件夹中，经过修改App.vue这个文件夹来介绍如何在Vue中使用JS API开发。以下，咱们先删除App.vue这个文件中多余的HTML标签和一些JS代码，最后这个文件代码以下所示：

3.六、在此处咱们就不新建标签了，直接在id为“app”的这个div中来实例化一个地图。接下来咱们修改下body标签和id为“app”这个div的标签样式。代码以下：
body {
margin: 0;   /\*\*主要是去除谷歌浏览器默认的8像素的外边距 \*/
}
#app {
position: absolute;   /\*\*使这个div的大小撑满整个屏幕 \*/
width: 100%;
height: 100%;
}

3.七、而后加载引入咱们安装的esri-loader插件，以下：

import {loadModules} from 'esri-loader';

3.八、引入esri-loader以后，接下来就让咱们的项目系统和JS API作一个衔接。在这里你们必定要理解一个概念：咱们在Vue中使用JS API时，调的接口这些仍是咱们传统开发调的那些接口API，esri-loader在这里仅仅是充当一个桥梁的做用，因此你们不要误认为esri-loader也是一个开发包哈。也就是说，你最终使用的JS API开发包仍是咱们本地部署或者JS API官网的开发包，并非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.14/init.js',
css: 'http://localhost/4.14/esri/themes/light/main.css',
};

//经过loadModules来作衔接
loadModules(\[\], option)
.then((\[\]) => {

//业务代码在此处编写
}).catch((err) => {
_self.$message('地图建立失败，' + err);
});
},
},

mounted: function() {
this.\_createMapView();
}
}

经过以上的代码，就将咱们的项目系统代码和JS API作了一个衔接，其实就是在咱们Vue项目中引入了JS API。接下来进行JS API的开发。

3.九、本文主要是经过实例化一张地图来介绍如何使用JS API开发。接下来的操做跟咱们传统的开发方式就变得相似了，先是加载相应的JS API模块，而后在实例化各个模块，以下所示：

//经过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.十、经过以上步骤，就实例化了一张二维地图，最终的效果以下所示：

本文沿着Vue基础项目demo搭建到JS API的引入，并最终生成一张二维地图的过程进行了详细的介绍。本篇文章适合有必定Vue基础和JS API开发基础的人员查看学习，在本文中咱们使用的JS API是本地部署的JS API，你们也能够将API地址换成官网的，只须要修改option这个对象的属性值便可，相似于下面：
const option = {      //定义一个包含有JS API中js开发包和css样式文件的对象
url: 'https://js.arcgis.com/4.14/init.js',
css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css'};

经过修改如上的代码，就将JS API的引用地址换成了官网地址，只不过在此处运行的时候须要注意下跨域的问题。若是遇到跨域问题，能够经过配置Vue的配置文件来解决，具体操做不在本文范围内，可自行百度解决。你们在Vue和JS API结合开发时若是遇到什么问题，请联系博主解答。