0 引言

地震目录是以记载地震事件的发震时刻、震中位置、震级强度、震源深度等参数为主要内容的记录集合。目前，我国各地震台网相继建立起政务网站发布地震信息(夏仕安等，2013；周浩，2015)，但地震信息的展示方式主要还是集中在二维平面上。地震事件是空间感较强事件，二维地图展示方式较为单一，直观形象感受效果不佳。日本作为地震频发国家，其地球科学和灾害防御研究所(NIED)每年都会发布日本的震源深度分布图和折纸模型，以帮助公众理解该国地震活动的分布和特点(赵曦等，2014；刘磊等，2014)。

随着HTML技术的不断发展，HighCharts、Flot和ECharts等图表可视化工具为实现海量数据在Web服务中的动态展示起到关键作用。本文利用百度地图为底图，侧重于将地震目录数据中的震源深度数据作为展示要素的一个重要参数，参照《地震地热说原理与应用》(陈立军，2012)中的深度分色作图方法，结合安徽省地震信息化工作的实际需要，运用WebGIS技术、Echarts可视化插件全景技术等构建二、三维一体化地震信息Web展示系统，

实现地震目录信息在WebGIS系统中二、三维一体化的空间展示及查询效果，并能够叠加活动断裂和台站信息，直观查询地震事件与断裂、台站之间的空间关系，加强公众结合区域特征观看和理解安徽省地震活动的直观性和感官效果。

1 系统设计 1.1 系统架构

地震信息二、三维一体化系统构建基于GIS支撑平台——地震目录数据与地理空间有机融合的总体结构，充分体现了地震信息的时空特征，整体采用B/S的体系架构，以满足社会公众用户对数据服务便捷性和易用性的需求(王雨竹等，2013)。同时，系统应充分体现数据服务可视化和直观性的需求，能够实现便于用户理解、易于操作的PC端，移动端界面查看，体现图形和数据相互对应、所见即所得的服务思路。

1.2 功能模块

考虑到安徽省地震信息可视化服务系统服务公众的需求定位，故整体采用动态标绘+地图服务的模式，以提供二、三维一体化的地震信息展示效果。系统设置视图操作、要素加载、属性关联、属性查询、空间查询和三维可视化等功能，并支持获取鼠标位置和网站操作手册查看功能(图 1)。视图操作模块实现了地震信息与Web地图之间的关联操作。要素加载模块采用动态标绘+地图服务的模式，可向用户直观展示地震数据在百度地图上的属性信息，以实现大规模地震信息在地图上的动态展示(汤国安等，2012；徐丹等，2016)，公众用户可快速自主地通过地图缩放方式，了解安徽省的地震事件、活动断裂、地震台站分布以及断裂与地震事件间的关系。属性关联模块实现了地图上的地震信息与列表信息之间的联动操作，以方便用户查询信息。属性查询模块实现了地震三要素条件约束下的地震目录信息查询和展示。空间查询模块通过建立某次地震事件的缓冲区范围，方便用户查询地震事件与活动断裂之间的空间关系。三维可视化模块向用户展示历史地震目录的动态三维模型以及安徽省三维虚拟化地震观测台站分布，旨在通过此功能扩展网站的互动性和直观性。

1.3 程序设计

系统采用Visual Studio 2012开发平台，整体运用ASP.NET MVC 4开发模式和C#语言进行应用程序设计和数据层的连接。数据层的底图数据为百度地图，数据库数据包括历史地震目录点数据、断裂带数据、台站数据。浏览器前端的地图浏览和网页界面样式设计采用JavaScript嵌入百度API以实现地震数据的地图服务，运用HTML5和CSS3进行页面样式设计。系统动态可视化整体设计的插件主要采用Echart3.0和JQuery EasyUI1.5.5.1，最终以一种交互式方式展示给公众。

1.3.1 空间查询

通过右键点击“地震点”进行空间查询，生成查询范围。若查询附近地震点，则遍历地图要素，找出所有的点要素，利用BMapLib.GeoUtils.isPointInCircle()函数判别地震点是否在范围内，若是，则重新生成此点要素；若查询附近断裂带，则找到所有的断裂带线要素并排除行政边界线要素，然后遍历此线要素的折点，若有1个折点在此范围内，则判定此线要素和范围相交，利用线要素折点数组重新生成1个线要素加载到地图视图。

1.3.2 加载断裂带

断裂带数据在数据库中是以点的格式进行存储的。因百度地图加载线要素需要此线要素的点数组，所以在后台需要读取断裂带点数据并进行处理，返回需要的数据格式。前端在创建线要素的同时并附加自定义属性，将属性赋值为断裂带名称，以便与属性表进行联动交互。同时，线要素有信息窗口，可显示断裂名称，点击“详细信息”按钮跳转至新页面显示断裂带属性。页面跳转之间的数据传递采用会话存储sessionStorage方法，当用户点击此线要素时，可将此线要素的属性存入会话中。

1.3.3 地震目录三维可视化

通过右键点击并采用Echart可视化插件，结合示例Demo，对前端数据进行处理，通过前端接收到来自后台的Json数据，将Json数据转换成JavaScript数组对象，最终完成模型构建。示例代码如下

Json数据转成JavaScript数组对象

function JsonToArray(_data){

   var dataPost = new Array()；//申明1个一维数组

   for(var i = 0；i < _data.length；i++){

     dataPost[i] = new Array()；

     var item = _data[i]；//逐行提取数据

     //{"id":"1", "date":"1970/5/9/周六", "time":"15:37:00", "longitude":"116.4117307", "latitude":"31.00431174", "magnitude":"3.6", "depth":"0", "location":" "}

     (dataPost[i]).push(item.location)；

     (dataPost[i]).push(parseFloat(item.longitude))；

     (dataPost[i]).push(parseFloat(item.latitude))；

     (dataPost[i]).push((parseFloat(item.depth)) * (-1))；

     (dataPost[i]).push((parseFloat(item.magnitude)) * 10)；

   }

   data = dataPost；//将局部变量赋值给全局变量

}

自定义信息窗口

Tooltip：{

   Trigger："item"，

   Formatter：function (param) {

return "经度：" + (param.data[0]).toFixed(3) + '°E < br/ > 纬度:' + (param.data[1]).toFixed(3) + '°N < br/ > 震源深度：' + -(param.data[2]) + ' km < br/ > 震级大小：' + param.data[4]/10；

   }

}

2 结果 2.1 要素展示

系统实现了地震要素的分级显示和震源深度颜色区分显示，在此基础上能够实现地震事件时间、震级的条件筛选查询，并能够进行左边地图显示与右边列表的联动查询，以展示地震三要素信息及断裂属性信息(图 2)。

2.2 空间查询

系统不仅通过震级大小对地震点要素大小进行分级显示，同时引入震源深度作为地震点要素颜色区分的参数。在此基础上，叠加活动断裂，通过建立空间缓冲区范围，能够直观地查询断裂与地震事件间的关系(图 3)。

2.3 热力图分析

由于Echarts底层基于ZRender，通过动态热力图展示，可查看历史地震发生频度的分布情况(图 4)。

2.4 地震目录三维动态立体可视化

Echarts底层基于ZRender，具有丰富的可视化工具，可在百度地图上进行扩展，因此，系统的地震目录三维动态展示功能基于此项技术，以震源深度为主要展示要素在三维空间下对历史地震目录进行展示(图 5)。

2.5 地震台站二、三维可视化

二维界面下地震台站信息采用左右布局整体设计，右侧为台站列表，左侧为台站地图分布展示，点击图标弹出地震台站信息窗，信息窗内容是台站文字简介(图 6)。同时，通过点击信息窗下方台站全景的“点击进入”按钮，可进入台站三维实景环境，实现与浏览者的交互，提升系统的展示效果。

3 结束语

目前，公众对地震行业仍存在诸多误解，误解多源于不了解，因此，需要寻求更多途径打开与公众沟通的桥梁与纽带(费鑫，2012；张孟怡等，2017)。本文的地震信息二、三维一体化平台建设工作，基于上述需求，旨在针对传统地震信息服务平台数据表现形式单一的问题，丰富地震信息的展示方式，加强公众观看和理解区域地震活动的直观性和参与性。系统通过二、三维一体化的设计思路，构建基于B/S架构的集大规模地震目录数据的地图发布、图形化展示、三维可视化展示、三维全景漫游等功能于一体的服务系统，以丰富地震公共服务平台的功能和实用性，向社会公众提供生动、直观的地震科学信息服务。