2021.12.28基于TypeScript的WebGIS地图接口库设计与实现

  参照互联网地图的设计思维和模式,文章设计了基于 TypeScript、ArcGIS JS API 和 NPM 技术的二三维一体化 Smap 地图开发接口库。该库不仅具有互联网地图简洁、轻量、易用等特点,而且具备扩展企业级地图应用接口功能,可按需进行地图功能定制扩展开发,解决了目前互联网地图功能不足、企业级地图开发复杂等痛点,为 WebGIS 应用开发提供了灵活多变的选择。

设计思路:

  本文基于ArcGIS JS API利用 TypeScrpt 封装构建地图接口核库再围绕核心库再按需、按功能、按业务扩展构建地图插件库,然后编译混淆地图接口核心库和插件库,最后通过 NPM 版本化管理分发交付用户使用。)Smap 地图接口核心库以细粒度 ArcGIS JS API为底层库,紧密结合时空地理信息服务资源,按需组织服务和业务层,可接入地图资源服务层权限管控系统,实现核心库和资源层按需紧密定制和授权,从地图接口库层满足服务层授权和内容定制需求。

关键技术:

  ArcGIS JS API

  ArcGIS API for Javascript 是 Esri 公司推出的基于开源 Javascript Dojo 工具包[11] 开发的 WebGIS 地图开发接口库,可结合 ArcGIS Enterprise 与开源 GIS 平台,搭建开发运行在浏览器中各专题、场景的专业二三维一体化 。WebGIS 应用

  TypeScript

  TypeScript 是由微软开发的开源、跨平台网络编程语言,是 Javascript 的超集。其本质是向该语言添加了可选的静态类型和基于类的面向对象编程,通过扩展 Javascript 的语法,使得现有的 Javascript 程序均可在 TypeScript 环境中运行。

  Node Package Manager

  Node Package Manager(NPM)是 NodeJS 包管理和分发工具。通过 NPM 管理机制实现基于 Javascript包的编译、混淆、打包、上传和分发;基于 NodeJS网络应用可统一通过 NPM 分发管理机制实现包的下载、引用和调用。

Smap 地图接口库架构与工作流程

  地图接口库架构

  Smap 地图接口核心库架构以 TypeScript模块为构件单元,构建 Smap 作为地图接口库核心输出单元,并在 Smap 模块中构建 Map、Layers、Control、OverLayers 等地图内容功能部件。本文设计了数据可视化展示库和通用功能扩展组件库两组 Smap 扩展插件库,其中数据可视化展示库可实现地理数据可视化定制表达,通用功能扩展组件库中集成了与核心库独立的通用功能。

    工作流程

  用户通过 NPM 分发下载安装核心库,在网络开发应用中引用 Smap 地图接口模块包,通过设置属性控制参数初始化Map对象。

2021.12.28基于TypeScript的WebGIS地图接口库设计与实现

 

 地图接口模块

  地图接口库包括 Smap 地图接口核心库、基于核心库的 Smap 数据可视化展示库和 Smap 通用功能扩展组件库。

  Smap 地图接口核心库

  地图接口核心库完整构建了地图全生命周期管理,包括地图初始化管理、地图内容可视化定制展示管理、地图控件功能定制管理、地图事件机制管理和地图行为功能管理。通过简洁代码构建基于 Smap 的地图,其中 tokenconfigname 用于后台交换资源密钥,userName 和 menuName 相结合用以获取定制授权地图配置信息,viewMode 用于指定地图二三维模式,Center 用于设置地图中心点, zoom 用于获取缩放层级,zooms 用于控制地图缩放级别,pitch 用于设置三维地图视角倾斜角度,mapStyle 用于指定地图主题、设置showBuildingBlock 建筑物模型。这些参数可按需组合使用,基于核心库达到互联网地图接口简洁、易用、轻量的效果,并呈现出企业级地理信息应用。

    Smap 数据可视化展示库

  数据可视化展示库基于地图接口核心库构建,可按业务需要根据地图地理信息服务资源进行数据可视化表达和渲染;

  Smap 通用功能扩展组件库

  Smap 通用功能扩展组件库也是基于地图接口核心库构建的,通过集成业务通用需求地图功能构建扩展集。

 

  文章设计了基于 TypeScript、ArcGIS JS API 和 NPM 技术的二三维一体化 Smap 地图开发接口库,功能齐全,系统设计合理,使我对于api的理解加深了不少。

上一篇:TypeScript学习(九)interface 和 type 到底有什么区别?


下一篇:typeScript(五)函数