前沿篇：React、Angular、Vuejs等开发WebGIS系统介绍

本章介绍使用 React、Angular、Vuejs 三个主流前端框架（库）来搭建开发 WebGIS 系统，介绍通过脚手架如何快速搭建出相应的开发环境，以及常用的组件库可选类型有哪些。本章对初学者不友好，需要懂对应的框架才能使用，当然懂了这三种技术的话，本小结内容的技术含量就很低了，所以本章不会深入介绍，主要是针对新人做简单的介绍，使得认识了解一下。

React 开发

React是目前前端最流行，生态最完善的前端库，可以通过官方提供的脚手架 create-react-app 来快速创建，npm版本 > 5.2+ 时，可以使用下面方式快速创建react初始化应用（以下命令一行表示单独执行一次）

npm低于5.2版本的话使用以下方式

创建好react-demo并启动成功就是一个基本的React应用环境了。接下来我们安装openlayers来做个简单的地图展示效果。

安装openlayers模块npm install ol （npm上命名为ol是最新版本，支持ES6 Module分包的版本，openlayers则为老版本），然后编辑src/App.js文件，如下：

样式文件./src/index.css 如下：

运行结果：

（demo源码会给出）

如果使用 React 来开发项目，最佳UI库就是ant-design 。

Angular 开发

Angular是个企业级的前端框架，创建应用使用官方的angular-cli脚手架可以快速创建。

依次执行下边命令即可创建一个名为ng-ol-demo的应用：

其中ng serve是angular-cli脚手架启动应用的意思，ng是angular-cli的缩写，serve是启动，build是构建，更多命令见angular-cli/wiki

同样安装openlayers模块npm i ol，然后编辑.\ng-ol-demo\src\app\app.component.ts 文件：

编辑.\ng-ol-demo\src\app\app.component.html 文件：

最终效果：

如果使用Angular来开发应用，UI库选择有ant-design样式的ng-zorro-antd 和 PrimeNg

Vue.js 开发

Vue.js相比以上两者来说的优势是更容易上手，概念较少。一般都是新手的喜爱，国内使用人数也不少。使用vue-cli脚手架可以快速创建一个名为vue-ol-demo的应用：

安装openlayers依赖，npm i ol，然后编辑./src/App.vue文件：

最终效果：

Vue的组件库可以选择ant-design-vue或iView、Element等

本章小结

本章主要介绍了React、Angular、Vuejs 三个主流前端框架（库）来快速搭建开发 WebGIS 系统，都是基于openlayers来简单的创建地图展示，目的只是为了了解这三大框架（库）的特点和工程化的方便、可以快速开发。如果不是为了兼容IE9及以下版本的浏览器，现在的系统网页基本都是这三种技术之一开发的。作为一个合格的前端开发工程师，熟悉其一技能也是必须的。如果文章中有错误的地方欢迎指出，也欢迎留言讨论。

本章所有demo源码地址：gis616（添加备注源码）

（持续更新中....）