Vue + ArcGIS API for JavaScript 构建前端GIS应用（三）

接着上篇，继续介绍 如何编写一个组件、组件间如何通行，如何解决组件通信的一些硬伤，最终如何结合arcgis js api建立一个vue项目

传送门：
Vue + ArcGIS API for JavaScript 构建前端GIS应用（一）
Vue + ArcGIS API for JavaScript 构建前端GIS应用（二）
Vue + ArcGIS API for JavaScript 构建前端GIS应用（三）

p.s.:
配合示例代码服用效果更佳示例代码：https://github.com/GlennLuo19...

如何编写一个组件？

示例代码： https://github.com/GlennLuo19...

如何去编写一个单文件组件呢？下面使用一个简单的案例进行说明。

该组件包括一个状态count用于计数，两个按钮分别增长与减小count。

数据与事件的声明与绑定

首先，咱们要作的是组件视图层的编写，很简单的3个标签，1个div、2个button

1. 数据声明：这时候就须要在模块中新建一个data选项，在里面注册一条状态count
2. 数据绑定：使用双大括号的形式把数据绑定到标签上。
3. 方法注册：在methods选项中进行方法的注册。在方法中，咱们直接操做的是刚刚注册的count状态
4. 绑定事件：使用v-on:指令或者简写使用@，进行事件绑定

这样逻辑就完成了。方法直接操做状态，状态一旦更新，vue随即响应，对dom进行更新。
除此以外还有component、props、computed选项，在这就不作介绍了。

生命周期钩子函数

下面介绍一下重要的概念，生命周期钩子函数。

仍然用刚刚的例子去看一下生命周期钩子怎么用：
如今组件使用了created、mounted、updated三个经常使用的生命周期钩子函数，他们分别在组件建立好时执行、在组件装在完毕后执行、在组件状态更新后执行。效果请看例子。

咱们使用生命周期能够实现一些逻辑。好比组件与后台的通讯获取初始化数据就能够在mounted函数里面进行。

组件间如何通讯？

https://github.com/GlennLuo19...
某一个独立的组件很难实现一个比较完整的业务逻辑，所以组件间的通讯是不能避免的。

下面就用一个例子说明父子组件之间是如何互相传值的。

首先介绍一下例子代码的结构：

1. 在App组件包含了一个子组件parentComponent；parentComponent中包含子组件childComponent。这里就是用到了vue的component选项，就是把子组件注册进来，并做为一个标签放到temlate里面。
2. parentComponent与childComponent为父子组件关系，能够看一下页面。若是子组件想使用父组件的某个数据怎么实现呢？ 首先父组件具备一个状态msg，而后把msg做为一个参数，传给子组件。
3. 咱们在子组件中使用props选项接受到父组件传的值。这值是能够直接做为状态绑定的。
4. 演示：点击父组件
5. 子组件向父组件如何传值？首先父组件声明一个方法：获取一个数据存到本身声明的一个状态childMsg里面，而且把这个方法注册到子组件上。
6. 在子组件里面使用this.$emit方法就能够把本身的值做为参数，激发父组件挂载的事件。

两种方式是不一样的： 父组件向子组件传值是主动式的；子向父是被动式的。

可是问题来了：兄弟组件如何通讯？多层级组件之间怎么通讯？
vue的生态系统能够帮助解决以这个问题。

Vue生态系统

前面说到过，vue是一个是渐进式框架，仅仅依靠上面介绍的vue核心库很难知足一个工程项目建设的须要，同时vue原生存在的问题如：组件间通讯困难的问题难以解决。可是在vue生态系统的帮助下，让vue有能力建立一个工程应用。在这里只是对vue生态的内容进行简单的介绍，具体什么时候使用？怎么使用？会在后面的案例中进行演示。

Devtools：

浏览器插件，便于在开发中使用。

Vue Loader：

Webapck中的一个loader，用于转译.vue文件，让单页组件可用。若是是想用webpack手工进行vue工程项目配置的话，这个loader是必不可少的。

Vue Cli：

经过Vue Cli能够帮助快速开发一个vue工程项目。提供vue-cli能够交互式的、快速的搭建一个项目的脚手架。它是基于 webpack 构建，并带有合理的默认配置，减小配置时间，绕过webpack这个坑。一个丰富的官方插件集合，集成了前端生态中最好的工具。

Vue Router：

控制vue的路由。

Vuex：

状态管理机，构建全局状态和局部状态，解决组件间通讯问题。

用Vue构建前端工程项目

开发环境：

node.js
npm or yarn

IDE：

VSCode、Webstorm
介绍一下适合vue前端开发的vscode插件

项目构建：

方案：使用webpack进行vue环境配置；这里就能够应用前面谈主任提到的现代前端工具链在webpack基础上进行项目的配置，可是配置过程繁杂须要丰富的经验，容易遇到坑，影响项目启动的进度。

简化方案：使用vue生态中的vue-cli构建项目（重点介绍，并进行演示，包括使用控制台指令进行建立和使用可视化界面vue ui进行建立）；

集成GIS

示例代码： https://github.com/GlennLuo19...

如何与arcgis js api进行集成？

咱们不能在用npm安装arcgis api后直接用import的形式引用api到项目里来，由于咱们的项目是es模式的模块化规范，而arcgis api是基于Dojo框架下AMD模式创建的。因此，想要在咱们的项目中使用arcgis就必须借助其余的工具，这个工具就是esri-loader。

构建一个简单的WebGIS

综合案例：vue + vue-cli + vuex + vue router + esri-loader技术栈

这个例子实现了哪些内容：

1. 使用前端路由vue router实现了模块的切换：首页和地图模块
2. 地图模块中集成了arcgis api，使用arcgis api实现了添加图层、删除图层的功能。在这里划分了两个不一样的组件map和mapControl。使用vue的dev tools能够查看模块的划分。
3. map和mapControl是独立的两个组件，可是逻辑功能是有耦合的，须要进行组件件的通行。这里使用了vuex做为通讯方案，实现了mapControl组件对map组件的控制。

项目的代码

先来看一下项目的文件结构：

• dist文件为最终的产品文件夹
• node_modules为项目的第三方js库
• public文件夹主要存放的是html模版，最终的vue实例是被挂在在这个html上的
• src存放的是源码
• 下面以.开头的这些文件为各类插件的配置文件好比eslintrc为eslint的配置文件、babel.config.js是babel的配置文件、vue.config.js是vue-cli的配置文件
• package.json是该项目的包管理配置文件

重点看一下源码部分

• assets文件夹存放的是前端的静态资源如图片、字体等
• components用于存放划分很细的组件。
• views是存放vue中模块级别的组件，在咱们这个项目中就包括了home模块和myMap模块，也就是刚刚你们看到经过路由切换的模块。
• App.vue是最大的一个组件，最终他会在入口文件main.js中被挂到html模版上。
• router.js是写vue router的相关内容
• store.js写的是vuex的内容

从mainjs看起，这声明了一个vue实例，启用了初始化vuex和vue router，并把应用级组件app挂在html模版id是app的div上。

在app组件是一个应用的总体框架。这里有两个router-link标签，进行前端路由的跳转。router-view等因而一个占位符，表示的是某个路由对应的组件。

在router.js里面咱们能够看到/对应的是Home组件；/map对应的是MyMap组件。懒加载。

当咱们进行路由跳转时，就能够进行组件的切换。

Home组件咱们就不介绍了；重点介绍一下myMap组件

myMap里面注册两个组件：map和mapControl

在map组件里面咱们启用esri-loader，在钩子函数mounted也就是在组件装载成功后进行arcgis api map类和view类的初始化。

在最后咱们使用了initMap以及initView这两个函数，这两个是vuex中定义的mutation。

如今咱们看看一下vuex的store是如何编写的：

一个store最重要的就是state、mutation、actions这像个选项：

1. state表示状态跟vue中的data相似，这里能够理解为应用级别的data
2. mutation（转变）用来写一些改变状态的函数，要求是纯函数
3. action（动做）用来写一些业务逻辑包括一些一步过程

该项目声明了3个状态：

1. map：用于存放应用中的map实例
2. view：用于存放应用中的view实例
3. layercount：用于记录图层数量

mutation里面写个两个函数
initMap：也就是将在map组件里面实例化的map对state中的map进行初始化
initView：与map相似，就是初始化view

当这两个对象被vuex管理以后，应用里的全部组件均可以调用vuex中的mutation或者action方法加上本身的参数对地图对象进行操做了

这里在action中写了两个方法增长图层和删除全部图层。

回到mapControl组件，咱们使用的mapActions方法把vuex中的两个actions引用到组件里面，分别挂在了两个按钮的单击事件上。还能够看到咱们还将vuex中的layerCount状态绑定到了组件的标签上，它跟data同样能够响应式渲染。

总结一下：

webGIS通常是以地图为核心，咱们能够将地图对象等交给vuex进行管理，对于地图的操做逻辑也能够分离出来写在vuex中。对于其余的一些应用级别的对象也是如此。

这样咱们就能够避免了大部分的通讯问题。

最后进行一点补充：
咱们结合一些热门UI框架如element UI或者ant design能够帮我建立更好看的、交互性更好的webGIS应用。