基于Google Maps API和AJAX的地震震情灾情展示系统

0 引言

地震发生后，及时将地震的震情和灾情向公众展示，对于提高信息透明度、保障公众知情权、遏制谣言传播、缓解社会焦虑具有积极的意义。目前，地震行业建立起全国地震速报信息共享系统(EQIM)，实现了省级以上地震台网(遥测)中心地震速报数据信息的快速通报、汇集与共享，是最权威的震情数据来源。通过对EQIM数据库的监听，可第一时间将震情信息推送到Web浏览器、微博、微信等多种终端，受众面广，信息具有很强的时效性。目前这方面的研究比较多，也已经有成熟的产品，产生了很好的社会效益[1-3]。公众除了要了解哪儿发生了地震、发生了多大的地震，也会非常关注震后的灾情，而来自震后灾区人员上报的第一手灾情信息无疑是最直观、最准确的。山东省地震局董翔主持的地震科技星火计划项目“面向公众的地震灾情发布与获取技术研究”(项目编号XH15025Y)设计了基于Android、ios等移动平台的网络灾情上报系统(以下简称“灾情上报系统”)，可获得第一手的灾区人员上报的灾情信息，并将灾情信息汇总后向公众发布，能够很好地回应外界对震后震区受灾程度的关切。

本研究将通过监听获得的EQIM震情数据和通过灾情上报系统收集到的震区灾情数据相结合，实现震情、灾情信息的关联。选择某一个地震，可查询针对该地震上报的灾情信息，震情、灾情都以图标形式直观地显示在Google Maps底图上，并以不同的符号、颜色进行区分，可直观显示震情、灾情态势，也可点击图标获得详细信息，系统采用B/S架构，兼容性强，支持多种移动终端，是一种灵活快速的震情灾情综合展示平台。

1 关键技术

1.1 云系统架构设计

系统总体分为存储层、接口层、汇集层和展示层。其中，存储层主要存储各类文字、照片、视频形式的信息，由百度云平台中mongoDB云数据库和BCS云存储搭建基础服务平台，接口层为上层应用提供服务接口，采用百度云引擎jetty执行单元封装云数据存储层相关交互接口提供后台服务，汇集层处理获取的震情灾情数据，展示层处理对震情灾情数据的访问请求。系统部署在一个可同时连接行业网与互联网的信息同步服务器上，实现开机自动启动服务，连接EQIM系统，在不给EQIM服务器带来压力的情况下同步地震自动速报和正式速报的信息，并可根据AU、CC、CD等标识实现不同的处理动作，将处理后的信息向云平台接口进行同步。

（2）对硬件和网络有要求。使用微信公众平台前提是有移动设备并且能联网，调查问卷显示，这对有些学生产生了经济上的负担，好在近些年国家一直在督促运营商下调资费，相信不久的将来这个约束会改善。在设计学习资源时也尽量考虑周全，以最小消耗为原则。

1.2 基于Google Maps API和AJAX技术的WebGIS开发

Google Maps API是谷歌地图的应用程序编程接口，通过该接口定义的类和方法可直接访问谷歌地图数据库，省却了部署和维护独立的地理信息数据库的成本，可以快速开发轻便的基于浏览器的WebGIS应用。AJAX(Asynchronous JavaScript and XML)是一种网页异步更新技术，本系统对EQIM系统、灾情上报系统以及谷歌服务器的访问都采用AJAX方式，震情、灾情数据的加载流畅、快速。

2 系统设计

系统总体架构如图1所示，客户端为支持html、css、JavaScript的浏览器，目前大多数浏览器均可满足，系统可在多种移动终端上正常运行。前端通过AJAX方式与后台服务器进行数据交互，通过Google Maps API实现了地图的缩放、平移以及叠加层的创建、信息关联展示等WebGIS功能，EQIM监听模块定时访问EQIM服务器，获取并过滤地震消息，将震情数据存储在缓存列表，灾情数据访问模块读取灾情上报系统服务器中存储的灾情数据。

本系统的灾情数据来源于灾情上报系统，利用该系统的灾情识别码和描述码分别确定灾情类别和级别，对应图2的category和level字段。灾情上报系统的识别码编码规则如图3所示，将灾情分为震感、人员伤亡情况、房屋类破坏、生命线工程破坏等6大类，每一大类又分为多个小类。其中，震感的识别码为AA和AB，AA的描述码为1～9，对应烈度为1～9度，AB的描述码为1～3，对应烈度为10～12度。

  

图1 系统架构示意图

3 综合展示功能的实现

3.1 地图加载和震情信息展示

在JavaScript程序的入口加载谷歌地图，其中mapContainer为地图显示的容器，是一个div类型的DOM元素，myOptions为定义了地图中心点坐标、缩放等级等初始变量的对象：

var map = new google.maps.Map(document.getElementById("mapContainer"), myOptions);

三是，内容编排顺序存在差异．具体而言，苏教版编排的4个例题是“分数除以整数”“整数除以几分之一”“整数除以几分之几”及“分数除以分数”，其具体展开方式如下．

通过AJAX方式获取震情数据，EQQueryHandler.ashx为服务器端的后台处理程序，实现了对EQIM系统的监听，通过带参数的访问请求获得了震情数据，然后跳转到processEqData函数对数据解析：

var url = "EQQueryHandler.ashx?Source=eqim";

这跟很多国内大型公立医院的情况颇为相似。在卫生部门推动下，国内很多大型医院已经开展预约诊疗服务，希望逐步引导患者改变无序就医的习惯。福建省立医院前期也推出分时段预约，目前医院80%的患者都是预约就诊；医院接受预约，最初按照每位患者4分钟就诊时间来设定。

$.getJSON(url, processEqData);

processEqData函数通过一个for循环处理接收到的JSON格式震情数据，根据发震时刻、经纬度、震源深度、参考地点等参数一一创建谷歌地图的Marker对象，并为每一个marker对象添加单击事件响应。单击marker将会弹出该地震的详细信息：

数据查询成功后，转到processDsData函数进行处理，processDsData函数遍历接收到的JSON数据，根据category字段判断灾情类别，根据level字段判断灾情级别，然后根据灾情类别和级别确定灾情显示符号。

var marker = new google.maps.Marker({

selectControl.options.add(new Option("一个月内灾情",3));

position: latLng,

icon: markerIcon,

国有企业领导人员网络培训才刚刚起步，发展前景广阔但任重道远，在《条例》和《规划》的指引下，各相关方要适应新趋势，树立新理念，构建新生态，这是推进国有企业领导人员网络培训高质量发展的必由之路。正如马云在第二届世界互联网大会闭幕式演讲中提到：“互联网必须是一个生态，这个生态必须由多物种组成。物种越丰富，生态越健康。参与的人越多，才能真正做到共荣共存、相互依赖。”所以，国有企业领导人员网络培训也是一个生态，只有各相关方共同努力，携手并进，这个新生态才能显示出勃勃生机，才能真正体现网络培训的价值，才能更好为建设高素质专业化国有企业领导人员队伍发挥重要作用。

然而，技术仅仅是方程的一部分。企业必须将“数据分析”嵌入到由人类参与的商业决策制定过程中，这才是“数据分析”体现其价值的时刻。

title: 'M' + eqMag + '，' + eqRegion

});

google.maps.event.addListener(marker, 'click', openInfoWindow(infoWindow, marker));

selectControl = document.createElement('select');

三天后，我和老婆坐上了开往省城哈尔滨的特快列车。我还想补充的是，那天又下起了大暴雪，我担心路上出事，劝老婆把票退了，择日再走，老婆却固执地说：不，只要火车不停运，就是下刀子也得走。

3.2 灾情数据读取和分类

前端采用AJAX方式对灾情数据进行查询：

url = 'EQDRQueryHandler.ashx?time=' + eqTime + ',' + timeSpan;

$.getJSON(url, processDsData);

其中，EQDRQueryHandler.ashx是服务器端的处理程序，前端对灾情数据的请求传递了两个参数：eqTime为发震时刻，timeSpan为震后时间，通过这2个参数获取了针对某个地震震后一定时间内上报的灾情数据，如果灾情数据请求时不传递参数，则返回1个月内上报的所有灾情，系统前端设计了一个时间选择控件，有震后2小时、4小时、6小时等选项，用于筛选震后不同时间段上报的灾情，分别显示。查询成功后，返回的数据如图2所示：

  

图2 通过AJAX请求获得的灾情数据

五月中旬的一天上午，明媚的阳光透过玻璃窗照进屋里。杨秋香又外出找人打扑克去了，杨力生一个人在家。忽然手机铃声响了，有客户来电话约他外出商量业务。他顾不得商量，与客户借口说身体有些不舒服，打开电脑便和那位姑娘聊起来。及至打开视频和姑娘见面，他就像《西游记》里的猪八戒被女妖怪迷住一样，魂儿一下子便被姑娘给摄走了。其实，论相貌这位姑娘也不过一般。可是，就因为在视频上甜言蜜语聊过几次，在他的眼里，这姑娘的美不亚于戏剧中的西施，又如《三国演义》中的貂婵，不，在他眼里这姑娘干脆就是月宫中的嫦娥……

1.教学共同体彰显内涵特色。归根到底，创新创业教育是一种教育。在实行教育的时候要充分尊重学生的主观需求，无论是在课程安排还是教学内容方面都要契合学生的发展需要，严格调研和论证相关制度安排，建构彰显内涵特色的教学共同体［6］。

分享收获农场不仅种蔬果、卖蔬果，还开辟了“田间教育职能”板块。早在几年前，农场就开始展开丰富的服务式体验活动，有帮助小朋友了解蔬果、了解自然的“食农教育”“亲子活动”“夏令营”，也有针对专业农民进行有机种植培训的“新农人培训”等等。

除此之外，我们还注重改进考核方式，如在卫生学基础理论考核时，利用案例分析进行考查；加大实践技能考核力度，选取卫生学最重要的一些实践技能（如水质检验、食谱编制等）进行考核等。

  

图3 灾情上报系统的识别码编码规则

根据上述的灾情分类，本系统制作了一套灾情符号库，并用红、橙、黄、蓝、绿5种颜色分别表示不同的受灾程度，红色最高，绿色最低，通过图标颜色可直观显示灾情态势。部分灾情符号如图4所示：

  

图4 灾情符号库

3.3 震情灾情信息关联

系统创建了一个select控件，用于选择显示灾情信息：

eqMarkers.push(marker);

selectControl.options.add(new Option("震后2小时灾情",0));

selectControl.options.add(new Option("震后4小时灾情",1));

selectControl.options.add(new Option("震后6小时灾情",2));

map:map,

selectControl.options.add(new Option("清空灾情显示",4));

添加select控件“change”事件的响应：

google.maps.event.addDomListener(selectControl, 'change', function() {

switch(selectControl.selectedIndex){

……

}

(2)1990-2018年，知识服务领域每年新增的研究者数量逐步增长，而能够常年坚持并持续有研究成果呈现的人员数量较少，表明该领域的研究人员存在追逐热点，很少能够进行持续性研究，不利于这项研究工作的深入以及事业的可持续发展。

});

在switch函数体内，为一个全局变量timeSpan赋值，用于表示选择显示哪一段时间的灾情信息。当选择显示一个月内所有的灾情信息时，通过无参数的AJAX请求获得全部灾情数据；当选择显示某一段时间的灾情信息时，需要先点击一个地震图标，然后再通过带参数的AJAX请求获得该地震震后某段时间内上报的灾情。灾情信息以图标的形式显示在地图上，点击灾情图标，会显示灾情的详细信息。如图5所示，为2017年9月30日四川广元市青川县发生M5.4地震后2 h内上报的灾情信息，共有102个，点击其中一个，显示了该灾情的详细信息，包括灾情上报时间、位置、类别、受灾程度、文字和图片描述等内容，该灾情信息的上报位置为绵阳市，可见本次地震的影响波及距离震中100 km外的绵阳：

  

图5 灾情详细信息

系统对灾情图标采用了聚类显示的方法，当一定范围内的图标过于密集时，将用一个聚类对象来显示；当图标比较稀疏时，才可以显示灾情图标本身。例如，图5地图左上角有一个内部包含数字2的蓝色圆圈，即为一个聚类对象，数字2表明该对象包含了2个灾情图标。

4 结束语

本研究通过访问后台的处理程序，获得了震情和灾情数据，并将震情灾情信息进行了关联展示，实现了一种震情灾情信息的综合展示系统，有利于地震部门信息快速发布，也为公众查询提供了便利。不足之处在于灾情信息来源比较单一，在之后的研究中，将扩展灾情数据的获取途径，尝试访问其他的灾情数据源。

参考文献：

[1] 李红，蔡寅，李永红，等．地震速报信息快速提取及WEB信息发布功能的设计与实现[J]．震灾防御技术，2015，10(1)：184-191．

[2] 贾宁，孙哲，韶丹．地震速报微信自动推送系统设计[J]．地震地磁观测与研究，2016，37(2)：165-170．

[3] 肖健，侯建民．地震速报微博发布系统的研发[J]．中国地震，2015，31(2)：456-460．