MapGIS 10.5 Pro敏捷开发之Web组件开发

从简单的在线制作静态地图，发展到具有全方位GIS功能的WebGIS，地理信息技术与 互联网 的融合在过去三十年中发展迅速。伴随着今天 科技 的日新月异，数字孪生、CIM、智慧城市、空间规划、实景三维中国建设等应用需求层出不穷，推动着WebGIS应用从平面二维向包含空中、地下、地表、地上的全空间维度发展，亦对WebGIS开发平台提出了更高的要求，要求WebGIS开发平台既能提供覆盖全空间一体化应用所需的开发接口，又能最大程度的实现代码复用，以降低开发成本、提高开发效率，满足快速构建WebGIS应用的需求。

依托于互联网和Web前端技术的发展，具有可复用性、易维护、标准化等特点的组件化开发已成为Web前端开发的主流。组件式开发将原来复杂的网页进行拆分和解耦，以面向对象的思想将Web页面的样式表现、功能和数据进行封装，使其模块化，使得前端开发可以像搭积木一样灵活、方便。通过对逻辑单元进行封装，提高代码的复用率，提升了软件开发效率；对不同的代码进行作用域隔离，各组件低耦合，使用得组件可被迁移、组合、重构，且方便定位问题，易于维护；组件采用统一的标准开发，支持异地协同开发。MapGIS  10.5  Pro将Web组件式开发与WebGIS应用开发相结合，于2021年6月推出了Web组件化开发产品——MapGIS Client for JavaScript，实现了快速构建WebGIS应用的目标。

普通Web页面                    组件化页面搭建

示例：主流Web组件框架之Vue组件

MapGIS Client for JavaScript基于Web组件化开发思想和主流技术框架推出的组件式开发产品。该产品在现代Web前端技术栈的支撑下，融合了优秀的二三维开源地图库、可视化库、客户端计算库等GIS基础框架，根据GIS数据特性，打造了多种数据和视图模型，并结合多种优秀的开源UI和前端跨平台框架，构建出一套支持跨平台应用的功能组件库，包括二三维地图和场景、数据和图层、地图工具、分析、空间可视化等，支持多层封装、多级复用、高效扩展，支持响应式应用构建以及跨平台跨终端应用构建，并且提供全面开放的开发资源。

MapGIS Client for JavaScript组件产品

丰富的二三维组件库

MapGIS Client for JavaScript产品提供视图、图层、工具、分析和可视化五大类200+原子组件，充分满足行业二次开发需求。

视频1 MapGIS Client for JavaScript二维组件

视频2  MapGIS Client for JavaScript三维组件

支持多层封装、多级复用、高效扩展

MapGIS Client for JavaScript产品提供的组件预留了供外部组件调用的函数、事件和属性，支持直接复用和封装，具备多级封装、多层复用，高效扩展的能力。

如下图所示的原子树形组件，结合业务需求，封装成图层列表组件和数据目录组件，这些组件可在页面中自由组合使用。

原子树形组件二次封装

构建响应式应用

MapGIS Client for JavaScript提供的组件遵循响应式技术规范，能够适配PC端和移动端多种浏览器内核，从而能够帮助用户快速构建不同尺寸、不同分辨率的WebGIS应用。

支持构建跨平台跨终端应用

结合Apache Cordova 、 Electron 等跨平台开发框架，可将MapGIS Client for JavaScript组件开发出的应用部署为Web端、移动端、桌面端应用，同时适配Windows、Linux、Mac、 Android、iOS、Harmony等PC和移动端操作系统。

提供全面开放的开发资源

MapGIS Client for JavaScript产品资源中心提供基于StoryBook的在线组件学习环境、丰富的在线示例资源、快速上手的开发文档，为开发者提供全方位的学习支撑。同时产品源码全部开源，供开发者进行深入学习和扩展。

Storybook

丰富的组件示例

组件开发文档

代码托管地址

目前，MapGIS Client for JavaScript已经应用到自然资源、智慧城市、智慧地质等多个行业，也欢迎更多的GIS二次开发用户参与其中，探索MapGIS 10.5 Pro新变革带来的敏捷开发体验！