基于Leaflet的跨平台管线数据采集解决方法

褚永彬 储 奎 舒 珺 万善余 卞玉霞

1(成都信息工程大学资源环境学院 四川 成都 610225)2(成都知道创宇信息技术有限公司 四川 成都 610094)3(武汉工程科技学院信息工程学院 湖北 武汉 430200)4(上海平可行智能科技有限公司 上海 200235)

0 引 言

移动互联网和GIS的发展，促进了基于移动GIS技术的信息采集系统的应用[1-11]。在管线探测方面，周京春等[3]应用移动GIS技术，采用PDA作为移动终端，研究和探索城市管线探测过程中从外业探查、管线测量、内业数据检查处理到成果输出入库、修补更新的一体化作业管理模式。但这种模式已经不能满足移动智能终端普及化和多样化的现实需求。胡达天等[12]基于轻量级开源Leaflet软件，设计并实现了跨平台地图发布，较好地解决了跨平台地图服务的无缝信息流转问题，成为使用Leaflet进行跨平台应用开发的成功案例。

为适应移动终端的多样化，满足管线快速测量实时自动成图的需要，本文提出一种面向跨平台应用的基于移动GIS的燃气管网实时成图技术，实现管线的快速绘制并自动建立网络连通关系，便于绘图人员户外操作使用。

1 总体设计与架构

燃气管网即时测绘成图系统的设计目的是实现GPS位置获取、自动成图和拓扑编辑。功能着重于数据采集和自动成图，包括：添加设备点、手动/自动添加线段节点、属性录入、拓扑编辑、属性编辑。计算所占用的比例比较低，不属于重型应用，所以系统采用重客户端、轻服务端的思路设计架构。客户端采取富客户端开发技术，使用JavaScript、HTML5、CSS3作为基础技术手段。为了能够快速、高效的开发，使用React框架作为整体的技术选型。客户端整体架构包括数据结构、UI层、开发库、GIS地图库和功能模块，开发设计上采用SPA(单页面应用程序)，以组件式模块化开发，组件与组件之间耦合度较低，数据通信以数据驱动式开发，整体上开发模式非常灵活、高效。服务器端使用了同构技术，采用nodejs作为REST API服务器和静态文件服务器。数据库采用NoSQL中的MongoDB。

系统总体架构如图1所示。架构分为三部分：客户端、REST API和静态文件服务器。在客户端中，按照功能可以划分为三个模块，分别是GPS位置获取模块、自动成图模块和拓扑编辑模块。GPS位置获取模块为自动成图模块提供位置数据，自动成图模块根据数据完成自动成图。当用户需要编辑管网时，就会调用拓扑编辑模块，该模块支持用户进行拓扑编辑，最终在自动成图模块中实时展示编辑效果。REST API 服务器主要工作是提供数据服务。用户需要对数据库中数据进行增删改查操作时，则需要调用REST API服务器，从而间接地将数据存储到MongoDB数据库中。静态文件服务器是提供静态文件服务，客户端在初次访问系统时，需要将系统文件下载到本地，才能提供系统服务。

图1 系统架构

2 数据结构及数据库

2.1 数据结构设计

为了跨平台的需要，系统并没有接入任何GIS地图服务器，仅仅使用了Leaflet作为基础地图服务，不具有拓扑结构，所以需要用算法去实现，而数据结构也是本系统的关键技术。

燃气管网没有固定的方向，而是随着气压的变化，燃气的流向处于随时变化中。系统主要是对节点进行操作，但同时也需要获得节点的邻接关系，故采用无向图邻接表来为拓扑结构数据存储。无向图邻接表用一个一维数组或者单链表来存储顶点信息，不过一般使用数组能够比较方便地读取顶点的信息。

2.2 数据库设计

本系统中数据都是以集合的形式存储。燃气管网数据在级别上属于海量数据，存储的数据格式以及字段要求能够支持拓展。针对系统的设计要求，MongoDB将数据存储为一个文档，数据结构由键值对(key=>value)组成。这种模式相比MySQL来说更适合系统的设计要求。数据库文档设计如表1所示。

表1 数据库文档

2.3 数据结构实现

由于本系统使用JavaScript语言开发，不能直接操作指针。为了能够达到同等的效果，在构建无向图邻接表时，利用数组具有天然索引的特征，采用关联索引来达到模拟指针的效果，故而数据结构的设计实现全部采用数组。顶点表用一个一维数组来实现，每个元素中用Object({type, location})来存储顶点信息，其中：type表示节点类型；location存储坐标信息。边表用一个二维数组来实现，边表和顶点之间的指针关系用数组索引来关联，即顶点表中的索引和边表的索引一致。每个顶点对应的所有邻接点存放在一个一维数组中，然后把这些一维数组再存放到这个边表的二维数组中。为了方便操作点和边的属性，在边表中的邻接点数据结构上增加了边属性数据。同样邻接点在数组单元中也是存储为一个Object({adjvex, edgeAttributes})，其中：adjvex存储顶点的索引，用于模拟单链表中的指针；edgeAttributes存储该边的属性数据。

顶点属性数据按照边表存储属性数据的模式也是可以的，但是为了尽量保证数据单一职责，顶点数据只保留关键数据(地理位置和顶点类型)，在系统数据结构设计上把属性数据做了分离，顶点属性数据单独存储在一个数组中。为了方便，属性数据数组索引和顶点数据数组保持相互对应。

通过上述方法所建立的数据结构保存在“GasNetwork”类中， GasNetwork结构如图2所示。

图2 GasNetwork结构

2.4 数据库实现

在MongoDB数据库根据表1建立“data”集合。集合中文档的vertexNodes和edgeNodes两个字段格式有着严格的约定，顶点表子项详细存储结构如图3所示，其中：vertexNodes[i]表示vertexNodes下的子项，类型是object；location表示存储的是顶点的坐标信息，类型是Array；location[0]存储的是纬度坐标；location[1]存储的是经度坐标；type表示节点类型，0表示普通节点，1表示设备点。

图3 顶点表存储结构

边表子项详细存储结构如图4所示，edgeNodes[i]表示边表中对应着顶点表中相应索引的边表信息，类型是Array；edgeNodes[i][j]表示的是每一个邻接点，类型是object；adjvex存储的是顶点表中的索引，类型是Int；edgeAttributes存储的是顶点和该邻接点的边属性，该属性可动态拓展，类型是object。

图4 边表存储结构

3 系统功能

燃气管网即时测绘成图系统的功能包括：添加设备点、手动/自动添加线段节点、属性录入、拓扑编辑、属性编辑。本文以添加设备点和拓扑编辑为例介绍系统功能实现。

3.1 添加设备点

当点击添加设备点功能，系统会弹出属性框，供用户输入属性，点击确定后系统将会调用GPS位置模块获取位置数据。LBS位置服务由HTML5 navigator.geolocation. getCurrentPosition()方法提供，通过此方法可以获取到当前位置信息。该方法成功获取位置后将会调用回调函数。在回调函数中，继续调用GasNetwork实例下的addDevicePoint和insertDeviceAttributes方法，完成数据添加工作，然后根据GasNetwork实例的_collection数据集进行成图渲染，即调用自动成图模块。添加设备系统功能如图5、图6所示。

图5 添加设备点属性

图6 添加设备点成功

3.2 拓扑编辑

拓扑编辑最为关键，也最为复杂。拓扑编辑功能支撑着数据的修改。拓扑编辑分为两部分，一是节点的编辑，二是节点的删除操作。

1) 节点编辑。点击节点编辑，系统调用拓扑编辑节点编辑模块，此时会调用自动成图模块，渲染出节点，该节点在Leaflet中称为Marker，在Marker中添加move事件，用于监听节点移动事件。当节点被移动，该事件将会被触发，返回最新的经纬度信息，然后调用自动成图模块完成重绘工作。

2) 节点删除。点击节点删除按钮，系统调用拓扑编辑删除模块，继而调用自动成图模块完成节点渲染，在Marker中添加click事件，用于监听点击事件。当节点被点击，触发删除操作，该节点将会从数据集合缓存中的顶点表和边表中删除，最后调用自动成图模块完成重绘工作。

数据集合缓存目的是为了能够做撤销工作，拓扑编辑还有两个辅助功能，分别是保存和取消。保存按钮用于保存用户的编辑结果，取消按钮用于取消编辑，还原至编辑之前的数据。用户在点击保存按钮之前，操作的都是数据集合缓存数据，不会对真实数据造成干扰，只有当用户点击保存按钮之后，真实的GasNetwork实例的_collection才会被修改。

图7是编辑之后的结果，图8是删除了图7中的部分节点的结果。

图7 拓扑编辑

图8 拓扑删除

4 结 语

本文研究了野外测绘自动成图与拓扑结构构建，开发了基于GIS的野外测绘自动成图系统。拓扑结构构建是系统的关键，所有的操作都基于此。本文采用无向图邻接表作为拓扑结构数据存储。基于Leaflet开源JavaScript地图库完成了跨平台的移动GIS开发。通过系统测试、数据分析验证了拓扑结构构建的合理性与正确性，实现了系统设计的所有功能。系统整体上具有轻便性、可移植性、可拓展性、可跨平台性、前后端完全分离等特点，为跨平台的野外数据采集提供了一种可行的方案。