前沿篇：React、Angular、Vuejs等開發(fā)WebGIS系統(tǒng)介紹

本章介紹使用 React、Angular、Vuejs 三個(gè)主流前端框架（庫）來搭建開發(fā) WebGIS 系統(tǒng)，介紹通過腳手架如何快速搭建出相應(yīng)的開發(fā)環(huán)境，以及常用的組件庫可選類型有哪些。本章對(duì)初學(xué)者不友好，需要懂對(duì)應(yīng)的框架才能使用，當(dāng)然懂了這三種技術(shù)的話，本小結(jié)內(nèi)容的技術(shù)含量就很低了，所以本章不會(huì)深入介紹，主要是針對(duì)新人做簡單的介紹，使得認(rèn)識(shí)了解一下。

React 開發(fā)

React是目前前端最流行，生態(tài)最完善的前端庫，可以通過官方提供的腳手架 create-react-app 來快速創(chuàng)建，npm版本 > 5.2+ 時(shí)，可以使用下面方式快速創(chuàng)建react初始化應(yīng)用（以下命令一行表示單獨(dú)執(zhí)行一次）

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

創(chuàng)建好react-demo并啟動(dòng)成功就是一個(gè)基本的React應(yīng)用環(huán)境了。接下來我們安裝openlayers來做個(gè)簡單的地圖展示效果。

安裝openlayers模塊npm install ol （npm上命名為ol是最新版本，支持ES6 Module分包的版本，openlayers則為老版本），然后編輯src/App.js文件，如下：

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

運(yùn)行結(jié)果：

（demo源碼會(huì)給出）

如果使用 React 來開發(fā)項(xiàng)目，最佳UI庫就是ant-design 。

Angular 開發(fā)

Angular是個(gè)企業(yè)級(jí)的前端框架，創(chuàng)建應(yīng)用使用官方的angular-cli腳手架可以快速創(chuàng)建。

依次執(zhí)行下邊命令即可創(chuàng)建一個(gè)名為ng-ol-demo的應(yīng)用：

其中ng serve是angular-cli腳手架啟動(dòng)應(yīng)用的意思，ng是angular-cli的縮寫，serve是啟動(dòng)，build是構(gòu)建，更多命令見angular-cli/wiki

同樣安裝openlayers模塊npm i ol，然后編輯.\ng-ol-demo\src\app\app.component.ts 文件：

編輯.\ng-ol-demo\src\app\app.component.html 文件：

最終效果：

如果使用Angular來開發(fā)應(yīng)用，UI庫選擇有ant-design樣式的ng-zorro-antd 和 PrimeNg

Vue.js 開發(fā)

Vue.js相比以上兩者來說的優(yōu)勢(shì)是更容易上手，概念較少。一般都是新手的喜愛，國內(nèi)使用人數(shù)也不少。使用vue-cli腳手架可以快速創(chuàng)建一個(gè)名為vue-ol-demo的應(yīng)用：

安裝openlayers依賴，npm i ol，然后編輯./src/App.vue文件：

最終效果：

Vue的組件庫可以選擇ant-design-vue或iView、Element等

本章小結(jié)

本章主要介紹了React、Angular、Vuejs 三個(gè)主流前端框架（庫）來快速搭建開發(fā) WebGIS 系統(tǒng)，都是基于openlayers來簡單的創(chuàng)建地圖展示，目的只是為了了解這三大框架（庫）的特點(diǎn)和工程化的方便、可以快速開發(fā)。如果不是為了兼容IE9及以下版本的瀏覽器，現(xiàn)在的系統(tǒng)網(wǎng)頁基本都是這三種技術(shù)之一開發(fā)的。作為一個(gè)合格的前端開發(fā)工程師，熟悉其一技能也是必須的。如果文章中有錯(cuò)誤的地方歡迎指出，也歡迎留言討論。

本章所有demo源碼地址：gis616（添加備注源碼）

（持續(xù)更新中....）