2. 中国河南 450001 郑州大学水利与环境学院
2. School of Water Conservancy and Environment, Zhengzhou University, Henan Province 450001, China
“十二五”期间,河南省地震局以实现“地下清楚”为目标,与石油、煤田、地质调查等部门深化合作,首次系统编制河南省1:20万地震构造图,全面落实省内及周缘发育的主要断裂,深浅层构造格架综合分析取得新进展,隐伏活动断裂精细研究取得新突破(刘尧兴,2018)。为将河南省地震构造填图成果更好地服务于城市规划、抗震设防以及基础地震地质研究等,结合中国地震局《城市活断层探测与地震危险性评价》项目,开发面向公众服务的河南省地震构造信息查询系统。该系统将Internet技术应用于GIS开发,以天地图为基础地图,叠加地震点、断裂线等矢量数据,综合使用HTML5、JavaScript和CSS,在浏览器端,实现了用户对地震构造信息、剖面信息的查询与分析功能。
1 关键技术在以往实验的基础上,发现传统WebGIS系统的数据组织方式存在以下问题:矢量数据按需每次向服务器请求,服务器压力将增加,如果一次请求按需展示,当矢量数据过大时浏览器端的压力就会过大(孙璐,2014)。栅格切片具有固定分辨率,当分辨率过高切片体积较大时,显示效果容易受显示器分辨率影响,有时同一套数据在不同需求下可能需要不同样式,而传统栅格切片对此需求则必须重新进行切片。
为在浏览器端更好地解决上述问题,并且实现地理数据的快速显示,基于HTML5新规范,将矢量切片思想引入系统设计与开发,使用一种新型矢量数据在浏览器端的快速加载及显示技术,提高用户的交互体验。
在河南省活断层管理系统建设中,将矢量数据进行逐级分割,使用JSON语法规则对各级数据进行重新组织,在浏览器端使用JavaScript脚本语言进行解析,通过Canvas容器实现矢量图形的绘制。这种基于浏览器的富Internet应用提高了WebGIS应用性能,在一定程度上改善了用户体验。
1.1 矢量切片矢量切片与栅格切片的概念类似,均以建立金字塔的方式组织矢量数据,将其分割成小的数据单元进行传输(Antoniou,2009)。目前,矢量瓦片技术并无明确格式标准和体系标准,但已有一些实际应用和探索成果,如:张志友(2010)基于瓦片的矢量图幅分割与合并方法进行研究;王亚平等(2015)基于OGR地理数据模型,得到适用于多源投影矢量地理数据的瓦片生成工具;冯威丁(2017)通过引入矢量切片思想探索Hybrid App新型架构,实现移动端地理矢量数据的快速显示。
矢量切片通过一种自定义格式进行自行组织,接收浏览器端发出的不同请求,提供对应分级的切片数据进行Web绘图(梁春雨等,2012)。一个矢量切片会以紧凑的解析格式包含所有相对应的几何图形和元数据,如断层名称、岩体类型、钻孔的属性,因此矢量切片是一种高性能的格式。这种格式在数据样式、输出格式等方面具有多样性的同时,还具有高度灵活的交互性,可以提高浏览器端对地图的放大、缩小和漫游的响应速度(孙晨龙等,2016)。
矢量切片生成技术流程如下:①对需要入库的数据进行质量检查,导入模板数据库,将地震构造数据中单个矢量文件分级切割为多层矢量切片数据表;②为了获取不同层级地图范围,对矢量数据表中的空间字段进行逐层循环计算,并将返回值入库;③按照GeoJSON格式,对涉及的地理数据结构按照一定规则进行编码,其中GeoJSON是基于JSON的数据格式,可以对地理要素进行编码(丁克奎等,2015);④在浏览器端发出范围请求后,服务器准确地按照文件名进行索引,将对应层级下的矢量切片组反馈至浏览器端,达到快速刷新显示的目的。具体流程见图 1。
按照以上步骤切割并组织矢量数据,继承了矢量数据的特性,以要素为单位进行管理,加强了细节上的把控能力。
1.2 HTML5 CanvasCanvas是HTML5专为在客户端上渲染、绘制和显示矢量图形而新增的一个标签(Stuart G,2017),用Canvas画布,结合JavaScript脚本语言绘制的矢量地图,可以对地图上的具体要素提供更多描述信息,具有高度互动性,可丰富用户体验。在河南省地震构造查询系统建设中引入Canvas具有以下优势。
(1)传统地理信息系统中矢量数据一般通过不同图层进行分别管理。在河南省活断层管理系统开发过程中,通过声明Canvas节点<canvas id =”canvas” width = “800”height = “600”></canvas>,根据id对应的DOM对象,调用getContex()方法实现图层渲染。每个DIV元素包含多个Canvas元素,通过设置style中的display属性即可实现控制图层的显示与否。
(2)河南省地震构造系统提供诸多方便的交互功能,以实现用户浏览及地理信息查找。Canvas元素提供消息触发及事件响应函数,以获取用户消息,进而控制地理要素与之交互。通过Canvas提供的消息触发机制来调用事件响应函数,比较容易实现各种地理信息应用的操作。
(3)Canvas提供坐标转换矩阵。通过定义转换矩阵函数,容易实现地图平移、缩放等操作。如使用translate函数平移当前Canvas,重新绘制图层元素,达到地图平移的目的。
综上,HTML5 Canvas为河南省活断层管理系统建设提供了良好支持,通过JavaScript解析后台传送的JSON数据,结合Canvas API提供的函数库可以在Canvas中绘制系统所需多种样式的点、线、面以及文字。其中,断层则作为线状要素进行绘制,震源位置以点状要素进行渲染,要素名则以点状要素形式根据坐标采用绘制文本的方式进行绘制。通过设置不同的绘制顺序和属性,系统展现不同的叠加效果,通过用户交互,提供大量地理信息。
2 系统架构河南省地震构造查询系统架构分为数据存储层、逻辑服务层、应用表现层3个层次。
(1)数据存储层。数据是GIS的核心,也是WebGIS运行的基础,数据存储层为逻辑服务层提供所需数据服务,包括对空间数据的存储与管理等功能。在本层设计中,使用MySQL数据库存储并管理系统所需数据,包括地震信息、断层信息和剖面信息等。
(2)逻辑服务层。为了提供通过网络获取GIS数据以及各种服务的途径,在此次系统设计与开发过程中,使用IIS服务器(Internet Information Services)发布各种数据和服务,在网页上实现地理空间信息共享服务,同时负责空间数据业务逻辑的实现,如空间数据的存取、表现和操作等。
(3)应用表现层。用户通过浏览器访问系统模块。在本层设计中,将CSS与结构码HTML5结合,使用JavaScript脚本语言,对GeoJSON进行解析,实现WebGIS数据的表现,包括地图的显示与基本操作、GIS查询与分析结果的表现,即以浏览器方式为用户提供各种WebGIS的具体应用。
3 系统功能 3.1 系统运行的配置要求该系统运行的环境配置为:Windows 7 32/64位或更高版本(Windows Server 2008 32/64位Service Pack 2或更高版本)、CPU速度最低2.2 GHz、内存/RAM最小2 GB。
3.2 主要功能在系统建设过程中,以地震构造查询需求为出发点,在地震和活动断层空间位置二维可视化显示基础上,实现地震构造数据属性查询、空间统计查询、地图量测等基本功能,首页显示底图为天地图矢量图,可与卫星影像图相互切换,图层树控制各图层单独或叠加显示,系统主界面见图 2。
(1)地震构造信息查询。通过点击破坏性地震、现代小震、第四纪活动断层、断层剖面等查询模块,调用数据库获得该对象的属性值,如:断层属性信息可查询断裂出露状况、产状、最新活动时期、断裂规模、断裂性质等(图 3),同时增加典型地震地质剖面的查询功能(图 4),将已有野外实测地质剖面及人工地震成果剖面进行动态发布,并通过数据库中存储的URL,链接对应断层剖面图,在浏览器端显示,用户可便捷查询基础地质物探资料,判断断层属性信息的可靠程度。
(2)空间查询。空间查询包括模糊查询和条件查询2个功能,帮助用户快速识别并统计地震、活动断层的属性信息。
模糊查询功能:用户可在页面搜索框直接输入地震或活动断层名称,选择查询类别或者默认(图 5),包含此关键词的结果将生成统计列表,点击显示列表,均可实现地图定位,地图中心位置即为所点击对象的中心位置(该对象的集合轮廓呈高亮显示状态),该对象的属性信息则以表格形式呈现给用户。
条件查询功能:设定查询的空间区域或震级范围(图 6),查询区域包括河南全省或各地级市,通过选择查询生成统计列表;用户可以方便地查询每个城市的历史地震及发生时间、震级等信息。
多边形查询功能:用户可自由绘制多边形,查找多边形范围内发生的地震及活动断层信息,查询的地震以高亮定位显示(图 7),并同步生成相关查询结果的统计列表,如:输入某城市规划区拐点坐标,快速查询规划区内断层分布及地震信息。
(3)地图量测。通过地图量测功能,快捷地测量查询目标的距离或面积,如查询某建筑场地与活动断层或周边地震的距离,为建设项目选址等地震安全性初步评价提供依据。
4 思考与建议河南省地震构造查询系统摈弃传统的地图服务,探讨使用GeoJSON格式对地理要素进行分类预编码,实现以脱离插件的形式在浏览器端进行地图的动态绘制,既可减轻服务器压力,又可兼容多平台多系统,这种技术的普及有可能改变现有网络地图的商业模式。由于系统设计的矢量数据涉及河南省范围,如果矢量绘图区域较大,系统渲染速度将受到一定影响,提高大范围数据传输和绘制效率成为下一阶段研究的主要方向和内容。
地震构造信息查询系统的基础在于数据的完整与标准化处理,目标是为社会公众提供便捷有效的服务,由于河南省1:20万地震构造编图比例尺较小,部分断层的控制精度尚无法直接为工程选址服务,因此在系统下一步开发中,将结合河南省“十三五”地震构造探查及城市活断层探测项目,在全省“一张图”的基础上,不断更新河南省内区域性活动断裂及城市活断层探查的精细研究成果,为用户提供大比例尺活断层探查数据服务,并加强开发三维地质结构展示功能,实现活断层信息的立体模型展示。
5 结束语河南省地震构造填图项目是河南省地震构造查询系统开发的基础,随着地震构造探测研究程度的不断深入,及时更新或补充相关数据,形成一套精细的地震构造探查成果社会服务产品。该系统的开发将更好地服务于城市规划,为抗震设防以及基础地震地质研究等工作提供支持。
河南省地震构造查询系统技术开发的特点在于矢量数据的切片化和浏览器运行性能的优化。HTML5的Canvas标签使得浏览器能够以脱离插件的方式有效支持矢量数据可视化,结合矢量切片技术,利用分级、分页多种方式优化基础地理数据读取及绘制,达到前端快速显示的目的,并为用户提供便捷服务。
感谢宁夏回族自治区地震局王银、中国地震局地质研究所吴熙彦、郑州大学李健等专家在本文撰写过程中提供的帮助。
丁克奎, 钟凯文, 周旭斌. 基于WebSocket和GeoJSON的WebGIS的设计与实现[J]. 测绘通报, 2015, 11061106(2): 109-112. | |
冯威丁. 基于Hybrid App的矢量切片数据快速显示研究[J]. 电子技术与软件工程, 2017, 11061106(14): 193-194. | |
梁春雨, 李新通. 使用HTML5 Canvas构建基于GeoJSON的轻量级WebGIS[J]. 计算机科学与应用, 2012, 2(4): 189-196. | |
刘尧兴, 张扬. 牢固树立安全发展理念扎实推进河南省"十三五"地震构造探查[J]. 城市与减灾, 2018, 11061106(1): 60-65. DOI:10.3969/j.issn.1671-0495.2018.01.013 | |
孙晨龙, 霍亮, 高泽辉. 基于矢量瓦片的矢量数据组织方法研究[J]. 测绘与空间地理信息, 2016, 39(4): 122-124. DOI:10.3969/j.issn.1672-5867.2016.04.033 | |
孙璐, 陈荦, 刘露, 等. 一种面向服务器制图可视化的矢量数据多尺度组织方法[J]. 计算机工程与科学, 2014, 36(2): 226-232. DOI:10.3969/j.issn.1007-130X.2014.02.007 | |
王亚平, 蒲英霞, 刘大伟, 等. 基于TileStache的多源投影矢量数据瓦片生成技术研究[J]. 地理信息世界, 2015, 22(1): 77-81. DOI:10.3969/j.issn.1672-1586.2015.01.020 | |
张志友.基于瓦片的矢量图幅的分割与合并[D].大连: 大连理工大学, 2010. http://cdmd.cnki.com.cn/Article/CDMD-10141-1011022631.htm | |
Antoniou V, Morley J, Haklay M. Tiled Vectors: A Method for Vector Transmission over the Web[C]//Proceeding of the 9th International Symposium on Web and Wireless Geographical Information Systems. Maynooth, Ireland Springer-Verlag, 2009: 56-71. | |
Stuart G. HTML5 and the Canvas Element[M]//Introducing JavaScript Game Development. Apress, Berkeley, CA: Springer, 2017: 3-16. |