小区域地图导航系统开发与应用
2018-09-14吴雅玲姜志刚许荣衔丘金英王诗豪
吴雅玲 姜志刚 许荣衔 丘金英 王诗豪
摘要：以福建师范大学福清分校空间信息为实验数据，采用 SVG 文本矢量图，结合H5调用地理信息位置，运用混合定位、Dijkstra 最短路径算法以及PHP技术开发了小区域规模的地图导航开发系统。该系统在可以实现GPS定位、放大缩小、地图导航功能，其次还能为用户提供自定义地图接口，同时实现地图导航功能。该系统既可以满足高校和乡村旅游导航的系统开发，又能满足个人需求。具有成本低、实用价值高、面向对象广泛的特点。
关键词：高校地图；导航；SVG；Dijkstra；H5
中图分类号： TP391 文献标识码：A 文章编号：1009-3044（2018）16-0079-04
1 课题的研究背景
目前国内市面上有谷歌地图、百度地图、高德地图等主流[1]的导航电子地图，这些地图提供的图形化界面给用户最直接的感受，但在关注小区域信息展示方面还做得不够精确，尤其是对于高校面积的扩展以及乡村旅游产业的开发，对于如何展现校园或者旅游景区内部的细节，具有十分必要的意义。虽然主流地图开发了应用接口，但要实现这些功能需要有一定的技术操作能力，这使得这些应用开发接口的使用并不具有普遍性的特点。而校园导航以及旅游导航在国内虽然陆陆续续取得了一些成果，其根据自身技术能力和条件进行了研究，采用的技术和开发平台各有特色[2]，但有些自主开发由于相关的技术比较薄弱，开发出来的产品 技术含量低，且疏于系统管理，缺乏应用性。有些则采用外包公司开发导航系统虽然方便使用，但成本之高，并不能广泛普及。
因此，本课题基于上述问题，结合AI技术、PHP技术和html5技术，开发出一款小区域规模的地图导航开发系统。该系统可以既能实现地图的基本信息查询，手机定位，最短路径查询等功能，又能让用户自导地图，自定义导航界面并实现地图导航功能，而用户只需提供一张SVG格式的底图。此平台具有成本小，管理简便以及实用性强的特点，可以满足高校和乡村旅游导航的系统开发。
2 系统的总体设计
2.1 系统的设计目标
本课题的目标主要是开发出一款小区域规模的地图导航开发系统[3]。用户可通过微信公众号了解导航的使用方法并进入导航页面，系统自动定位，然后通过系统提供的查询功能，快速查找想要到达的地点和路径。除此之外，用户也可以上传自己的地图，通过自定义导航界面，最终实现地图导航功能。具体功能如下：
1）地图查询（可查询学校的景点、办公楼、院系、部门）
查询地点是系统中的一个基本功能，查询目标地点，实现定位导航。在本系统中，设置了两种查询地点的方法：地图直观文字查询和搜索框查询。在地图上给每栋建筑和活动场地设置名称，点击建筑物改变区域颜色；搜索框查询则根据每个场地的用途功能归类为多个区域块，然后利用jQuery Mobile中的可折叠块细分每个功能区。
2）地图导航
用户可以在电子地图上选择始发点到终点的名称，通过最短路径的搜索，方便用户快速知道到达目的地的最短最优路线。路径的选择细分为车道和人行道，车道排除了阶梯和小路择最短路径，不同的道路选择应对不同的用户需求。
3）地图预览
地图预览是系统中的一个基本模块，调用hammer js库，实现地图的缩放、平移的功能。在实现地图的缩放和平移中，控制放大的最大限度和缩小的最小限度，控制平移的范围，帮助用户更方便地浏览地图、查找地点。
4）GPS定位
Html5中提供了地理位置信息的API，通过浏览器来获取用户当前位置。在获取地理信息位置之前，浏览器会向用户询问是否愿意共享位置信息，待用户同意之后浏览器将相关信息发送到一个信任的位置服务器，最后由服务器返回具体的地理位置并在地图上用特殊标识标记出来。
5）编辑地图底图
用户提供一张SVG格式的地图底图上传到系统中，根据系统的纠错系统规范图片，同时根据用户需求自定义底图颜色以及文字内容，修改之后的底图便可根据系统上的菜单来自定义地图，从而实现地图导航功能。
6）自定义控件
控件是平台提供给用户操作地图的界面元素，其中有缩放平移控件、比例尺控件、版权控件，用户可根据需求来自定义放大缩小倍数。
2.2 地图导航开发系统的实现流程图
3 系统主要功能实现
本系统以侨兴校区为例，采用天地图的卫星地图直接导入，通过SVG转化为矢量图，并通过人工踩点的方式进行校准，将校园的小路以及隐蔽点补上，减少底图的误差，收集校园内建筑物、道路、河流的名称与相关资料，为系统提供资料库。
3.1 制作SVG地图文档
参考天地图数据，以天地图为底图通过AI软件分别对地图对象、图层对象和地物对象进行编码，其中地图对象包含地图名称以及个图层对象两部分内容；图层对象包括图层标识，显示式样（如颜色，线型），图层名称以及所属地物对象等；而地物对象包括属性数据，几何数据，注记以及与地物对象的交互信息等[4]。
地圖制作完成之后，将编号设置为无向网的每个顶点，路径
以下是根据上述编码原则所实现的某一区域的SVG文档片段：
…
var colorAll='#99CCFF'；//全局颜色
function saveColorAndId（id）
{
precolor=document.getElementById（id）.getAttribute（'fill'）；
preid=id；//alert（'保存id：'+preid+'保存颜色'+precolor）；
}
function changeColor（id，color）//变色
{
document.getElementById（id）.setAttribute（'fill'，color）；
//alert（'执行了变色'+color）；
}
…
3.2 实现最短路径算法
在地图上实现任意两点的最短路径，可将地图路线直接抽象为无向图，对于无向图的最短路径需求，普遍采用迪杰斯特拉（Dijkstra）算法来计算[6]。当用户设置起点和终点后，地图会显示出从起点到终点的一条最优路径，并使这条路径变色。
Dijkstra算法伪代码如下：
…
for （var i = 0； i < vertexNum； i++）
{
distCopy[i] = dist[i] = POS_INFINITY；
set[i] = false； }
distCopy[sourceV] = dist[sourceV] = 0；
while （count < vertexNum）
{
u = distCopy.indexOf（Math.min.apply（Math， distCopy））；
set[u] = true；
distCopy[u] = POS_INFINITY；
for （var i = 0； i < vertexNum； i++）
{
if （！set[i] && （（temp = dist[u] + adjMatrix[u][i]） < dist[i]））{
distCopy[i] = dist[i] = temp；
path[i] = u；
}
count++；
}
}
…
道路变色算法伪代码如下：
…
for （i = 0； str[i + 1] ！= -1； i++）
{
Rstr[i + 1] = j = str[i + 1]；
Rstr[i] = k = str[i]；
s = k + "_" + j；
s1 = j + "_" + k；
c = document.getElementById（s）；
if （c == null）{ }
else
{
Rstrcolor[i] = c.getAttribute（'stroke'）；
c.setAttribute（'stroke'， 'red'）；
}
c1 = document.getElementById（s1）；
if （c1 == null）{ }
else {
Rstrcolor[i] = c1.getAttribute（'stroke'）；
c1.setAttribute（'stroke'， 'red'）；
}
}
…
3.3 用户自定义地图
1）用户上传一张地图（SVG格式）同时提供地图的经纬度，系统创建一个预处理程序和解析器，在解析器里面分配事件处理程序[7]，使用JavaScript语言去解析SVG文档。
SVG解析脚本如下：
…
< %
var svg， Root； 创建当前活动 SVG 文档的实例
Svg= evt. getTarget（） ； 获取 SVG 文档的根结点
Root= svg. getOwnerDocument（ ）；
% >
…
2）系统设置控制模式，实现图层能在特定规则下工作，其中包括获取图层位置，加载矢量图层以及修改图层颜色等。
核心程序代码如下：
…
Sysdir：=ExtraFilePath（Application.Exename）；
Dc：=IMoDataConnection（CreateOleObject（‘MapObjects2.DataConnection））；
Dc：Database：=sysdir+data＼；//获得系统图层所在位置
Map1.Layers.Add（Layer）；加载矢量图层
Layer.symbol.symbolType：=table1.filedbyname（'color'）.Value； 设置图层颜色
…
4 系统测试
为了验证系统实现的功能和稳定性，对系统进行了全面的测试，在课题主要对系统的定位、最短路径以及可供用户自定义地图并导入功能进行了多次测试和修改，最终系统得以正常运行。以下给出了测试中部分图片和测试数据。
4.1 最短路径功能测试
在校园导航系统中，我们选取多个地点，先通过搜索功能找到起点的位置，也可直接点击作为起点的建筑物，同理，找到终点位置，点击“到这里”。经测试，有98%的路线与现实符合，均能到达目的地。效果如图：
4.2 定位测试
在校园导航的定位测试中，我们选取的点有：网络中心、科技楼、图书馆大楼、综合实训楼、教学楼1、教学楼3、学生公寓5、石竹餐厅以及路上选取的一些点，共测试了50组数据，其精度和次数如下表所示：
4.3 用户自定义地图
对用户自定义地图功能测试，如下：
5 总结与展望
通过基于SVG技术所开发的地图导航开发平台的设计与实现，用侨兴校区作为实例充分展现了该系统具有交互功能强、成本低、易于操作和管理等优势，它使得生活中的应用和地理信息的传播更加方便和大众化。随着互联网与计算机的不断发展，人机交互的深入，使得用户对地图平台的设计提出更加趋于人性化的要求。其次，健全高校以及乡村旅游导航数字化建设也全给我们带来新挑战。
参考文献：
[1] 成功，杨亚.主流地图应用程序接口在地圖质量和实用功能上的对比分析[J].地理信息世界，2016，23（5）：41-45.
[2] 夏玉杰，翟艳磊.基于Mitab库的嵌入式GIS地图导航设计与实现[J].计算机工程与设计，2011，32（4）：1303-1306.
[3] 罗才鲜，余远波，王国树.基于 Android平台的海医校园导航系统设计与实现[J].应用交流，2016（5）：57-59.
[4] 武文波，孙国平，邹建成.基于SVG技术的WebGIS地图研究与制作[J].水资源与水工程学报，2008，19（4）：16-19.
[5] 李广丽，张红斌.基于JavaScript 脚本技术的SVG 文档的DOM解析[J].计算机与现代化，2005（1）：111-113.
[6] 王树西，李安渝.Dijkstra算法中的多邻接点与多条最短路径问题[J].计算机科学，2014，41（6）：217-228.
[7] 袁斌.GML地图控件的设计与实现[J].测绘工程，2012，21（2）：64-69.
