一种基于WebGIS的图元标绘系统设计方法及系统

摘要

本发明提供了一种基于WebGIS的图元标绘系统设计方法及系统，该方法包括分析现有WebGIS前端框架图元标绘的共性信息，采用开闭原则封装为标绘图元处理器，配置统一的API；基于Vue.js框架构建标绘图元UI适配器，封装标绘面板组件，标绘面板组件至少包括标绘图元属性、坐标和样式；采用开源JSON Schema构建图元数据格式处理器，将输入数据转化为某一WebGIS前端框架标绘图元数据格式，验证标绘图元处理器提供的API是否缺少必填参数，缺少必填参数时发送提示信息。本发明结合现有主流WebGIS前端框架图元标绘的共性特点，实现了图元标绘方式统一，标绘图元属性面板统一，大大的提高了开发效率。

说明书

技术领域

本发明属于图元标绘技术领域，尤其涉及一种基于WebGIS的图元标绘系统设计方法及系统。

背景技术

WebGIS(网络地理信息系统)指基于Internet平台，客户端应用软件采用网络协议，运用在Internet上的地理信息系统。常见的WebGIS开源框架有：OpenLayers、Leaflet、MapBox、Cesium、OpenGL等。

实际项目中不同的应用场景选择不同的框架。例如，在二三维一体化项目中，二维选择Openlayers，三维选择Cesium。基于不同的WebGIS开源框架都要实现图元标绘功能，并且标绘图元数据要通过标绘面板展示。不同的WebGIS开源框架处理标绘图元的API、数据格式、事件交互方式各不相同。导致项目开发耗费巨大的技术成本。并且处理方式冗余，数据和视图更新DOM操作繁琐，不利于代码的维护，降低了开发效率。

发明内容

为了解决上述技术问题，本发明提供了一种基于WebGIS的图元标绘系统设计方法及系统，结合现有主流WebGIS前端框架图元标绘的共性特点，实现了图元标绘方式统一，标绘图元属性面板统一，大大的提高了开发效率。

本发明解决上述问题采用的技术方案如下：

本发明提供了一种基于WebGIS的图元标绘系统设计方法，包括如下步骤：

S1、分析现有WebGIS前端框架图元标绘的共性信息，采用开闭原则封装标绘图元处理器，配置统一的API；

S2、基于Vue.js框架构建标绘图元UI适配器，封装标绘面板组件，标绘面板组件至少包括标绘图元属性、坐标和样式；

S3、采用开源JSON Schema构建图元数据格式处理器，将输入数据转化为某一WebGIS前端框架标绘图元数据格式，验证标绘图元处理器提供的API是否缺少必填参数，缺少必填参数时发送提示信息。

进一步地，所述的共性信息为标绘图元必要参数，至少包括图元位置信息、图元类型、图元填充类型及颜色、地图信息。

进一步地，将共性信息在标绘图元处理器中至少设置为图元标绘创建基类、图元编辑基类、标绘图元样式基类。

进一步地，所述的标绘图元处理器配置的API至少包括获取图元要素、要素删除事件、要素定位事件、要素编辑事件、标绘面板关闭事件。

进一步地，所述的标绘图元UI适配器声明式渲染标绘面板组件各项参数，监听标绘面板组件各项参数值的变化，更新视图。

进一步地，所述的开源JSON Schema规则验证器，根据不同图元类型设置图元必填参数，验证标绘图元处理器提供的API是否缺少必填参数。

本发明还提供了一种基于WebGIS的图元标绘系统，包括

标绘图元处理器，用于封装现有WebGIS前端框架图元标绘的共性信息，配置统一的API；

标绘图元UI适配器，用于通过标绘面板展示标绘图元属性、坐标和样式，基于Vue.js框架构建；

图元数据格式处理器，用于将输入数据转化为某一WebGIS前端框架标绘图元数据格式，验证标绘图元处理器API是否缺少必要参数，缺少必要参数时发送提示信息。

本发明还提供了一种终端，包括存储器和处理器，所述存储器中存储计算机程序，所述处理器被配置为执行存储器中的计算机程序，所述计算机程序被所述处理器执行时实现前述的基于WebGIS的图元标绘系统设计方法。

本发明的有益效果：

本发明提供了一种基于WebGIS的图元标绘系统设计方法及系统，封装了统一的标绘图元处理器(PlotManager)、图元UI适配器(PlotUIManager)和图元数据格式处理器(PlotDataManager)。提供支持包括图标点、运动点、文本、DIV点、圆、线、面、矩形、图片、军事标绘等多种标绘图元使用与管理，提供图元标绘管理、提供矢量数据的统一风格API调用和样式设置，可导出导入标准GeoJSON格式数据或者自定义JSON格式数据。采用本发明，开发人员无须关心使用的开源WebGIS底层绘图机制，就可以方便、高效地在地图上进行图元标绘系统开发，不仅节约了开发成本，也降低了地图与地图标绘之间的耦合度，提高了软件的可维护性。

附图说明

所包括的附图用来提供对本发明实施例的进一步的理解，其构成了说明书的一部分，用于例示本发明的实施例，并与文字描述一起来阐释本发明的原理。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明具体实施例提供的标绘面板组成示意图。

具体实施方式

下面结合附图，通过实施方式详细地描述本发明一种基于WebGIS的图元标绘系统设计方法及系统。

需要注意的是，这里所使用的术语仅是为了描述具体实施方式，而非意图限制根据本申请的示例性实施方式。除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。

作为本发明的一方面，提供了一种基于WebGIS的图元标绘系统，包括

标绘图元处理器，用于封装现有WebGIS前端框架图元标绘的共性信息，配置统一的API；

标绘图元UI适配器，用于通过标绘面板展示标绘图元属性、坐标和样式，基于Vue.js框架构建；

图元数据格式处理器，用于将输入数据转化为某一WebGIS前端框架标绘图元数据格式，验证标绘图元处理器API是否缺少必要参数，缺少必要参数时发送提示信息。

本发明封装了统一的标绘图元处理器、图元UI适配器和图元数据格式处理器，支持多种标绘图元使用与管理，提供图元标绘管理、提供矢量数据的统一风格API调用和样式设置，可导出导入标准GeoJSON格式数据或者自定义JSON格式数据。可以方便、高效地在地图上进行图元标绘系统开发，不仅节约了开发成本，也降低了地图与地图标绘之间的耦合度，提高了软件的可维护性。

作为本发明的又一方面，提供了一种基于WebGIS的图元标绘系统设计方法，包括如下步骤

S1、分析现有WebGIS前端框架图元标绘的共性信息，采用开闭原则封装为标绘图元处理器，配置统一的API；

S2、基于Vue.js框架构建标绘图元UI适配器，封装标绘面板组件，标绘面板组件至少包括标绘图元属性、坐标和样式；

S3、采用开源JSON Schema构建图元数据格式处理器，将输入数据转化为某一WebGIS前端框架标绘图元数据格式，验证标绘图元处理器提供的API是否缺少必填参数，缺少必填参数时发送提示信息。

进一步地，共性信息为标绘图元必要参数，至少包括图元位置信息、图元类型、图元填充类型及颜色、地图信息。

进一步地，将共性信息在标绘图元处理器中至少设置为图元标绘创建基类、图元编辑基类、标绘图元样式基类。

进一步地，标绘图元处理器配置的API至少包括获取图元要素、要素删除事件、要素定位事件、要素编辑事件、标绘面板关闭事件。

进一步地，标绘图元UI适配器声明式渲染标绘面板组件各项参数，监听标绘面板组件各项参数值的变化，更新视图。

进一步地，采用开源JSON Schema规则验证器，根据不同图元类型设置图元必填参数，验证标绘图元处理器提供的API是否缺少必填参数。

本发明提供了一种基于WebGIS的图元标绘系统设计方法，封装了统一的标绘图元处理器(PlotManager)、图元UI适配器(PlotUIManager)和图元数据格式处理器(PlotDataManager)。提供支持包括图标点、运动点、文本、DIV点、圆、线、面、矩形、图片、军事标绘等多种标绘图元使用与管理，提供图元标绘管理、提供矢量数据的统一风格的API调用和style样式设置，可导出导入标准GeoJSON格式数据或者自定义JSON格式数据。采用本发明，开发人员无须关心使用的开源WebGIS底层绘图机制就可以方便、高效地在地图上进行图元标绘系统开发，不仅节约了开发成本，也降低了地图与地图标绘之间的耦合度，提高了软件的可维护性。

作为本发明的再一方面，提供了一个具体实施例，基于WebGIS的图元标绘系统设计方法，结合现有主流WebGIS前端框架图元标绘的共性特点，实现了图元标绘方式统一，标绘图元属性面板统一，大大的提高了开发效率。具体步骤如下：

步骤1，构建标绘图元处理器(PlotManager)，提供统一风格API处理。

1.1、提炼现有主流WebGIS前端框架图元标绘的共性信息。例如标绘图元必要参数，包括图元位置信息、图元类型、图元填充类型及颜色、地图信息等。

图元位置信息如三维地理坐标。

图元类型如点、圆、线、面、矩形、图片。

图元填充类型及颜色，如线条、填充颜色。

地图信息如百度地图、google地图等。

1.2、基于上述共性特点，针对不同WebGIS开源框架，采用开闭原则，封装PlotManager处理器。PlotManager处理器包含图元标绘创建基类PlotFactory、图元编辑基类PlotDraw、标绘图元样式基类PlotStyle等，共性信息按照需要设置于不同基类中。

图元标绘创建基类，主要用于创建标绘图元；图元编辑基类，用于标绘后图元编辑；标绘图元样式基类，用于设置图元样式。

1.3、根据实际业务场景需要，PlotManager处理器提供统一风格API。例如：

表1 标绘图元处理器统一API

API提供每一基类信息的实现方法。

步骤2，基于Vue.js构建标绘图元UI适配器(PlotUIManager)，通过标绘面板展示标绘图元属性、坐标和样式。

2.1、标绘图元UI适配器(PlotUIManager)基于Vue.js组件化思想，封装了标绘面板组件。组件由属性、坐标、样式三个键切换组成，如图1所示。

2.2、基于Vue.js的数据双向绑定特性，标绘图元UI适配器(PlotUIManager)声明式渲染标绘面板组件各项参数，同时标绘图元UI适配器(PlotUIManager)监听标绘面板组件各项参数值的变化。Vue.js会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。

2.3、基于步骤1标绘图元处理器(PlotManager)通过API获取到标绘图元详细信息(可通过获取图元要素获得)。通过标绘图元UI适配器(PlotUIManager)渲染到标绘面板组件视图中。用户在标绘面板组件输入框中修改属性参数时，标绘图元UI适配器会监听到属性变化去更新视图。

vue.js是一套构建用户界面的渐进式框架，与其他重量级框架不同的是，Vue.js采用自底向上增量开发的设计，Vue.js的核心库只关注视图层，体积小压缩后只有33k。结合虚拟DOM后，可以获得更高的运行效率。Vue.js具有双向数据绑定功能(即当数据发生变化时，视图也发生变化，当视图发生变化时，数据也同步变化)，让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上。

步骤3，为了兼容不同WebGIS开源框架数据、自定义属性和数据格式转换，封装了图元数据格式处理器(PlotDataManager)。使得具有良好的兼容性和拓展性。

3.1、基于步骤1中1.1的提炼，可以获取各个WebGIS前端框架标绘图元数据格式要求。将用户输入的数据转化为对应的WebGIS前端框架标绘图元数据格式。

3.2、采用开源JSON Schema规则验证器，根据不同图元类型设置图元必填参数(如类型、要求、特征)。例如在绘制一个圆时，需要传递必填参数为，图元类型CIRCLE，图元圆心经纬度，图元半径等。JSON Schema规则验证器可以可以验证输入参数。

3.3、开发人员在调用标绘图元处理器(PlotManager)提供的API，若未传入必填参数时，图元数据格式处理器(PlotDataManager)通过JSON Schema规则验证器验证，缺少必填参数，弹出友好错误提示信息。开发人员可以根据提示信息设置必填参数。

本发明提供了的基于WebGIS的图元标绘设计方法，主要实现如下功能：

(1)基于WebGIS实现标绘图元处理器(PlotManager)，适配主流WebGIS前端开源框架，比如OpenLayers、Leaflet、MapBox、Cesium、OpenGL等图元标绘方法API。

(2)基于Vue.js构建了图元UI适配器(PlotUIManager)，实现视图和数据的双向绑定。

(3)采用开源JSON Schema构建图元数据格式处理器(PlotDataManager)，实现数据转化，数据验证。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

本发明未详细说明部分为本领域技术人员公知技术。