基于TypeScript的WebGIS地圖接口庫設(shè)計(jì)與實(shí)現(xiàn)

楊益文

（1.上海市測繪院，上海 200063）

隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，WebGIS新技術(shù)層出不窮，基于WebGIS應(yīng)用構(gòu)建系統(tǒng)已成為用戶首選。地理信息各軟件平臺(tái)廠商在優(yōu)化軟件的同時(shí)，不斷迭代開發(fā)更新專有的WebGIS地圖開發(fā)接口庫，經(jīng)過多年技術(shù)積累和新技術(shù)迭代發(fā)展，平臺(tái)地圖Web開發(fā)庫日趨龐大和復(fù)雜?；ヂ?lián)網(wǎng)地圖在互聯(lián)網(wǎng)技術(shù)變革下快速發(fā)展成熟壯大，具有地圖內(nèi)容更新快、功能豐富、簡單易用等特點(diǎn)，受到許多用戶追捧。ArcGIS JS API是Esri公司推出的新一代WebGIS地圖開發(fā)接口庫[1]，是完整的企業(yè)級WebGIS開發(fā)庫，其接口之豐富、數(shù)量之多、功能之強(qiáng)大，足以滿足企業(yè)級WebGIS應(yīng)用開發(fā)的需求；但其核心本質(zhì)是多年Web技術(shù)的累積，因此開發(fā)門檻高、學(xué)習(xí)成本高、入門難，遠(yuǎn)不及當(dāng)前日漸成熟的互聯(lián)網(wǎng)地圖簡單實(shí)用。

為了降低基于ArcGIS的WebGIS應(yīng)用開發(fā)難度以及開發(fā)人員的入門門檻，本文采用主流TypeScript Web開發(fā)語言，遵循面向?qū)ο?、面向模塊的開發(fā)理念[2]，對ArcGIS JS API進(jìn)行二次封裝，使封裝后的地圖接口具有高內(nèi)聚、低耦合[3]、輕量、簡潔、易用等特性，同時(shí)能按需實(shí)現(xiàn)復(fù)雜業(yè)務(wù)定制。

1 設(shè)計(jì)思路

根據(jù)互聯(lián)網(wǎng)地圖的設(shè)計(jì)模式[4-8]，本文基于ArcGIS JS API利用TypeScrpt封裝構(gòu)建地圖接口核心庫，再圍繞核心庫按需、按功能、按業(yè)務(wù)擴(kuò)展構(gòu)建地圖插件庫，然后編譯混淆地圖接口核心庫和插件庫，最后通過NPM版本化管理分發(fā)交付用戶使用。

1）通過調(diào)研、分析、測試和使用高德、百度等互聯(lián)網(wǎng)地圖文檔、編程接口、開發(fā)示例和應(yīng)用體驗(yàn)，整體把握互聯(lián)網(wǎng)地圖設(shè)計(jì)的特點(diǎn)、思路和方向；結(jié)合企業(yè)級ArcGIS JS API架構(gòu)特點(diǎn)，構(gòu)建Smap地圖接口核心庫[9-10]。

2）Smap地圖接口核心庫以細(xì)粒度ArcGIS JS API為底層庫，緊密結(jié)合時(shí)空地理信息服務(wù)資源，按需組織服務(wù)和業(yè)務(wù)層，可接入地圖資源服務(wù)層權(quán)限管控系統(tǒng)，實(shí)現(xiàn)核心庫和資源層按需緊密定制和授權(quán)，從地圖接口庫層滿足服務(wù)層授權(quán)和內(nèi)容定制需求。

3）圍繞地圖接口核心庫和用戶需求，構(gòu)建擴(kuò)展地圖接口插件庫；通過擴(kuò)展地圖接口插件庫，實(shí)現(xiàn)Smap地圖功能接口無限擴(kuò)展，以滿足用戶靈活多變的需求，同時(shí)可保持核心庫的簡潔、靈活和穩(wěn)定。

2 關(guān)鍵技術(shù)

2.1 ArcGIS JS API

ArcGIS API for Javascript是Esri公司推出的基于開源Javascript Dojo工具包[11]開發(fā)的WebGIS地圖開發(fā)接口庫，可結(jié)合ArcGIS Enterprise與開源GIS平臺(tái)，搭建開發(fā)運(yùn)行在瀏覽器中各專題、場景的專業(yè)二三維一體化WebGIS應(yīng)用[12]。

2.2 TypeScript

TypeScript是由微軟開發(fā)的開源、跨平臺(tái)網(wǎng)絡(luò)編程語言[13]，是Javascript的超集。其本質(zhì)是向該語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊?，通過擴(kuò)展Javascript的語法，使得現(xiàn)有的Javascript程序均可在TypeScript環(huán)境中運(yùn)行。TypeScript也可為已存在的Javascript庫添加類型信息的頭文件，擴(kuò)展其對于流行的庫支持。TypeScript必將是未來Web技術(shù)主流開發(fā)語言[14]。

2.3 Node Package Manager

Node Package Manager（NPM）是NodeJS包管理和分發(fā)工具。通過NPM管理機(jī)制實(shí)現(xiàn)基于Javascript包的編譯、混淆、打包、上傳和分發(fā)；基于NodeJS網(wǎng)絡(luò)應(yīng)用可統(tǒng)一通過NPM分發(fā)管理機(jī)制實(shí)現(xiàn)包的下載、引用和調(diào)用[15]。

3 Smap地圖接口庫架構(gòu)與工作流程

3.1 地圖接口庫架構(gòu)

根據(jù)互聯(lián)網(wǎng)地圖設(shè)計(jì)模式，為保證地圖架構(gòu)輕量、簡潔、易用，Smap地圖接口核心庫架構(gòu)以TypeScript模塊為構(gòu)件單元，構(gòu)建Smap作為地圖接口庫核心輸出單元，并在Smap模塊中構(gòu)建Map、Layers、Control、OverLayers等地圖內(nèi)容功能部件。Map是地圖接口庫的核心對象，通過Map實(shí)例化實(shí)現(xiàn)地圖初始化、圖層加載渲染表達(dá)展示、地圖應(yīng)用控件交互和地圖行為事件等內(nèi)容。Layers是構(gòu)成Map內(nèi)容的核心層，地圖內(nèi)容展示均通過該圖層來實(shí)現(xiàn)，也可支持圖層擴(kuò)展開發(fā)，實(shí)現(xiàn)自定義和多平臺(tái)服務(wù)圖層定義接入。Control是Map對象的核心控件層，可按需定制、加載使用各種業(yè)務(wù)類型地圖控件。OverLayers是Map對象的核心覆蓋層，可為Map對象定制Mark、Polyline、Polygon等多種類型的覆蓋層，并可按需擴(kuò)展實(shí)現(xiàn)。

Smap地圖接口插件庫同樣參照互聯(lián)網(wǎng)地圖設(shè)計(jì)模式，獨(dú)立于地圖接口核心庫設(shè)計(jì)，但可圍繞地圖接口核心庫按功能進(jìn)行定制擴(kuò)展開發(fā)，在使用過程中按需加載即可。 本文設(shè)計(jì)了數(shù)據(jù)可視化展示庫和通用功能擴(kuò)展組件庫兩組Smap擴(kuò)展插件庫，其中數(shù)據(jù)可視化展示庫可實(shí)現(xiàn)地理數(shù)據(jù)可視化定制表達(dá)；通用功能擴(kuò)展組件庫中集成了與核心庫獨(dú)立的通用功能，包括Trajectory軌跡路徑回放、MigrationMap遷移圖、MapRoam漫游等通用接口模塊，后期可按需、按業(yè)務(wù)進(jìn)行再擴(kuò)展，豐富了基于地圖接口核心庫的擴(kuò)展功能接口集。

3.2 工作流程

地圖接口核心庫的工作流程也是地圖全生命周期過程，用戶通過NPM分發(fā)下載安裝核心庫，在網(wǎng)絡(luò)開發(fā)應(yīng)用中引用Smap地圖接口模塊包，通過設(shè)置屬性控制參數(shù)初始化Map對象。Map對象首先需通過認(rèn)證標(biāo)識到地圖服務(wù)資源認(rèn)證服務(wù)器，并獲取資源認(rèn)證密鑰；再根據(jù)授權(quán)控制授權(quán)賬號信息，獲取圖層和地圖控件定制授權(quán)詳細(xì)配置信息；然后根據(jù)獲取的圖層和地圖控件配置詳細(xì)信息，初始化地圖圖層和地圖UI控件層，實(shí)現(xiàn)地圖內(nèi)容初始化和地圖事件暴露；最后應(yīng)用層可根據(jù)Map對象，進(jìn)行地圖內(nèi)容控制和業(yè)務(wù)功能定制。工作流程如圖1所示。

圖1 工作流程圖

4 地圖接口模塊

地圖接口庫包括Smap地圖接口核心庫、基于核心庫的Smap數(shù)據(jù)可視化展示庫和Smap通用功能擴(kuò)展組件庫。地圖接口核心庫是地圖構(gòu)建的基礎(chǔ)，集成了地圖內(nèi)容、控件、操作和事件，是構(gòu)建地圖應(yīng)用最基本的依賴；數(shù)據(jù)可視化展示庫是面向地圖數(shù)據(jù)的可視化展示應(yīng)用庫，是地圖展示內(nèi)容最好的表達(dá)；通用功能擴(kuò)展組件庫是通用功能的集合。這些模塊相互組合使用，可構(gòu)建面向空間的地理數(shù)據(jù)地圖應(yīng)用，并可與業(yè)務(wù)系統(tǒng)相集成，滿足企業(yè)級用戶基于WebGIS的地理空間大數(shù)據(jù)展示、分析、可視化的應(yīng)用需求，提升了業(yè)務(wù)系統(tǒng)應(yīng)用價(jià)值。

4.1 Smap地圖接口核心庫

地圖接口核心庫完整構(gòu)建了地圖全生命周期管理，包括地圖初始化管理、地圖內(nèi)容可視化定制展示管理、地圖控件功能定制管理、地圖事件機(jī)制管理和地圖行為功能管理。通過簡潔代碼構(gòu)建基于Smap的地圖，其中tokenconfigname用于后臺(tái)交換資源密鑰，userName和menuName相結(jié)合用以獲取定制授權(quán)地圖配置信息，viewMode用于指定地圖二三維模式，Center用于設(shè)置地圖中心點(diǎn)， zoom用于獲取縮放層級，zooms用于控制地圖縮放級別，pitch用于設(shè)置三維地圖視角傾斜角度，mapStyle用于指定地圖主題、設(shè)置showBuildingBlock建筑物模型。這些參數(shù)可按需組合使用，基于核心庫達(dá)到互聯(lián)網(wǎng)地圖接口簡潔、易用、輕量的效果，并呈現(xiàn)出企業(yè)級地理信息應(yīng)用。核心庫使用效果如圖2所示。部分代碼為：

4.2 Smap數(shù)據(jù)可視化展示庫

數(shù)據(jù)可視化展示庫基于地圖接口核心庫構(gòu)建，可按業(yè)務(wù)需要根據(jù)地圖地理信息服務(wù)資源進(jìn)行數(shù)據(jù)可視化表達(dá)和渲染；可通過靈活的配置，快速制作散點(diǎn)、軌跡、區(qū)面、熱力圖等與地理位置相關(guān)的可視化作品。例如，基于邊界數(shù)據(jù)，利用數(shù)據(jù)可視化展示庫setmaskboundary接口構(gòu)建邊界光圈可視化效果，如圖3所示。

圖2 Smap地圖接口核心庫示例

圖3 Smap數(shù)據(jù)可視化展示庫示例

4.3 Smap通用功能擴(kuò)展組件庫

Smap通用功能擴(kuò)展組件庫也是基于地圖接口核心庫構(gòu)建的，通過集成業(yè)務(wù)通用需求地圖功能構(gòu)建擴(kuò)展集。目前該庫集成了地圖軌跡播放、地圖漫游、遷徙圖等通用功能接口組件，用戶可按需配合地圖接口核心庫使用。例如，通過地圖軌跡播放Trajectory.play接口實(shí)現(xiàn)熱氣球軌跡播放展示，效果如圖4所示。

圖4 Smap通用功能擴(kuò)展組件庫示例

5 結(jié) 語

參照互聯(lián)網(wǎng)地圖的設(shè)計(jì)思維和模式，本文設(shè)計(jì)了基于TypeScript、ArcGIS JS API和NPM技術(shù)的二三維一體化Smap地圖開發(fā)接口庫。該庫不僅具有互聯(lián)網(wǎng)地圖簡潔、輕量、易用等特點(diǎn)，而且具備擴(kuò)展企業(yè)級地圖應(yīng)用接口功能，可按需進(jìn)行地圖功能定制擴(kuò)展開發(fā)，解決了目前互聯(lián)網(wǎng)地圖功能不足、企業(yè)級地圖開發(fā)復(fù)雜等痛點(diǎn)，為WebGIS應(yīng)用開發(fā)提供了靈活多變的選擇。