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

Geomap

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

背景

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

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

JavaScirpt

API結(jié)合高可用、標準化、可擴展的前端Web

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

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

Geomap提供了組件化封裝的一系列GIS常用的應用功能。地圖標注/地圖糾錯三級行政區(qū)劃定位天地圖服務基于Portal的登錄/認證

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

Geomap實現(xiàn)了基于PortalItem的動態(tài)圖層服務樹，以及各圖層的開關GP分析工具

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

Geomap已實現(xiàn)功能清單地圖工具基礎地圖操作工具（Zoom，指北針，鼠標坐標，底圖庫）地圖微件（圖層列表，測量，書簽，注記，行政區(qū)劃導航）Portal驗證（用戶名登錄，clientId驗證）圖層樹及開關GP分析天地圖公交換乘路徑規(guī)劃POIGeomap關鍵技術(shù)/關鍵特色03Geomap技術(shù)迭代第一版：(2017年海圖中心項目)dva+roadhog+react --React組件與JSAPI微件體系無法互通數(shù)據(jù)第二版：(南平電子地圖)dva+roadhog+react+redux --借助于Redux中間件實現(xiàn)交互，但缺乏對IE11的支持第三版：dva+umi+react+redux+esri-loader支持IE11及Chrome/Firefox最新版本Geomap技術(shù)體系Geomap是一套完全基于現(xiàn)代前端技術(shù)棧打造的高效的開發(fā)框架，底層采用了npm作為包管理器，使用webpack來打包代碼。包管理：npm/yarn開發(fā)語言：ES6+（同時支持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ā)中應用最廣泛的打包工具。其核心特點是借助于構(gòu)建在webpack之上的針對不同文件類型的loader，將各種同類文件進行合并，簡化應用部署時的工作。

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

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

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

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

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

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

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

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

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

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