本文主要介绍如何在Vue项目中使用ArcGISJSAPI进行开发。本文使用的JSAPI是最新版本的ArcGISJSAPI4.14。主要用于vue项目demo。API实例化2D地图。概述长期以来，在使用ArcGISJSAPI（以下简称“JSAPI”）开发WebGIS系统时，仍然是基于传统的前端框架和各种前端技术进行开发。这些框架和技术你都用过大概有这些：Dojo、jQuery、Bootstrap、CommonJS等，在使用这些传统的技术框架结合JSAPI进行开发时，我们在首页介绍了系统中的JSAPI（索引.html），代码如下：目前，随着前端技术的不断发展，WebGIS、Vue等React前端开发技术已经成为前端开发者的标配。作为GISer，我们也不例外。在开发很多WebGIS项目系统的时候，我们都会选择这些目前主流的开发技术。其中使用最多的两个是React和Vue。所以这篇文章主要介绍我们如何使用Vue结合JSAPI来开发我们的项目系统。入手前的技术基础有一定的Vue基础知识，熟悉ES6（了解一个Vue文件中HTML标签、CSS代码、JS代码之间的联系即可）。电脑上安装了NodeJS，听说过npm。在今天介绍之前，我们需要先准备好开发环境。本文对开发环境有两个要求：NodeJS环境和Vue环境。如果您没有这两个环境，请阅读以下内容进行安装；如果你的机器上有这两种环境，请跳过本节，从第二节开始阅读。NodeJS环境安装1.1.1，进入NodeJS官网（https://nodejs.org/en/）下载最新版本的NodeJS，这里推荐下载LTS版本，官方长期稳定支持更新版本，如图：1.1.2。下载安装包后，双击安装包，弹出安装界面。选择好对应的安装目录后，我们就可以一路点击【Next】按钮了。中间过程没有特别注意。1.1.3.安装完成后，我们打开命令行窗口，使用如下命令查看是否安装成功。如果出现如下版本号信息，说明NodeJS环境安装部署成功：node-vnpm-v这里可能有人会问NodeJS和npm的关系，其实NodeJS是javaScripe的一个运行环境，它封装了谷歌V8引擎，是一个服务器端的JS解释器。npm是NodeJS的包管理器。如果我们在开发中要使用任何插件，需要在NodeJS环境中搜索、下载并安装，然后才能使用该插件进行开发，完成某个需求。这个过程相当繁琐。有了npm包管理器，我们只需要在项目根目录下运行命令行，然后使用npm安装命令就可以一键将需要的插件安装到项目或NodeJS环境中。这是一件很方便的事情，而且很多高手都把自己开发的轮子上传到了npm网站上，这样我们需要什么插件就可以直接从npm上安装，省去了搜索、下载、安装的麻烦过程。1.1.4.这里我们安装NodeJS环境。说白了就是为了安装包管理器npm。Vue环境搭建Vue环境搭建其实做了两件事，安装Vue和Vue脚手架工具。这两个安装都是通过npm安装的。详细过程如下：1.2.1．打开命令行工具，通过以下两条命令安装Vue环境和Vue的脚手架工具，如下：npminstallvuenpminstall-g@vue/cli1.2.2。安装完成后，用如下命令测试，如果出现版本号信息，则表示安装成功：vue--version至此，我们的环境准备就完成了，我们今天进入的主题是使用Vue结合JSAPI开发。初始化项目demo2.1，在合适的目录下新建一个文件夹，然后在该文件夹下打开命令行工具，使用如下命令创建一个基本的Vue项目demo，如下：vuecreatevuejsapi414demo以上命令使用了Vue脚手架初始化项目demo的工具，demo的名称为“vuejsapi414demo”，可以随意命名。输入以上命令并回车后，会出现工程初始化窗口。这里我们需要选择项目中使用的插件。这里我们可以选择第一个默认的：选择后回车，会进行插件安装和项目初始化工作如下：2.2．项目初始化完成后，我们使用命令行提示的命令进入项目根目录，然后通过提示命令启动项目，在浏览器中通过地址“localhost:8080”查看：2.3.至此，初始化项目操作已经完成。我们通过vue脚手架创建了一个基本的Vue项目demo，然后我们通过这个demo来介绍如何将JSAPI与Vue结合起来进行开发和使用。ArcGISJSAPI与Vue联合开发以上过程完成了环境安装部署和项目初始化工作，接下来介绍JSAPI的开发。3.1.在Vue项目中使用JSAPI时，并不像传统的开发方式那样在index.html中引入JS和CSS文件。JSAPI和Vue项目无缝对接。3.2.在命令行使用Ctrl+C停止项目的运行，然后通过以下命令安装esri-loader，如下：npminstallesri-loader--save-dev3.3。安装完成后，使用命令npmrunserve重启启动项目，然后使用编辑器打开我们初始化的项目代码。这里使用VSCode编辑器。可以使用Hbuilder、SublimeText3、webStrom等编辑器，没有强制要求，如下：3.4、然后打开项目根目录下的package.json文件，在这个文件中我们可以看到esri-loader插件-在刚刚安装的，使用的是V2.13.0版本，如下图：3.5，接下来我们在项目根目录下的src文件夹中，修改App.vue文件夹，介绍如何在Vue中使用JSAPI开发.如下，我们先删除App.vue文件中多余的HTML标签和一些JS代码，最后这个文件的代码如下：3.6.这里我们不新建标签，直接在id为“app”的div中实例化一张地图。接下来，我们修改id为“app”的div的body标签和标签样式。代码如下：body{margin:0;/\*\*主要是去掉谷歌浏览器默认的8像素边距\*/}#app{position:absolute;/\*\*使这个div的大小满整个屏幕\*/width:100%;高度：100%；}3.7。然后加载导入我们安装的esri-loader插件，如下：import{loadModules}from'esri-loader';3.8.导入esri-loader后，接下来，让我们的项目系统和JSAPI建立连接。这里你必须明白一个概念：当我们在Vue中使用JSAPI时，我们调整的接口仍然是我们传统开发和调整的那些接口API。esri-loader在这里只是起到了桥梁的作用，所以请不要误以为esri-loader也是一个开发包。也就是说你最终使用的JSAPI开发包是我们本地部署或者JSAPI官网的开发包，而不是esri-loader中的开发包。在连接之前，我们先创建一个mounted生命周期函数，然后在这个函数中调用创建地图的函数，代码如下：import{loadModules}from'esri-loader';exportdefault{name:'app',methods:{//创建地图\_createMapView:function(){const\_self=this;//定义一个\_self，防止this在后续操作中丢失constoption={//在JSAPIObject中定义一个包含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);});},},安装:function(){this.\_createMapView();通过上面的代码，我们把我们的项目系统代码和JSAPI打通了，其实就是在我们的Vue项目中导入了JSAPI。接下来，开发JSAPI。3.9.本文主要介绍如何通过实例化一张地图来使用JSAPI开发。接下来的操作和我们传统的开发方式差不多。首先加载对应的JSAPI模块，然后实例化各个模块，如下图：//通过loadModules连接loadModules(\['esri/Map','esri/views/MapView'\],option).then((\[Map,MapView\])=>{//业务代码写在这里constmap=newMap({//实例化地图底图:"streets"});constview=newMapView({//实例化地图视图容器:"app",map:map,zoom:11,center:\[104.072044,30.663776\]});view.ui.components=\[\];//清除左上角的默认缩放图标map}).catch((err)=>{_self.$message('地图创建失败，'+err);});3.10、通过以上步骤实例化了一个二维地图，最终效果如下：本文详细介绍了从构建Vue基础项目demo到引入JSAPI，最后生成二维地图的过程。本文适合有一定Vue基础和JSAPI开发基础的人查看学习。我们在本文中使用的JSAPI是本地部署的JSAPI。也可以将API地址改成官网。只需要修改option对象的属性值即可，类似如下：constoption={//在JSAPI中定义一个包含js开发包和css样式文件的对象url:'https://js.arcgis.com/4.14/init.js',css:'https://js.arcgis.com/4.14/esri/themes/light/main.css'};通过修改以上代码，将JSAPI的引用地址替换为官网地址，但是这里运行时需要注意跨域问题。如果遇到跨域问题，可以通过配置vue配置文件来解决。具体操作不在本文讨论范围内，自行百度解决。如果大家在Vue和JSAPI一起开发的时候遇到什么问题，欢迎联系博主解答。
