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...

如何去编写一个单文件组件呢?下面使用一个简单的案例进行说明。
image.png
该组件包括一个状态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...
某一个独立的组件很难实现一个比较完整的业务逻辑,因此组件间的通信是不能避免的。

下面就用一个例子说明父子组件之间是如何互相传值的。
image.png
首先介绍一下例子代码的结构:

  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技术栈
image.png

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

  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应用。

阅读 1.3k

推荐阅读