基于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应用开发提供了灵活多变的选择。