基于SVG在线应急标绘符号的设计与实现 | ![]() |
2. 中国测绘科学研究院,北京, 100830;
3. 山东科技大学测绘科学与工程学院,山东 青岛, 266590
2. Chinese Academy of Surveying and mapping, Beijing 100830, China;
3. College of Geomatics, Shandong University of Science and Technology, Qingdao 266590, China
目前, 态势标绘系统大多采用桌面应用程序来实现, 操作简单,交互性较好,用户界面相对友好[1], 但是应急救援过程中,桌面版应急符号的标绘,大大影响了应急救援中的实时性和灵活性,难以满足应急救援的要求[2]。随着GIS和网络技术的发展,互联网的普及及使用,对于在线标绘交互式应急符号的研究愈来愈深入,其中基于SVG(scalable vector graphics)进行在线标绘的研究已取得了一定的成果[3-5]。但是,针对SVG本身固有的特点,基于SVG的在线标绘应急符号也将面临一些列问题,例如,SVG中地理坐标转换问题,曲线型线状和面状符号的连续标绘以及表达等。本文在对比几种标绘编程语言的技术和特点后,提出了基于SVG在线应急符号绘制的实现方法并对坐标转换以及非规则应急符号控制点的生成这一关键点作了阐述。
1 在线应急符号的绘图机制设计 1.1 VML、HTML5与SVG技术和特点对比矢量可标记语言(vector markup language, VML)基于可扩展标记语言(XML),是能够将图形及其他数据等与地理信息空间数据集成在一起,在Web上建立简洁高效的矢量图形并通过文本方式描述矢量图形的语言。可缩放矢量图形(SVG)是由W3C制定的一个开放的国际标准,同时也是基于XML的用于描述二维矢量图形的一种图形格式[6]。而HTML5(hyper text markup language 5)中Canvas元素是使用JavaScript程序绘图(动态生成)并在网页上绘制2D图像。
尽管VML和SVG两者都基于XML标准且均可以支持交互性操作来实现矢量图形的绘制,但是,SVG是在汇总了VML的优点后推出的国际标准,相比较而言具有更多的优点及更加广阔的应用领域和前景[7]。同时,SVG制图将大大有助于解决Web GIS客户端地图的交互操作问题,使得图像在外部输出、色彩等相关问题上能够得到进一步的解决和优化[8]。综上所述,SVG更适合对图像进行绘制,编辑,动态交互以及对图形的缩放处理。此外,SVG具备的地理数据的惟一标识性,不仅可以提高Web GIS互操作性的效率,更便于地理信息的查询、搜索和共享,从而提高用户的互操作速度。因此,在线标绘应急符号采用SVG的Path来绘图。
1.2 类层次结构设计及应急符号的图元设计流程NewMap是由中国测绘科学研究院自主设计研发并具有完全知识产权的新型GIS软件,本文基于其C/S架构军事标绘系统,结合符号制图理论原理,采用SVG的Path进行在线应急符号进行绘制,主要包括基本函数以及原子函数的编写两部分,具体绘制符号采用三层继承机制(基本符号构建类-具体绘制类-编辑类)通过函数的继承,派生调用来实现矢量应急符号的绘制。符号标绘完成后,用户可以通过移动,拉伸设置等修改符号大小、方向等属性,结合SVG及元素的Style属性,可以设置线型、颜色、粗细等,同时还可以改变面状符号的填充方式[9],实现符号的在线交互。本文设计的技术路线及三层继承绘图机制分别如图 1、图 2所示。
![]() |
图 1 在线标绘交互式应急符号技术路线 Fig.1 Online Plotting Interactive Emergency Symbolic Technology Roadmap |
![]() |
图 2 三层继承机制 Fig.2 Three Layer Inheritance Mechanism |
在分析应急符号特征后,将应急符号分为点符号和函数符号。点符号是由一些基本的图元(如点、直线、多边形,圆等)构成,一般来说,其图形相对而言比较简单且形状较固定,有相对明确的定位点和方向性,所以在点符号绘制函数中只要给定应急符号需要绘制的位置点(一般通过鼠标点击得到),即可将应急符号绘制至所需要的位置。函数符号通常由点、线、面等基本图元组合而成,图形构成相对较复杂,符号没有固定形状,可以随着时间和现场状况进行调整和改变且没有特定的长度和方向,这些都是用户在标绘时实时确定的。因此,函数符号不能仅依靠基本图元完成绘制,需通过用户输入主控制点(一般由鼠标点击获得)以及算法生成从控制点拟合成曲线才可完成,因而需要在函数符号绘制函数的接口中提前预留参数为一个数组以便于存储用户输入的控制点[10],同时可将应急符号库封装成一个动态链接库并向开发者提供符号绘制接口,具有较好的通用性和可扩展性,便于开发人员的二次开发,提高在线标绘的效率。
2 应急符号的实现 2.1 Web GIS元素坐标与SVG中屏幕坐标相互转换在地理信息系统中,各地物一般都有其特定的坐标系统,SVG则采用的是屏幕坐标系,因而坐标匹配问题是SVG技术应用到地理信息系统中的关键点。不论是点状、线状还是面状地物,其坐标转换其实都是由点到点的。
Web GIS元素从经纬度坐标到SVG屏幕坐标的转换公式为:
$ {\rm{client}}\_X = (({\rm{Lon}} - {\rm{Lon}}_{\min }) \times 3600 \times W)/{\rm{Lon}}_{\max } - {\rm{Lon}}_{\min }) $ | (1) |
$ {\rm{client}}\_Y = (({\rm{Lat}}_{\max } - {\rm{Lat}}) \times 3600 \times H)/({\rm{Lat}}_{\max } - {\rm{Lat}}_{\min }) $ | (2) |
Web GIS元素SVG屏幕坐标到经纬度坐标的转换公式为:
$ {\rm{Lon}} = {\rm{Lon}}_{\min } + {\rm{client}}\_X \times ({\rm{Lon}}_{\max } - {\rm{Lon}}_{\min }) \times 3600 \times 3600/W $ | (3) |
$ {\rm{Lat}} = {\rm{Lat}}_{\max } - {\rm{client}}\_Y \times ({\rm{Lat}}_{\max } - {\rm{Lat}}_{\min }) \times 3600 \times 3600/H $ | (4) |
式中,(client_X, client_Y)为点符号的屏幕坐标;(Lon, Lat)为该点的经纬度坐标;(Lonmax,Lonmin,Latmax,Latmin)为地理坐标区域的范围;屏幕的宽和高分别为W、H。以标绘箭头类符号为例,其在地理信息系统中的几何(Geometry)类型是一条自由直(曲)线,称之为Polyline,此线上的所有坐标点将会保存在内存或一些指定的文件中[11]。通过地理坐标与屏幕坐标转换后,即可得到SVG中的线为Path, 然后以Bezier曲线,B样条曲线函数及相关算法思路为依据,计算其相应的控制点,从而生成应急符号,并最终以SVG图形的形式展现于客户端。
2.2 控制点的生成在应急符号标绘的过程中,控制点的生成是其中一个关键问题,对于点符号而言,控制点的生成相对较简单,在此不再进行赘述。函数符号又称为非规则符号,由一组无规律的基本图元符号组合而成,并且随着实际状况可随时进行变化,例如行进路线上的箭头符号,随着箭尖向前移动,整个箭身将被拉长,形状位置亦随之变动[12]。虽然非规则符号图形复杂且没特定规则,但其生成过程类似,基本都是通过定制算法,采用基本图元类的继承、派生和函数调用使整个标绘过程自动完成。在其算法编写过程中,控制点的生成是函数符号绘制的关键,现以进攻箭头控制点生成为例来进行讨论。进攻箭头的生成受主控制点(由用户通过鼠标点击获得)和从控制点(由绘图算法根据主控制点生成)同时控制。主控制点为4个(P1、P2、P3、P4),如图 3所示。
![]() |
图 3 行进路线箭头控制点生成示意图 Fig.3 Schematic Diagram of the Generation of the Control Point of the Marching Route |
其算法思路如下:
1) 连接P2、P3插入中点PB作为从控制点,连接P3,P4插入中点PC作为从控制点,过P2、PB、P3、PC、P4等5个点,拟合一条Bezier曲线作为行进路线箭头图标的中心线,如图 3中虚线所示;
2) 确定行进箭头箭尖点P5、P8:取P3P4长度的1/4点ps,过ps点作P3P4的垂线,然后由P4点出发作条与P3P4夹角为30°的直线,并与其相交于P5, 同理可得P8点;
3) 确定行进箭头箭身内部尖点P6、P7:取ps点与P4距离的3/4点pt, 过pt点作P3P4的垂线,然后由P4点出发作一条与P3P4夹角为15°的直线,与其相交于P6,同理可得P7点;
4) 连接P1、P6拟合成一条Bezier曲线,同时,连接P2、P7拟合成一条Bezier曲线。这样即可完成行进路线箭头的绘制。
在箭头绘制结束后,可以通过调整P1、P2、P3、P4、PA、PB、PC点对已经绘制好的箭头进行拉伸、移动等编辑,直至符合工作要求。
3 在线态势标绘应用态势标绘就是指将当前战场上敌我双方的兵力部署、行军路线、基础设施、武器等军事力量和之后一段时间内将要发生的动向变化态势用军事符号标绘在地图上[13]。在应急系统中的是指将应急指挥现场的当前情况、周围基本设施、各相关部门的行进路线等在地图上进行标绘以便于各部门间协调工作,有条不紊地完成任务。本文主要展示点符号态势标绘和函数符号标绘。
3.1 点符号标绘点符号标绘在Web地图上,只需要根据符号模版的唯一标识码来自动调取模版库中所需的模版,然后在Web地图上点击标绘的位置就可以直观地进行标绘,选中后可以进行旋转、缩放、平移并且可以从属性面板里设置属性,如图 4、图 5。
![]() |
图 4 铁路符号绘制及变化 Fig.4 Railway Symbol Drawing and Change |
![]() |
图 5 邮电符号绘制及变化 Fig.5 Post and Telecommunications Symbol Drawing and Change |
3.2 函数符号标绘
函数符号加载到在线Web地图上,需要用户通过一系列的鼠标事件完成,而且不同的函数符号有统一的鼠标事件响应机制,用户只需在Web地图上所需的位置进行点击即可获得控制点,符号会根据拾取的坐标进行自动绘制,并在获取所需控制点个数后结束与地图的交互,对于一些可以点击无穷多点的符号,则鼠标双击后结束绘制。
在应急指挥系统中,通过对现场以及救援情况应急符号及态势标绘,可以直观找出事故发生地、周边敏感地(化工厂、学校等)以及救援设施点(医院、救助站等),使救援更加信息化、智能化,另外,救援、撤离路线的科学制定有利于应急救援服务合理而有序进行,并最终以最快路径,最优资源实现快速而有效的救援(图 6),提高了各级相关救援部门在面对突发灾害情况下的应急反应速度和处理效率,减少人民生命财产损失具有十分重大的意义。
![]() |
图 6 救援路线图 Fig.6 Rescue Route Map |
4 结束语
本文在NewMap产品中C/S架构的军事标绘系统的基础上,研究并设计了应急符号在线绘制机制, 并对坐标转换及非规则应急符号控制点的生成这一关键点进行了分析。该设计方案采用SVG的Path进行绘制,交互性好,效率高,允许用户在线进行应急指挥现场态势的标绘和编辑,并对于应急符号的绘制提供了良好的模板和应急符号JavaScript API接口以便于制图人员和相关开发人员的使用,在很大程度上简化了开发的难度,提高了开发效率,有一定的使用价值。符号标绘应用结果表明,本方案基本可以直观地表现当前的现场态势,成为现场分析人员分析判断、实时决策的有效手段。
[1] |
张永红. 基于Web的态势标绘及应用技术研究[J]. 中国电子科学研究院学报, 2009, 4(1): 45-49. DOI:10.3969/j.issn.1673-5692.2009.01.008 |
[2] |
徐敬海, 徐徐, 聂高众, 等. 基于GIS的地震应急态势标绘技术研究[J]. 武汉大学学报·信息科学版, 2011, 36(1): 66-70. |
[3] |
Stefanakis E. Representation of Map Objects with Semi-structured Data Models[C]. Symposium on Geospatial Theory, Processing and Applications, Ottawa, 2002
|
[4] |
孙少红, 边馥苓. SVG网络图像标准支持下的地图显示[J]. 测绘信息与工程, 2002, 27(5): 15-16. DOI:10.3969/j.issn.1007-3817.2002.05.007 |
[5] |
周文生. 基于SVG的WebGIS研究[J]. 中国图像图形学报, 2002, 7(7): 693-698. |
[6] |
覃如府, 许惠平, 王家林, 等. 基于XML的通用地图符号库设计与实现[J]. 同济大学学报:自然科学版, 2008, 36(8): 1138-1142. |
[7] |
刘丹. 利用VML和SVG绘制军标箭头符号的算法实现[J]. 测绘科学, 2014, 39(4): 115-118. |
[8] |
林峰, 郭朝珍. 基于SVG的WebGIS交互协同机制的设计与实现[J]. 东南大学学报(自然科学版), 2010, 40(S2): 273-274. |
[9] |
张海泉, 潘懋, 吴焕萍, 等. 面向GIS的矢量线状符号填充算法研究[J]. 地理与地理信息科学, 2004, 20(4): 11-14. DOI:10.3969/j.issn.1672-0504.2004.04.003 |
[10] |
王妮, 钟志农, 李军, 等. 基于Map Objects的军事标图系统[J]. 兵工自动化, 2006, 25(8): 36-37. DOI:10.3969/j.issn.1006-1576.2006.08.017 |
[11] |
汪维华, 汪维富. 基于SVG的WebGIS的研究与实现[J]. 计算机工程与设计, 2008, 29(22): 5706-5707. |
[12] |
李剑萍, 章玲玲, 李昊, 等. 基于Flex与ArcGIS Server的Web军事态势标绘系统设计与实现[J]. 测绘地理信息, 2014, 39(3): 59-61. |
[13] |
杨小莉. 态势标绘中态势图的生成研究[J]. 光电与控制, 2004, 11(2): 68-70. |