城市交通警情WebGIS设计与开发
2018-10-19 04:00徐子惠王方雄顾双飞
软件 2018年9期
徐子惠，王方雄*，顾双飞，任 丹
城市交通警情WebGIS设计与开发
徐子惠1,2，王方雄1,2*，顾双飞3，任 丹1,2
（1. 辽宁师范大学 辽宁省自然地理与空间信息科学重点实验室，辽宁 大连 116029；2. 辽宁师范大学 城市与环境学院，辽宁 大连 116029；3. 大连市十一中学，辽宁 大连 116012）
城市交通警情WebGIS基于B/S架构，搭建具有较强交互性的系统界面，采用云数据库存储属性数据，采用SuperMap iServer发布定制地图，基于SuperMap iClient实现由简单到复杂分析功能的开发，设计了城市交通警情分析系统,开发了警情信息展示、警情量化、警情统计、警情部署等功能。结果表明基于WebGIS的城市交通警情分析系统的功能均可实现，有利于交通警情信息上报、信息可视化、数据管理分析以及警情处理一体化功能的实现，并具有可行性与可扩展性。
城市交通警情；警情分析；SuperMap iServer/iClient；WebGIS
0 引言
网络飞速发展的新时代，社会科技进步，随着人员整体素质提升，公安交通信息管理的传统方式正不断受到冲击和挑战，交通信息管理需要向更准确，更高效的目标发展[1]。面对种类与来源复杂的交通信息，用户需求也更为复杂[2]。对于交警来说，警情的及时上传与大量警情数据的存储、及时派出警力到现场处理等各类问题，成为解决警情问题的关键，对于警情的统计分析也会为交警对总体警情情况掌握、预测、控制提供良好的预判基础。因此对于交管部门来说，警情的准确、及时显示以及事发后的分析至关重要。WebGIS因其良好的可扩展性与跨平台性[3]，目前已有一些探索性WebGIS技术应用，如基于时空数据的警情研判系统[1]、交管信息共享WebGIS[2]、交警指挥集成平台[4]、交通管理指挥调度系统[5]等，但功能相对单一，针对交通事故、交通路况、交通设施、交通热点等综合警情信息的数据集成管理、分析及Web展示的网络信息系统尚较少见。本文基于主流的WebGIS平台（SuperMap iServer/iClient）一体化集成管理城市交通警情数据、研发统计分析综合与动态Web显示功能，建立基于阿里云数据库技术的城市交通警情数据集成管理数据库，探索适用于城市交通警情信息管理与服务功能的新思路与实用工具。
1 城市交通警情WebGIS系统设计
1.1 系统结构设计
城市交通警情WebGIS采用B/S模式（浏览器/服务器），将系统核心计算功能集中到服务器端。总体划分为客户端、服务器端与数据库。客户端为Web前端，即人机交互界面，负责向服务器发送请求，并将服务器端运算的结果进行可视化，Web界面采用HTML5、CSS3、JavaScript等前端开发工具构建。系统前端与后台通过AJAX进行异步数据交互，实现页面局部刷新[6-10]。服务器端负责处理客户端发来的请求，以及对数据库数据进行增删改查等操作，并将数据整理为JSON格式，通过Servlet与前台交互。数据库负责系统数据的存储，包括空间数据和属性数据；客户端向服务器端发送的请求符合HTTP协议[10]，系统结构如图1所示。
图1 系统结构
1.2 系统功能设计
城市交通警情WebGIS的功能包括基础地图功能、警情信息展示、警情分析、警力部署，如图2所示。基础地图功能包括地图浏览功能（地图缩放、拖拽、显示比例尺、显示鹰眼等）。工具模块包括距离测量、上报警情、天气信息查看。警情分析包括基础的信息显示，如实时信息展示、分类警情展示。警情可视化即对警情信息可视化表达，着重表达警情信息与地图的交互，包括查看不同行政区警情数量的分区统计、聚散点图层、热力图等。对警情的分析中还包括数据统计功能，以直观的图表形式展示统计结果，如警情类型统计、警情处理情况统计、警情上报时间段统计。警情部署模块中包括显示当前警力部署情况、添加部署、路径分析功能。
图2 功能模块
1.3 系统界面设计
城市交通警情WebGIS的系统Web界面采用HTML5搭建框架，主要通过、
等标签布局整体页面，运用
- 、
- 等创建下拉菜单等，页面整体采用自适应模式，可适应不同大小屏幕显示需求。采取CSS进行界面整体风格设计，引用BootStrap插件可简化对界面的设计，有利于界面风格统一。采用JavaScript与JQuery设计页面交互功能，提高用户使用体验。JQuery可简化对DOM的引用。引用Echarts插件作为图表显示接口，使用BootStrap-DatetimePicker作为日历插件作为日期选择器。
1.4 系统数据库设计
地图底图数据包括境界与行政区界，包括行政区划面数据、行政区界线数据；包括国道、省道、城市快速路、一级公路与二级公路等线要素；以及部分基础设施如火车站、停车场等点数据。这些基础数据通过SuperMap iDesktop 整合制作为地图底图，通过SuperMap iServer发布为REST地图服务。城市交通警情数据为矢量数据，存于阿里云数据库，属性数据字典如表1所示：
表1 路况数据属性数据字典
Tab.1 The property data dictionary of road condition
2 城市交通警情WebGIS系统开发
城市交通警情WebGIS系统功能的实现依赖于SuperMap iServer发布地图服务与SuperMap iClient提供的功能接口。本系统通过SuperMap iDesktop ,以及本地数据，如行政区划、路网等，创建自定义地图，并构建基于主干路路网的网络数据集，以用于出警路径分析。发布自定义地图服务，有利于各地交管部门将本地管辖区作为重点，并且可加入具有本地特色的图层，具有较强自定义性。将创建好的地图通过SuperMap iServer发布REST地图服务，通过SuperMap.Map方法访问发布后的服务地址，即可调用自定义地图。地图模块的基本功能，可通过Control接口中提供的Zoom、Navigation、Overviewmap、ScaleLine等方法实现，包括地图鼠标缩放、缩放控件、鹰眼、比例尺等。测距功能通过DrawLine、MeasureParameters、Geometry等接口共同实现测距功能。天气信息为从网络上的接口中获取的信息，解析后传给前端。警情分析系统侧重于城市交通警情信息展示、警情可视化、警情统计分析以及警情部署。
2.1 城市交通警情展示
城市交通警情数据从其数据量以及可从其背后挖掘的信息价值来看都可称为大数据，而可视化分析也是大数据分析的重要方法。任何系统都是人与计算机的共同合作，大数据可视化的目的是将计算机分析的结果，用人可以直观理解的方式进行显示，将人、机有机结合，借助人机交互的分析方法与技术，有助于人们更高效的理解大数据深层含义[11]。
城市交通警情信息的展示包括表格展示以及与地图互动形式展示，表格均通过BootStrap-Table插件实现，可以实现信息搜索以及分页功能。信息展示包括实时警情信息展示、分类警情展示。实时警情展示是通过SetInterval方法以及AJAX，每1分钟访问一次数据库实现页面异步局部刷新。分类警情是将所有警情信息分为交通事故、交通拥堵以及交通热点，其中交通热点包括群众求助、路面损毁等。点击分类信息中某条信息，利用Marker类库可以新建点标记，通过AddMarker方法将标注添加到地图上相应位置，为地图上的点添加点击事件监听，利用SuperMap.Popup.Anchored新建提示框，可以出现该条警情的具体内容，并且可以在搜索框搜索相关字段，如时间或警情类型或地址，直接输入即可在表中查询出相关警情信息。
2.2 城市交通警情可视化
信息的显示基于Layer，即图层，先定义图层再向图层添加各类显示功能。功能不同的图层通过不同接口建立，如通过AddFeatures方法将点、线、面等添加到各图层中等。因此，与地图相关的不同可视化操作，均在其自身的图层中进行。分区统计是在地图上以大小不等的圆盘，表示市内各区警情数量的多少，通过SuperMap.Geometry.Point设置中心点坐标，并设置其相应名称与对应数值,将这些值作为SuperMap.Feature.Vector方法的参数画圆。
大数据的展示并不需要将所有数据一一列举，人们往往关注数据的聚合状态，因此，利用聚散点功能可以通过点聚合的方式显示大量点数据，当点很多或很密集的时候，将一定范围内的点聚合为一个聚合点，该聚合点反映了这些点的数量和大体位置信息，当放大地图时，聚合点会逐步散开为具体警情点，此时可以查看该点信息。聚散点功能通过Layer.ClusterLayer方法建立聚散点图层，并通过Control.SelectCluster方法添加鼠标滚动事件，来控制点的聚合，功能实现如图3所示。热点图也有助于对警情点进行直观反映，以地图热点形式显示所选日期内警情，直观的展示警情发生热点区。该功能的实现通过SuperMap.Geometry.Point画点，并设置该点的半径、坐标等信息。
2.3 警情统计
利用ECharts对统计分析栏目下的警情类型分析、处理情况分析和警情的上报时间段进行展示。ECharts是一个纯 JavaScript 的图表库，底层依赖轻量级的Canvas类库ZRender，提供直观、可交互、高度个性化定制的数据可视化图表。根据本系统实际的数据分析情况，选择饼状图和柱状图两种图表作为展示警情统计分析的结果较为合适。
图3 聚散点功能界面
2.4 警力部署
系统提供警力部署相关功能，包括显示部署、添加部署以及路径分析。显示执勤点通过BootStrap- Table显示表格，并可以查询表内信息，单击表格触发该表格的OnClickRow方法，再通过超图类库Marker创建点覆盖物，可实现在地图上显示该警员执勤地点，双击出触发表格的OnDblClickRow方法，可显示警员详细信息。添加部署是对数据库的增加操作，通过