Geomap-基于React組件化的一張圖系統(tǒng)開發(fā)框架

Geomap

基于React組件化的一張圖系統(tǒng)開發(fā)框架易智瑞（中國(guó)）平臺(tái)實(shí)施部李虎Geomap簡(jiǎn)介01Geomap

背景

提高團(tuán)隊(duì)開發(fā)效率，協(xié)作能力和代碼質(zhì)量

將現(xiàn)代的前端技術(shù)框架與ArcGIS

JavaScirpt

API結(jié)合高可用、標(biāo)準(zhǔn)化、可擴(kuò)展的前端Web

GIS應(yīng)用開發(fā)框架Geomap是什么Geomap是一套基于現(xiàn)代前端技術(shù)搭建的二三維一體化開發(fā)框架；借助于Babel提供的轉(zhuǎn)譯能力，支持使用ES6+/TypeScript/Flow等等高級(jí)的前端語(yǔ)言來(lái)開發(fā)應(yīng)用；同時(shí)，依托于Node.js環(huán)境下成熟的前端開發(fā)生態(tài)，支持Dev環(huán)境下的熱加載、前端代理、接口Mock等等輔助特性。Geomap采用React技術(shù)棧來(lái)開發(fā)視圖層，并嚴(yán)格遵循React所倡導(dǎo)的組件化思想來(lái)組織編碼；借助于當(dāng)下流行的MV*設(shè)計(jì)模式，充分實(shí)現(xiàn)了數(shù)據(jù)和視圖分離的架構(gòu)。Geomap基于ArcGISJSAPI4.x開發(fā)，同時(shí)未來(lái)會(huì)考慮在剝離JSAPI相關(guān)的工具函數(shù)的基礎(chǔ)上同時(shí)適配JSAPI3.x和4.x版本。Geomap成功案例年內(nèi)基于geomap開發(fā)框架，已經(jīng)實(shí)施的項(xiàng)目包括：-易智瑞深度學(xué)習(xí)之智能國(guó)土監(jiān)察平臺(tái)-橫瀝島尖城市開發(fā)數(shù)字化平臺(tái)（中交二航局）-智慧化全息測(cè)繪成果展示系統(tǒng)（上海測(cè)繪院）-北京大學(xué)地質(zhì)系統(tǒng)-三維規(guī)劃行業(yè)解決方案-華為智慧園區(qū)GIS儀表盤Geomap功能特色02風(fēng)格統(tǒng)一的地圖操作工具

Geomap基于React封裝了一系列的工具類微件，相比原生ArcGISJSAPI中提供了更加豐富的選擇，同時(shí)，所有的微件樣式保持統(tǒng)一，能輕松在項(xiàng)目中批量修改達(dá)到系統(tǒng)風(fēng)格的統(tǒng)一。基礎(chǔ)地圖操作工具（Zoom，指北針，鼠標(biāo)坐標(biāo)，底圖庫(kù)）地圖微件（圖層列表，測(cè)量，書簽，注記，行政區(qū)劃導(dǎo)航）可復(fù)用的GIS應(yīng)用功能

Geomap提供了組件化封裝的一系列GIS常用的應(yīng)用功能。地圖標(biāo)注/地圖糾錯(cuò)三級(jí)行政區(qū)劃定位天地圖服務(wù)基于Portal的登錄/認(rèn)證

Geomap實(shí)現(xiàn)了基于ArcGISPortal的用戶登錄以及基于OAuth2的ClientID驗(yàn)證。動(dòng)態(tài)的圖層服務(wù)樹

Geomap實(shí)現(xiàn)了基于PortalItem的動(dòng)態(tài)圖層服務(wù)樹，以及各圖層的開關(guān)GP分析工具

Geomap實(shí)現(xiàn)了基于ArcGISJSAPI4.x調(diào)用ArcGISGP分析Rest接口的功能，并以密度分析功能為例，實(shí)現(xiàn)了完整的GP分析應(yīng)用交互流程。

Geomap已實(shí)現(xiàn)功能清單地圖工具基礎(chǔ)地圖操作工具（Zoom，指北針，鼠標(biāo)坐標(biāo)，底圖庫(kù)）地圖微件（圖層列表，測(cè)量，書簽，注記，行政區(qū)劃導(dǎo)航）Portal驗(yàn)證（用戶名登錄，clientId驗(yàn)證）圖層樹及開關(guān)GP分析天地圖公交換乘路徑規(guī)劃POIGeomap關(guān)鍵技術(shù)/關(guān)鍵特色03Geomap技術(shù)迭代第一版：(2017年海圖中心項(xiàng)目)dva+roadhog+react --React組件與JSAPI微件體系無(wú)法互通數(shù)據(jù)第二版：(南平電子地圖)dva+roadhog+react+redux --借助于Redux中間件實(shí)現(xiàn)交互，但缺乏對(duì)IE11的支持第三版：dva+umi+react+redux+esri-loader支持IE11及Chrome/Firefox最新版本Geomap技術(shù)體系Geomap是一套完全基于現(xiàn)代前端技術(shù)棧打造的高效的開發(fā)框架，底層采用了npm作為包管理器，使用webpack來(lái)打包代碼。包管理：npm/yarn開發(fā)語(yǔ)言：ES6+（同時(shí)支持TypeScript）UI技術(shù)棧：React+Redux+Redux-Saga+AntDesignAjax：whatwg-fetch樣式：全局CSSModule（支持Less）打包工具：webpack工具：esri-loader、lodash瀏覽器兼容性：IE11、Chrome/Firefox近2年發(fā)布的版本Geomap技術(shù)架構(gòu)

基于webpack的開發(fā)與部署

Webpack是目前前端開發(fā)中應(yīng)用最廣泛的打包工具。其核心特點(diǎn)是借助于構(gòu)建在webpack之上的針對(duì)不同文件類型的loader，將各種同類文件進(jìn)行合并，簡(jiǎn)化應(yīng)用部署時(shí)的工作。

geomap通過(guò)提供dev和build兩種不同的運(yùn)行腳本分別提供高效的開發(fā)環(huán)境和編譯部署服務(wù)?；趎pm的依賴包管理

Geomap借助于Npm來(lái)進(jìn)行依賴包的管理，安裝，更新和發(fā)布?；贐abel的多語(yǔ)言能力支持

Geomap基于最新的ES6語(yǔ)言標(biāo)準(zhǔn)來(lái)開發(fā)，使用Babel在webpack上的工具鏈babel-loader來(lái)實(shí)現(xiàn)代碼轉(zhuǎn)譯。同時(shí)，Geomap配置了awesome-typescript-loader來(lái)支持使用TypeScript開發(fā)，也配置了flowtype-loader來(lái)直接開發(fā)者使用Flow語(yǔ)言開發(fā)應(yīng)用。值得一提的是，開發(fā)者甚至可以在一個(gè)工程中同時(shí)使用以上多種語(yǔ)言來(lái)開發(fā)應(yīng)用程序。高效的CSS樣式書寫方式

Geomap還預(yù)先配置了less-loader，sass-loader來(lái)支持開發(fā)者使用習(xí)慣的Less或者Sass語(yǔ)言編寫樣式表?；赗eact技術(shù)棧的Ui組件化

Geomap使用React作為UI層框架，選用了螞蟻金服開發(fā)的AntDesign作為通用控件庫(kù)。UI層代碼完全遵循React組件化的設(shè)計(jì)思想開發(fā)，可以支撐不同項(xiàng)目之間組件源代碼級(jí)別的重用。以Redex為核心的狀態(tài)管理數(shù)據(jù)流

Geomap采用了基于Redux再封裝的dva數(shù)據(jù)流框架來(lái)管理應(yīng)用的狀態(tài)，通過(guò)引入Redux的思想以及相應(yīng)的實(shí)踐，geomap實(shí)現(xiàn)了系統(tǒng)級(jí)別的數(shù)據(jù)和視圖分離架構(gòu)。瀏覽器兼容性支持

盡管Geomap引入了babel來(lái)針對(duì)ES6的新語(yǔ)法做轉(zhuǎn)譯，但是babel輸出的JS文件仍然需要瀏覽器具備一些基礎(chǔ)的實(shí)現(xiàn)。當(dāng)前前端開發(fā)中主流的解決方案是通過(guò)按需引入特定的polyfill來(lái)平滑瀏覽器之間的差異。Geomap默認(rèn)支持IE11，通過(guò)在打包時(shí)引入了以下的一些底層補(bǔ)丁包來(lái)作為應(yīng)用代碼的補(bǔ)充：Es6-promiseIe11-polyfillEs6-shimBabel-runtimeGeomap開發(fā)指南04開箱即用的前端開發(fā)體驗(yàn)

盡管geomap構(gòu)建在一套復(fù)雜的前端技術(shù)體系之上，然而，對(duì)于geomap的使用者而言，提供了開箱即用的開發(fā)體驗(yàn)。開發(fā)者在本地準(zhǔn)備geomap開發(fā)環(huán)境僅僅需要以下幾個(gè)簡(jiǎn)單的步驟：從Git克隆geomap的源代碼到本地在命令行中切換至本地源代碼目錄,cd<geomap-folder>通過(guò)npm安裝項(xiàng)目依賴工具包,npminstall/yarn啟動(dòng)本地開發(fā)服務(wù)器開發(fā)、調(diào)試代碼，npmstart/yarnstart

當(dāng)需要部署應(yīng)用程序的代碼時(shí)，更是只需要簡(jiǎn)單的一步即可完成：運(yùn)行代碼編譯命令，npmrunbuild拷貝dist目錄下的文件至tomcat/iis服務(wù)器并修改JSAPI地址等等應(yīng)用程序配置文件Geomap工程目錄Geomap前端路由默認(rèn)情況下，geomap項(xiàng)目配置為一個(gè)單頁(yè)面的SPA應(yīng)用。pages目錄下的所有j(t)sx文件會(huì)映射到不同的URL二級(jí)路徑下。由于geomap缺省采用了基于BrowserRouter的路由形式，因此，對(duì)于src/pages/pagea/index.js，映射的訪問(wèn)地址為http://<siteurl>/pagea除此之外，也可以通過(guò)配置，將路由修改為HashRouter的形式；針對(duì)上述路徑下的文件，HashRouter映射的地址為http://<siteurl>/#/pageaHTML模板geomap為項(xiàng)目中的所有路由頁(yè)面套用了一套相同的頁(yè)面模板，該模板基于ejs編寫；模板的路徑位于src/pages/document.ejs對(duì)于模板文件來(lái)說(shuō)，由于React的根節(jié)點(diǎn)會(huì)默認(rèn)mount到id為root的div上，因此，模板文件必須包含下面的這一行代碼：<divid="root"></div>Geomap頁(yè)面Geomap目前提供了豐富的系統(tǒng)級(jí)別的可展示頁(yè)面，包括地圖首頁(yè)，功能介紹，API接口介紹，開發(fā)規(guī)范以及案例展示。Geomap組件React核心設(shè)計(jì)思想就是通過(guò)組件化來(lái)分離前端不同模塊之間的耦合度。Geomap在開發(fā)中嚴(yán)格遵循了React組件化的設(shè)計(jì)思路，以達(dá)到最大程度的重用前端模塊代碼。在頁(yè)面布局容器，ArcGIS微件，PopupContent，導(dǎo)航欄，工具欄等等的設(shè)計(jì)中，都基于組件化的思路進(jìn)行了封裝，以便在不同的項(xiàng)目中重用。React提供了3種不同的組件定義的形式，包括：ES6Class(推薦) -classMyComponentextendsReact.ComponentStatelessfunction(推薦) -constMyComponent=()=>{};React.createClass -React.createClass(...);Home組件代碼示例ReduxStoregeomap使用了redux來(lái)集中管理整個(gè)應(yīng)用的狀態(tài)。由于React采用了與DOM類似的樹型結(jié)構(gòu)，使用redux使得React組件樹中每一級(jí)的組件都可以直接與ReduxStore通信，從而避免了應(yīng)用狀態(tài)在樹節(jié)點(diǎn)上的多層傳遞，簡(jiǎn)化代碼的結(jié)構(gòu)。從應(yīng)用開發(fā)的角度，geomap同時(shí)也對(duì)redux的store進(jìn)行了合理的切分，一方面讓整個(gè)程序的代碼顯得更加合理；同時(shí)也避免單個(gè)store過(guò)大而造成diff過(guò)程中不必要的性能損失。ReduxStoreagsmapsearchuser組件時(shí)序圖

Redux中間件Redux除了集中式的數(shù)據(jù)狀態(tài)管理，另一大優(yōu)勢(shì)就在于強(qiáng)大的中間件能力；眾所周知，JavaScript是一門單線程的同步執(zhí)行腳本語(yǔ)言。然而，在前后端交互時(shí)，基于xhr的請(qǐng)求提供了異步的API。前端開發(fā)中面對(duì)的一大困境就是如何有效的組織Ajax異步代碼，避免回調(diào)函數(shù)地獄(callbackhell)。對(duì)于Redux集中式的狀態(tài)管理來(lái)說(shuō)，同樣如此。針對(duì)Redux的異步狀態(tài)管理，有很多不同的中間件方案。geomap選擇了redux-saga作為針對(duì)ajax的異步中間件方案。Redux-sagaredux-saga是一個(gè)用于管理應(yīng)用程序SideEffect（副作用，例如異步獲取數(shù)據(jù)，訪問(wèn)瀏覽器緩存等）的library，它的目標(biāo)是讓副作用管理更容易，執(zhí)行更高效，測(cè)試更簡(jiǎn)單，在處理故障時(shí)更容易。簡(jiǎn)單來(lái)說(shuō)，一個(gè)saga就是一個(gè)普通的JavaScript對(duì)象，但是我們將每個(gè)saga想象成一個(gè)單獨(dú)的線程，在這個(gè)線程中獨(dú)立處理每個(gè)異步操作的副作用。redux-saga使用了ES6的Generator功能，讓異步的流程更易于讀取，寫入和測(cè)試。得益于dva對(duì)saga接口的二次封裝，我們可以用更加簡(jiǎn)單直觀的JavaScript對(duì)象形式來(lái)書寫saga的副作用。geomapmodalsgeomap將redux的store抽象為一個(gè)modal，每個(gè)modal都具有相同的結(jié)構(gòu)。state --ReduxStoresubscriptions --React-Router路由監(jiān)聽effects --Reduxsagas(異步操作)reducers --Reduxreducer(同步操作)geomap異步操作時(shí)序圖ReduxMiddlewareforArcGISJSAPI由于React虛擬DOM的特性存在，我們無(wú)法在常規(guī)的DOM操作層面讓React組件與JSAPI中的微件或其他交互進(jìn)行數(shù)據(jù)互通，同樣需要借助于Redux中間件的能力。在Geomap中使用JSAPI微件React為JSAPI內(nèi)置的微件提供承載的容器，從而直接在應(yīng)用中使用JSAPI微件；包括微件的UI和邏輯，React側(cè)不提供任何業(yè)務(wù)邏輯，僅僅在需要時(shí)提供容器的樣式。（適用于圖層列表，測(cè)量，圖例等功能完整，交互復(fù)雜的微件）在Geomap中開發(fā)微件UI盡管在Geomap中直接使用JSAPI封裝的微件在某種程度上簡(jiǎn)化了開發(fā)者的工作，然而這種模式也存在一定的不足；主要是無(wú)法在系統(tǒng)層面保持微件樣式與系統(tǒng)風(fēng)格的統(tǒng)一，對(duì)于微件的UX操作缺少定制化能力。相比較而言，我們更推薦采用React開發(fā)微件的UI，同時(shí)重用JSAPI微件的ViewModel層邏輯；得益于JSAPI4.x優(yōu)秀的MVVM架構(gòu)，開發(fā)者可以只需要專注在UI交互層的開發(fā)上，無(wú)需重復(fù)開發(fā)通用的微件業(yè)務(wù)邏輯。Geomap采用這種方式開發(fā)了眾多的微件，這些微件提供了更好的UI交互體驗(yàn)，以及統(tǒng)一的系統(tǒng)級(jí)樣式。包括：Zoom，Home，GoTo，Compass，Measure，BasemapGallery，Measure3D，Overview，NavigationToggle，F(xiàn)ullScreen，MousePoint等等。給予開發(fā)者即拿即用的能力。Home微件代碼示例Geomap中的GP分析ArcGISJSAPI4x一直以來(lái)缺少像3x版本中那樣直接提供的用于常用GP分析工具的微件。因此，在基于4.x開發(fā)的應(yīng)用中如果要引入分析的功能，開發(fā)者需要自行開發(fā)從UI，交互，到數(shù)據(jù)組織，RestAPI請(qǐng)求流程等等一系列工作。Geomap開發(fā)了基于密度分析的GP分析功能，包括分析工具參數(shù)面板，Portal對(duì)象選擇器，Rest請(qǐng)求工作流，為開發(fā)者提供了很好的指引。Geomap中的密度分析GP密度分析GPRest接口請(qǐng)求流程1.獲取當(dāng)前用戶的組織信息2.檢查用戶輸入的output名稱是否可用3.調(diào)用createService接口在用戶目錄下創(chuàng)建一個(gè)空要素服務(wù)4.調(diào)用GPRest服務(wù)的submitJob接口提交分析參數(shù)5.檢查和更新Job相關(guān)的參數(shù)到已創(chuàng)建的PortalItem6.循環(huán)檢查Job狀態(tài)直至不再顯示esriJobExecuting7.調(diào)用PortalItem的addResources接口更新任務(wù)執(zhí)行后的結(jié)果8.調(diào)用GPRest服務(wù)的resultLayer接口關(guān)聯(lián)執(zhí)行后的結(jié)果服務(wù)地址9.更新PortalItem中Job關(guān)聯(lián)的信息10.調(diào)用PortalItem的refresh接口刷新結(jié)果服務(wù)Geomap編碼指引geomap-codestyle/yanwh/geomap-codestyleGeomap靜態(tài)代碼檢查規(guī)范Geomap使用eslint來(lái)進(jìn)行靜態(tài)代碼檢查，我們定義了一套針對(duì)geomap項(xiàng)目的靜態(tài)代碼檢查規(guī)則，并作為eslint的可共享配置項(xiàng)目發(fā)布在npm上。這樣可以保證所有基于geomap開發(fā)的項(xiàng)目都具有統(tǒng)一的代碼檢查規(guī)則。eslint-config-geomap項(xiàng)目將會(huì)保持獨(dú)立迭代，未來(lái)當(dāng)該配置發(fā)生更新，開發(fā)者只需要及時(shí)更新工程中的依賴項(xiàng)版本至最新版本，即可與其他所有的開發(fā)人員保持統(tǒng)一。yarnupgradeeslint-config-geomap--latestGeomap愿景05geomap-utils盡管geomap基于react技術(shù)棧打造，但出于以下的考慮，我們?nèi)匀粚eomap中的工具類函數(shù)獨(dú)立的剝離出來(lái)，并打造了一個(gè)單獨(dú)的項(xiàng)目geomap-utils借助于geomap多個(gè)項(xiàng)目的積累，將可以形成一套可公用的工具類庫(kù)；未來(lái)，不僅僅為geomap項(xiàng)目，同時(shí)也應(yīng)該能為基于其他技術(shù)棧打造的項(xiàng)目所使用，比如dojo，jquery或其他類型的項(xiàng)目通過(guò)在geomap項(xiàng)目中合理的抽象和分離，使得geomap成為一個(gè)與JSAPI版本無(wú)關(guān)的應(yīng)用，當(dāng)需要時(shí)可以在最大化重用UI的基礎(chǔ)上，實(shí)現(xiàn)底層JSAPI版本甚至3.x和4.x的無(wú)縫切換geomap-utilsgeomap-utils目前已經(jīng)剝離并作為一個(gè)單獨(dú)的項(xiàng)目來(lái)開發(fā)；該項(xiàng)目基于ES6編寫，使用babel轉(zhuǎn)譯；同時(shí)采用了前端工具類庫(kù)常用的rollup來(lái)打包，該項(xiàng)目將輸出4種不同版本的類庫(kù)geomap-utils.js --常規(guī)的UMD風(fēng)格，支持require，script標(biāo)簽geomap-utils.min.js --經(jīng)過(guò)uglify壓縮的UMD風(fēng)格代碼geomap-utils.es6.js --ES6模塊風(fēng)格的代碼，用于未來(lái)發(fā)布到NPMmon.js --CommonJS風(fēng)格的代碼，用于Node環(huán)境geomap-utils開發(fā)路線geomap-utils定位于官方JSAPI的補(bǔ)充，將彌補(bǔ)JSAPI4.x版本中部分常用功能的缺失，未來(lái)