城市地震应急避难场所展示系统的设计与实现1

苏建锋 薄万举



城市地震应急避难场所展示系统的设计与实现1

苏建锋 薄万举

（中国地震局第一监测中心，天津 300180）

针对城市应急避难场所信息化建设过程中存在的问题，以天津市地震应急避难场所的实际情况为数据基础，开发了基于Google地图API技术的城市地震应急避难场所展示系统。该系统实现了应急避难场所信息查询、地图量测、避难场所最优路径和应急避险科普宣传等公共服务功能。系统的设计与实现不仅有利于城市居民及时方便准确地获取居住地周围地震应急避难场所空间分布信息和应急避险等知识，同时在城市突发灾害后的抢险救灾、疏散及安置居民等方面起到重要作用。

应急避难场所 JavaScript JQuery 数据库

引言

应急避难场所是一种城市突发公共事件后安置灾民的设施，是为城市居民躲避地震、洪水、爆炸、火灾和疫情等重大突发公共事件的安全避难场所（杨爽等，2013；熊焰等，2014）。应急避难场所主要以具有一定规模和避难功能的公园、绿地、广场、体育场和露天大型停车场等场地形式在城市中存在与分布的，其安全性、可达性和有效性使其在提高大中城市综合防灾能力、有效减轻突发性重大灾害事件引起的社会危害方面发挥着重要作用（范灵春等，2011）。我国早在21世纪初就明确要求各地尤其是省会和百万人口以上的城市要把应急避难场所的建设纳入城市总体规划当中。随着城市现代化建设的大发展，城市人口和规模空前膨胀，应急避难场所已经成为保障城市公共安全及应对突发公共事件的重要设施。

我国是一个幅员辽阔、物产丰富但自然灾害频繁、损失严重的国家。近年来政府对城市应急避难场所的高度重视使其建设得到了长足的发展，避难场所的建设规模与实用标准都取得了很大的提高。但是由于应急避难场所信息化建设缓慢，避难场所信息的发布与宣传手段过于单一，普及面窄，使得绝大多数周边居民都不清楚避难场所的位置、场所的详细信息、到达场所的最近路径和场所功能等公共服务信息，这将大大降低减灾效果（董曼等，2014；单宝艳等，2014）。因此，寻求一种有效的手段使得用户能够便捷快速地获取城市应急避难场所的信息情况及应急避险等科普知识是非常重要的。

本文基于Google地图API技术，结合天津市地震应急避难场所的实际情况，设计并实现了一个城市地震应急避难场所数据的后台管理、前台检索、前台数据动态展示等功能的综合展示系统。该系统为将城市地震应急避难场所和应急避险等科普信息快速、有效地传播出去，推动城市地震应急避难场所信息化建设方面提供了一个新的解决方案。

1　系统设计

系统的建设目标是以天津市地震应急避难场所信息为基础数据，结合城市地震应急避难场所调查资料和历史资料及现有的各种有用信息，以普通城市居民为主要用户，根据用户需要建设一个城市地震应急避难场所展示系统，方便用户随时随地方便快捷地查询到居住地周边的避难场所信息，以便在灾时做好应对措施。系统设计将坚持实用性、先进性、稳定性、可操作性和易扩展性等原则。

1.1系统数据库设计

数据库是整个系统的核心部分，其中各个表的设计对该平台的研发起到至关重要的作用。常用的数据库平台有Oracel、SQL Server、MySQL等，根据该系统的实际需求选用了MySQL数据库平台。该系统在逻辑上分为基础数据库和Google地图提供的地理数据库两部分。相关地理数据以Google地图为基础建立，由其提供的Maps API获取相关地理数据；系统基础数据库主要用于存放地震应急避难场所相关信息（赵国峰等，2014；孙路强等，2016）。

1.2系统总体结构设计

根据该地震应急避难场所展示系统的建设目标，采用B/S（浏览器/服务器模式）体系结构来构建系统。系统总体逻辑上分为3层架构：WEB应用服务器、属性数据库和Google地图数据库、客户端浏览器，层与层之间相互联系又各自独立，形成了一个独特的有机整体。

WEB应用服务器是整个展示系统的功能核心，实现地震应急避难场所信息管理的业务逻辑，负责连接属性数据库和地图数据库，为展示系统提供各种信息数据；属性数据库和Google地图数据库为系统提供避难场所的基础数据支持，包括避难场所的属性数据、Google地图数据、专题数据、自救互救避险科普知识数据及各种相关文档等；客户端浏览器是面向用户群提供信息服务的架构，通过用户交互向应用服务器发送请求，并解释服务器返回的数据显示给用户，将地震应急避难场所的相关信息动态地展示给用户，为用户提供便捷的服务（赵士达等，2014；仇尚媛等，2015）。其整体框架图如图1所示。

系统基于Google地图API技术，采用B/S模式的软件架构，使用JSP、Java、JavaScript和JQuery等语言，后台选用MySQL数据库，实现了地震应急避难场所地图化的管理及展示。用户只需要通过主流浏览器即可使用系统中的所有功能。根据系统框架图可知，用户与服务器交互的过程就是对不同数据的检索和展示的过程。通过Google Maps API获取地图图像数据并将其加载到地图的显示区域中，再通过属性数据库获取相关的标注数据后显示在地图上。

1.3系统主要功能设计

本地震应急避难场所展示系统分为前台展示端和后台管理端两部分，主要功能设计如图2所示。

1.3.1前台展示端

根据系统建设的目标和用户需求，系统前台展示端功能可描述如下：

地图操作：指地图浏览、地图量测和360度全景展示等操作，主要实现包括放大、缩小、漫游、量测两地距离、实地地图和卫星地图及全景地图的不同视角自由切换等基本功能。

信息查询：实现地图查询的基本功能，支持空间数据与其属性信息的相互查询，支持查询专项信息，如应急避难场所、避难场所就近的医院、商店、政府部门等信息。

应急避难场所信息展示：包括应急避难场所展示、避难场所最优路线和应急避险常识展示操作，主要实现应急避难场所分布的详细信息，包括名称、地址、场所面积、可容纳人数、场所简介等信息的展示功能；能够通过后台计算提供给用户所在区域的应急避难场所分布情况和用户以不同的交通方式（驾车或步行）到达指定避难场所的最优路线；提供各种灾害来临时人们应该注意和自救互救的科普常识、避难场所的使用及政府部门应急救援电话等信息。

评价与反馈：用户可对该展示系统和展示内容进行评价与建议的操作功能。系统平台管理人员可以根据这些意见与建议优化系统和更改展示内容，使系统平台和用户之间能形成一个良好的互动效果。

1.3.2后台管理端

后台管理端主要是对前台相关数据的集中管理，具体实现了应急避难场所信息属性数据、前台避险常识和评价与反馈的维护和管理。

2　系统关键功能实现

本系统部署环境为Windows Server 10，数据库为MySQL，应用服务器为Tomcat 8.0。本章根据地震应急避难场所展示平台的重点，主要介绍了Google Maps、城市应急避难场所信息地图化动态显示两部分的实现内容，包括了界面、部分代码功能的实现等。

2.1Google Maps的实现

（1）嵌入Google Maps API

要使用Google Maps API，就必须到该API的主页申请一个相应的KEY，其URL地址为https://developers.google.com/maps/documentation/javascript/?hl=zh-cn。单击“获取密钥”进入申请页面，在页面中引入Google Map服务。在使用Google Map服务之前，需要在该页面中引入相应的脚本，在页面中插入，如下所示代码：

将Google生成的API KEY放置于KEY参数中，sensor参数用于指明是否使用传感器确定用户的位置。

（2）页面中加入Google Maps

在本系统中需要创建一个Map属性对象来定义地图的属性，其代码如下：

mapOptions: {

zoom: 15,

center:

new google.maps.LatLng(39.08432957039356,117.2075420048825),

styles: _avocadoStyle

},

Center用于设置地图的中心点，所以创建一个LatLng对象，将位置的经、纬度坐标传递给此对象，本系统将地图的中心设置为天津。

在系统页面中使用参数（mapProp）在

元素（id为googleMap）创建一个新的地图，地图将以

元素中设置的大小来显示地图。具体代码如下：

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

2.2地震应急避难场所地图化动态显示

用户可以通过点击应急避难场所图标来打开该应急避难场所的详细信息窗口，该窗口包括应急避难场所的名称、地址、类型、面积、可容纳人数等相关信息，以便用户快速地了解每个应急避难场所的基本情况，主要代码如下：

this.showMsg = function (title, msg, callback) {

buildMsg(title, msg, false/*doConfirm*/, "", callback);

}

function getPlaceHtml(details) {

var html =

" useage: " + details. useage + "

" +

"Location: " + details.lat + " / " + details.lng + "

" +

"Name: " + details.name + "

" +

"Address: " + details.street +

"

" +

" capacities:   " +details. capacities + "

" +

" area:   " +details. area + "

"

return html;

}

onSelect: function(m, details) {

var msg = getPlaceHtml(details);

m.showMsg("地震应急场所详细信息", msg);

return true;

},

图3为用户登录应急避难场所展示系统的首页，在该界面通过一些简单的操作就可以看到天津市地区所有的地震应急避难场所地点的分布图及其详细信息。

图4为用户登录应急避难场所展示系统的最优路径查询模块，可查询用户所在区域的地震避难场所，找出最近的应急避难场所并通过后台计算给出到达该避难场所最优的路线。

城市地震应急避难场所展示系统不仅是给市民展示城市应急避难场所相关信息及应急避险科普知识的平台，还是学者研究该城市应急避难场所空间布局是否合理的一个窗口。以天津市为例，通过对该展示平台获取的数据进行整理分析，初步得出以下结论：天津中心城区与郊区间的应急避难场所分布具有明显的差距，中心城区避难场所分布较集中且均衡，郊区避难场所分布零散、不均衡。天津属于高密度的特大城市，尤其是中心城区，人口密度高达29173人/km2，这使得避难场所覆盖密度和重叠率较高，而实际人均有效避难面积却偏低，仅0.69m2，远低于国家最低标准1.5m2，显然不能满足大多数市民的避难需求。因此，天津市目前的应急避难场所空间分布还不甚理想，亟需提高，重点是提高应急避难场所数量供给和空间布局的合理性，以满足城市不同发展时期人们对紧急疏散空间的迫切需求。

3　结论

本文运用JSP、数据库等技术，提出以Google Maps API为平台来构建B/S（Browser/ Server）结构系统的思想，设计了城市地震应急避难场所展示系统的基本框架，研发了地震应急避难场所展示系统。该系统是应急避难场所信息化建设的一次全新的应用，其用户对象首次以城市居民为主，而非专业人士和政府官员，其目的是通过该系统对应急避难场所进行可视化、全方位、动态化的展示，使得普通老百姓可以方便、快捷、及时地直接获取当地地震应急避难场所的信息及应急避险知识，这对在突发灾害时快速传播避难信息和及时有序地疏散与安置居民、减轻灾害损失方面将起到积极作用。该系统建成后正逐步投入使用中，不仅实现了城市应急避难场所信息数据的有效管理，也实现了用户和管理员之间数据资源的有效整合与共享的预期目标。随着智能移动平台技术的不断发展，在下一步的工作中，我们将会把该系统的一些功能移植到智能手机端，为用户提供更为人性化的服务。

仇尚媛，周浩，王春等，2015．地震数据地图化动态显示．地震地磁观测与研究，36（5）：140—144．

单宝艳，郭金金，2014．基于GIS空间分析的城市避震疏散规划研究．测绘通报，（1）：86—89．

董曼，杨天青，2014．地震应急灾情信息分类探讨．震灾防御技术，9（4）：937—943．

范灵春，胡斌，李谊瑞，2011．西安市地震应急指挥技术系统设计与实现．震灾防御技术，6（2）：190—198．

孙路强，刘磊，朱宏等，2016．天津市地震局地震事件共享系统的设计与实现．震灾防御技术，11（1）：165—172．

熊焰，梁芳，乔永军等，2014．北京市地震应急避难场所减灾能力评价体系的研究．震灾防御技术，9（4）：921—931．

杨爽，张楠，赵士达等，2013．天津市地震应急避难场所试点建设．防灾减灾学报，29（4）：79—82．

赵国峰，李鑫，李丽等，2014．中国地震信息网速报信息实时同步设计与实现．震灾防御技术，9（2）：310—316．

赵士达，张楠，杨爽，2014．基于Android系统的避难场所查询软件开发．电子技术应用，40（3）：133—136．

Design and Realization of Display System of Urban Earthquake Emergency Shelters

Su Jianfeng and Bo Wanju

(First Crust Monitoring and Application Center, CEA, Tianjin 300180, China)

Aiming at the problems in the course of information construction of urban emergency shelters, we take the Tianjin earthquake emergency shelters as the data base to develop a Google Maps API technology-based display system of urban earthquake emergency shelters. The system implements emergency shelter information acquiring, map measurements, the best path to shelters, and emergency public service functions such as popular science propaganda. The system design and implementation will not only benefit citizens timely access to accurate earthquake emergency shelters around the residence of spatial distribution of information and knowledge of emergency, but also play the important role in emergency disaster relief, evacuation and resettlement of residents in order to reduce disaster losses caused by large earthquakes.

Earthquake emergency shelter; JavaScript; JQuery; Database

1基金项目 中国地震局第一监测中心科技创新主任基金（FMC2016006），科技部基础工作专项（2015FY210400）共同资助

2016-09-28

苏建锋，男，生于1981年。工程师。主要从事地震应急及形变资料处理与分析等方面的研究。E-mail：su_qw@ 163.com

苏建锋，薄万举，2017．城市地震应急避难场所展示系统的设计与实现．震灾防御技术，12（2）：392—398． doi：10.11899/zzfy20170216