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组件框架之Vue组件
MapGIS Client for JavaScript基于Web组件化开发思想和主流技术框架推出的组件式开发产品。该产品在现代Web前端技术栈的支撑下,融合了优秀的二三维开源地图库、可视化库、客户端计算库等GIS基础框架,根据GIS数据特性,打造了多种数据和视图模型,并结合多种优秀的开源UI和前端跨平台框架,构建出一套支持跨平台应用的功能组件库,包括二三维地图和场景、数据和图层、地图工具、分析、空间可视化等,支持多层封装、多级复用、高效扩展,支持响应式应用构建以及跨平台跨终端应用构建,并且提供全面开放的开发资源。
MapGIS Client for JavaScript组件产品
丰富的二三维组件库
MapGIS Client for JavaScript产品提供视图、图层、工具、分析和可视化五大类200+原子组件,充分满足行业二次开发需求。
视频1 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的在线组件学习环境、丰富的在线示例资源、快速上手的开发文档,为开发者提供全方位的学习支撑。同时产品源码全部开源,供开发者进行深入学习和扩展。
MapGIS Client for JavaScript产品资源中心地址:
http://develop.smaryun.com
Storybook
丰富的组件示例
组件开发文档
代码托管地址
https://github.com/MapGIS/WebClient-Vue
https://gitee.com/osmapgis/WebClient-Vue
目前,MapGIS Client for JavaScript已经应用到自然资源、智慧城市、智慧地质等多个行业,也欢迎更多的GIS二次开发用户参与其中,探索MapGIS 10.5 Pro新变革带来的敏捷开发体验!