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

本文主要是介绍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应用。

这篇关于Vue + ArcGIS API for JavaScript 构建前端GIS应用（三）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！