I. Overview
Before very long period of time, the use of ArcGIS JS API (hereinafter referred to as "JS API") WebGIS system development time, or based on the traditional front-end framework and a variety of front-end technology to develop these frameworks and techniques you used probably there are these: Dojo, jQuery, Bootstrap, CommonJS and so on. When API to develop a framework with these traditional techniques combined with JS, JS API we have introduced is introduced by <script> and <style> tag in the HTML page of the system, it is common practice to introduce the home page (index.html) in code as follows:
<link rel="stylesheet" href="http://localhost/4.14/esri/themes/light/main.css" />
<script src="http://localhost/4.14/init.js"></script>Now, with the continuous development of front-end technology, React Vue and other front-end development technology has become a standard front-end developers, as GISer of us, without exception, in the development of many projects WebGIS system, we will go to select the current mainstream development of these technologies, which use the most is the React and Vue two. So at this paper we describe how we use Vue JS API in conjunction with our project to develop the system.
Technology II, before the start of
- Vue have some basic knowledge, familiar with the ES6 (Vue able to read a file in HTML tags, CSS code before contacting JS code on the line)
- Computer has NodeJS, heard of this thing npm
Three steps
1, environment preparation
Before the start of today's presentation, we have to prepare for the next development environment, we have two requirements for the development environment: NodeJS environment and the Vue environment. If you do not, then these two environments, see below for installation; if there are two environments on the machine, skip this section and start reading from the second.
1.1, NodeJS installation environment
1.1.1, into NodeJS official website (https://nodejs.org/en/) to download the latest version of NodeJS, download LTS version is recommended here, which is stable and long-term support version of the official update, as:
1.1.2 After downloading the installation package, double-click the installation package, the installation interface pops up, select the appropriate installation directory, the way we click [Next] button, the middle of the process and there is no particular need to pay attention.
1.1.3 After installation is complete, we open a command line window to see if the installation was successful by following command, if the version number information appears, the successful installation and deployment environment NodeJS:
node -v
npm -v
Here someone may ask NodeJS relations and npm, in fact, is javaScripe NodeJS an operating environment, it has Google V8 engine made a package, is a server-side JS interpreter. NodeJS npm is a package manager. If we use what plug-ins, you need to search in the development, download, install NodeJS environment before you can use this plug-in to complete the development of a requirement, this process is quite cumbersome. With npm package manager, we only need to run the command line, then by npm install command will need to plug a key installation project or NodeJS this environment, it is very convenient thing in the project root directory, and many big God will develop their own good npm wheels uploaded to the site above, so we need which plug directly npm install, do not need to go to search, download, install such a cumbersome process.
1.1.4, where we installed NodeJS environment, it plainly is operating in order to install this package manager npm was carried out.
1.2, Vue environment to build
Vue environment to build in fact do two things, Vue and Vue scaffolding installation tool. Both are installed by installing the npm, as detailed below:
1.2.1, open a command line tool, the following two commands are mounted scaffolding Vue Vue environment and tools, as follows:
npm install vue
npm install -g @vue/cli1.2.2, the installation is complete, perform the following command to test, version number information appears, then the installation was successful:
vue --version
Up to here, our environment preparations have been completed, then we get into today's topic, using a combination Vue JS API to develop.
2, initialize the project demo
2.1, in the appropriate directory create a new folder, and then open a command in this folder-line tool to create a foundation with the following command Vue project demo, as follows:
vue create vuejsapi414demo
The above command uses Vue scaffolding tool to initialize a project demo, demo named "vuejsapi414demo", this name can be freely own name. Enter the above command after you press Enter, the project initialization window appears, here we need to select the plug used in the project, where you can select the first default:
After selecting press Enter, the project will be plug-in installation and initialization, as follows:
2.2、项目初始化结束后，我们使用命令行中提示的命令进入到项目根目录，然后通过提示命令来启动项目，并且在浏览器中通过地址“localhost:8080”来查看，如下：
cd .\vuejsapi414demo\
npm run serve
2.3、此时，初始化项目操作已经完成。我们通过vue脚手架来创建了一个基础的vue项目demo，接下来我们通过这个demo来介绍JS API如何跟Vue结合来开发使用。
3、ArcGIS JS API和Vue结合开发
以上过程已经完成了环境安装部署和项目初始化工作，接下来就要进行JS API的开发介绍了。
3.1、在Vue项目中使用JS API时已经不像传统的开发方式那样在index.html中引入JS和CSS文件来使用JS API，而是通过一个叫“esri-loader”的中间件，将我们的JS API和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中使用JS API开发。如下，我们先删除App.vue这个文件中多余的HTML标签和一些JS代码，最后这个文件代码如下所示：
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之后，接下来就让我们的项目系统和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.9、本文主要是通过实例化一张地图来介绍如何使用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.10、通过以上步骤，就实例化了一张二维地图，最终的效果如下所示：
四、总结
本文沿着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结合开发时如果遇到什么问题，请联系博主解答。
附：
项目demo全部代码：
https://gitee.com/XuQianWen/use_of_arcgis_js_api_in_vue
App.vue全部代码：
<template>
<div id="app">
</div>
</template>
<script>
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(['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);
});
},
},
mounted: function() {
this._createMapView();
}
}
</script>
<style>
body {
margin: 0; /**主要是去除谷歌浏览器默认的8像素的外边距 */
}
#app {
position: absolute; /**使这个div的大小撑满整个屏幕 */
width: 100%;
height: 100%;
}
</style>