基于TypeScript的WebGIS地圖接口庫設計與實現

楊益文

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

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

為了降低基于ArcGIS的WebGIS應用開發難度以及開發人員的入門門檻，本文采用主流TypeScript Web開發語言，遵循面向對象、面向模塊的開發理念[2]，對ArcGIS JS API進行二次封裝，使封裝后的地圖接口具有高內聚、低耦合[3]、輕量、簡潔、易用等特性，同時能按需實現復雜業務定制。

1 設計思路

根據互聯網地圖的設計模式[4-8]，本文基于ArcGIS JS API利用TypeScrpt封裝構建地圖接口核心庫，再圍繞核心庫按需、按功能、按業務擴展構建地圖插件庫，然后編譯混淆地圖接口核心庫和插件庫，最后通過NPM版本化管理分發交付用戶使用。

1）通過調研、分析、測試和使用高德、百度等互聯網地圖文檔、編程接口、開發示例和應用體驗，整體把握互聯網地圖設計的特點、思路和方向；結合企業級ArcGIS JS API架構特點，構建Smap地圖接口核心庫[9-10]。

2）Smap地圖接口核心庫以細粒度ArcGIS JS API為底層庫，緊密結合時空地理信息服務資源，按需組織服務和業務層，可接入地圖資源服務層權限管控系統，實現核心庫和資源層按需緊密定制和授權，從地圖接口庫層滿足服務層授權和內容定制需求。

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

2 關鍵技術

2.1 ArcGIS JS API

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

2.2 TypeScript

TypeScript是由微軟開發的開源、跨平臺網絡編程語言[13]，是Javascript的超集。其本質是向該語言添加了可選的靜態類型和基于類的面向對象編程，通過擴展Javascript的語法，使得現有的Javascript程序均可在TypeScript環境中運行。TypeScript也可為已存在的Javascript庫添加類型信息的頭文件，擴展其對于流行的庫支持。TypeScript必將是未來Web技術主流開發語言[14]。

2.3 Node Package Manager

Node Package Manager（NPM）是NodeJS包管理和分發工具。通過NPM管理機制實現基于Javascript包的編譯、混淆、打包、上傳和分發；基于NodeJS網絡應用可統一通過NPM分發管理機制實現包的下載、引用和調用[15]。

3 Smap地圖接口庫架構與工作流程

3.1 地圖接口庫架構

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

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

3.2 工作流程

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

圖1 工作流程圖

4 地圖接口模塊

地圖接口庫包括Smap地圖接口核心庫、基于核心庫的Smap數據可視化展示庫和Smap通用功能擴展組件庫。地圖接口核心庫是地圖構建的基礎，集成了地圖內容、控件、操作和事件，是構建地圖應用最基本的依賴；數據可視化展示庫是面向地圖數據的可視化展示應用庫，是地圖展示內容最好的表達；通用功能擴展組件庫是通用功能的集合。這些模塊相互組合使用，可構建面向空間的地理數據地圖應用，并可與業務系統相集成，滿足企業級用戶基于WebGIS的地理空間大數據展示、分析、可視化的應用需求，提升了業務系統應用價值。

4.1 Smap地圖接口核心庫

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

4.2 Smap數據可視化展示庫

數據可視化展示庫基于地圖接口核心庫構建，可按業務需要根據地圖地理信息服務資源進行數據可視化表達和渲染；可通過靈活的配置，快速制作散點、軌跡、區面、熱力圖等與地理位置相關的可視化作品。例如，基于邊界數據，利用數據可視化展示庫setmaskboundary接口構建邊界光圈可視化效果，如圖3所示。

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

圖3 Smap數據可視化展示庫示例

4.3 Smap通用功能擴展組件庫

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

圖4 Smap通用功能擴展組件庫示例

5 結 語

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