城市交通警情WebGIS設(shè)計(jì)與開(kāi)發(fā)
2018-10-19 04:00:44徐子惠王方雄顧雙飛
軟件 2018年9期
徐子惠，王方雄*，顧雙飛，任 丹
?
城市交通警情WebGIS設(shè)計(jì)與開(kāi)發(fā)
徐子惠1,2，王方雄1,2*，顧雙飛3，任 丹1,2
（1. 遼寧師范大學(xué) 遼寧省自然地理與空間信息科學(xué)重點(diǎn)實(shí)驗(yàn)室，遼寧 大連 116029；2. 遼寧師范大學(xué) 城市與環(huán)境學(xué)院，遼寧 大連 116029；3. 大連市十一中學(xué)，遼寧 大連 116012）
城市交通警情WebGIS基于B/S架構(gòu)，搭建具有較強(qiáng)交互性的系統(tǒng)界面，采用云數(shù)據(jù)庫(kù)存儲(chǔ)屬性數(shù)據(jù)，采用SuperMap iServer發(fā)布定制地圖，基于SuperMap iClient實(shí)現(xiàn)由簡(jiǎn)單到復(fù)雜分析功能的開(kāi)發(fā)，設(shè)計(jì)了城市交通警情分析系統(tǒng),開(kāi)發(fā)了警情信息展示、警情量化、警情統(tǒng)計(jì)、警情部署等功能。結(jié)果表明基于WebGIS的城市交通警情分析系統(tǒng)的功能均可實(shí)現(xiàn)，有利于交通警情信息上報(bào)、信息可視化、數(shù)據(jù)管理分析以及警情處理一體化功能的實(shí)現(xiàn)，并具有可行性與可擴(kuò)展性。
城市交通警情；警情分析；SuperMap iServer/iClient；WebGIS
0 引言
網(wǎng)絡(luò)飛速發(fā)展的新時(shí)代，社會(huì)科技進(jìn)步，隨著人員整體素質(zhì)提升，公安交通信息管理的傳統(tǒng)方式正不斷受到?jīng)_擊和挑戰(zhàn)，交通信息管理需要向更準(zhǔn)確，更高效的目標(biāo)發(fā)展[1]。面對(duì)種類(lèi)與來(lái)源復(fù)雜的交通信息，用戶需求也更為復(fù)雜[2]。對(duì)于交警來(lái)說(shuō)，警情的及時(shí)上傳與大量警情數(shù)據(jù)的存儲(chǔ)、及時(shí)派出警力到現(xiàn)場(chǎng)處理等各類(lèi)問(wèn)題，成為解決警情問(wèn)題的關(guān)鍵，對(duì)于警情的統(tǒng)計(jì)分析也會(huì)為交警對(duì)總體警情情況掌握、預(yù)測(cè)、控制提供良好的預(yù)判基礎(chǔ)。因此對(duì)于交管部門(mén)來(lái)說(shuō)，警情的準(zhǔn)確、及時(shí)顯示以及事發(fā)后的分析至關(guān)重要。WebGIS因其良好的可擴(kuò)展性與跨平臺(tái)性[3]，目前已有一些探索性WebGIS技術(shù)應(yīng)用，如基于時(shí)空數(shù)據(jù)的警情研判系統(tǒng)[1]、交管信息共享WebGIS[2]、交警指揮集成平臺(tái)[4]、交通管理指揮調(diào)度系統(tǒng)[5]等，但功能相對(duì)單一，針對(duì)交通事故、交通路況、交通設(shè)施、交通熱點(diǎn)等綜合警情信息的數(shù)據(jù)集成管理、分析及Web展示的網(wǎng)絡(luò)信息系統(tǒng)尚較少見(jiàn)。本文基于主流的WebGIS平臺(tái)（SuperMap iServer/iClient）一體化集成管理城市交通警情數(shù)據(jù)、研發(fā)統(tǒng)計(jì)分析綜合與動(dòng)態(tài)Web顯示功能，建立基于阿里云數(shù)據(jù)庫(kù)技術(shù)的城市交通警情數(shù)據(jù)集成管理數(shù)據(jù)庫(kù)，探索適用于城市交通警情信息管理與服務(wù)功能的新思路與實(shí)用工具。
1 城市交通警情WebGIS系統(tǒng)設(shè)計(jì)
1.1 系統(tǒng)結(jié)構(gòu)設(shè)計(jì)
城市交通警情WebGIS采用B/S模式（瀏覽器/服務(wù)器），將系統(tǒng)核心計(jì)算功能集中到服務(wù)器端?？傮w劃分為客戶端、服務(wù)器端與數(shù)據(jù)庫(kù)?？蛻舳藶閃eb前端，即人機(jī)交互界面，負(fù)責(zé)向服務(wù)器發(fā)送請(qǐng)求，并將服務(wù)器端運(yùn)算的結(jié)果進(jìn)行可視化，Web界面采用HTML5、CSS3、JavaScript等前端開(kāi)發(fā)工具構(gòu)建。系統(tǒng)前端與后臺(tái)通過(guò)AJAX進(jìn)行異步數(shù)據(jù)交互，實(shí)現(xiàn)頁(yè)面局部刷新[6-10]。服務(wù)器端負(fù)責(zé)處理客戶端發(fā)來(lái)的請(qǐng)求，以及對(duì)數(shù)據(jù)庫(kù)數(shù)據(jù)進(jìn)行增刪改查等操作，并將數(shù)據(jù)整理為JSON格式，通過(guò)Servlet與前臺(tái)交互。數(shù)據(jù)庫(kù)負(fù)責(zé)系統(tǒng)數(shù)據(jù)的存儲(chǔ)，包括空間數(shù)據(jù)和屬性數(shù)據(jù)；客戶端向服務(wù)器端發(fā)送的請(qǐng)求符合HTTP協(xié)議[10]，系統(tǒng)結(jié)構(gòu)如圖1所示。
圖1 系統(tǒng)結(jié)構(gòu)
1.2 系統(tǒng)功能設(shè)計(jì)
城市交通警情WebGIS的功能包括基礎(chǔ)地圖功能、警情信息展示、警情分析、警力部署，如圖2所示。基礎(chǔ)地圖功能包括地圖瀏覽功能（地圖縮放、拖拽、顯示比例尺、顯示鷹眼等）。工具模塊包括距離測(cè)量、上報(bào)警情、天氣信息查看。警情分析包括基礎(chǔ)的信息顯示，如實(shí)時(shí)信息展示、分類(lèi)警情展示。警情可視化即對(duì)警情信息可視化表達(dá)，著重表達(dá)警情信息與地圖的交互，包括查看不同行政區(qū)警情數(shù)量的分區(qū)統(tǒng)計(jì)、聚散點(diǎn)圖層、熱力圖等。對(duì)警情的分析中還包括數(shù)據(jù)統(tǒng)計(jì)功能，以直觀的圖表形式展示統(tǒng)計(jì)結(jié)果，如警情類(lèi)型統(tǒng)計(jì)、警情處理情況統(tǒng)計(jì)、警情上報(bào)時(shí)間段統(tǒng)計(jì)。警情部署模塊中包括顯示當(dāng)前警力部署情況、添加部署、路徑分析功能。
圖2 功能模塊
1.3 系統(tǒng)界面設(shè)計(jì)
城市交通警情WebGIS的系統(tǒng)Web界面采用HTML5搭建框架，主要通過(guò)、
等標(biāo)簽布局整體頁(yè)面，運(yùn)用
- 、
- 等創(chuàng)建下拉菜單等，頁(yè)面整體采用自適應(yīng)模式，可適應(yīng)不同大小屏幕顯示需求。采取CSS進(jìn)行界面整體風(fēng)格設(shè)計(jì)，引用BootStrap插件可簡(jiǎn)化對(duì)界面的設(shè)計(jì)，有利于界面風(fēng)格統(tǒng)一。采用JavaScript與JQuery設(shè)計(jì)頁(yè)面交互功能，提高用戶使用體驗(yàn)。JQuery可簡(jiǎn)化對(duì)DOM的引用。引用Echarts插件作為圖表顯示接口，使用BootStrap-DatetimePicker作為日歷插件作為日期選擇器。
1.4 系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì)
地圖底圖數(shù)據(jù)包括境界與行政區(qū)界，包括行政區(qū)劃面數(shù)據(jù)、行政區(qū)界線數(shù)據(jù)；包括國(guó)道、省道、城市快速路、一級(jí)公路與二級(jí)公路等線要素；以及部分基礎(chǔ)設(shè)施如火車(chē)站、停車(chē)場(chǎng)等點(diǎn)數(shù)據(jù)。這些基礎(chǔ)數(shù)據(jù)通過(guò)SuperMap iDesktop 整合制作為地圖底圖，通過(guò)SuperMap iServer發(fā)布為REST地圖服務(wù)。城市交通警情數(shù)據(jù)為矢量數(shù)據(jù)，存于阿里云數(shù)據(jù)庫(kù)，屬性數(shù)據(jù)字典如表1所示：
表1 路況數(shù)據(jù)屬性數(shù)據(jù)字典
Tab.1 The property data dictionary of road condition
2 城市交通警情WebGIS系統(tǒng)開(kāi)發(fā)
城市交通警情WebGIS系統(tǒng)功能的實(shí)現(xiàn)依賴于SuperMap iServer發(fā)布地圖服務(wù)與SuperMap iClient提供的功能接口。本系統(tǒng)通過(guò)SuperMap iDesktop ,以及本地?cái)?shù)據(jù)，如行政區(qū)劃、路網(wǎng)等，創(chuàng)建自定義地圖，并構(gòu)建基于主干路路網(wǎng)的網(wǎng)絡(luò)數(shù)據(jù)集，以用于出警路徑分析。發(fā)布自定義地圖服務(wù)，有利于各地交管部門(mén)將本地管轄區(qū)作為重點(diǎn)，并且可加入具有本地特色的圖層，具有較強(qiáng)自定義性。將創(chuàng)建好的地圖通過(guò)SuperMap iServer發(fā)布REST地圖服務(wù)，通過(guò)SuperMap.Map方法訪問(wèn)發(fā)布后的服務(wù)地址，即可調(diào)用自定義地圖。地圖模塊的基本功能，可通過(guò)Control接口中提供的Zoom、Navigation、Overviewmap、ScaleLine等方法實(shí)現(xiàn)，包括地圖鼠標(biāo)縮放、縮放控件、鷹眼、比例尺等。測(cè)距功能通過(guò)DrawLine、MeasureParameters、Geometry等接口共同實(shí)現(xiàn)測(cè)距功能。天氣信息為從網(wǎng)絡(luò)上的接口中獲取的信息，解析后傳給前端。警情分析系統(tǒng)側(cè)重于城市交通警情信息展示、警情可視化、警情統(tǒng)計(jì)分析以及警情部署。
2.1 城市交通警情展示
城市交通警情數(shù)據(jù)從其數(shù)據(jù)量以及可從其背后挖掘的信息價(jià)值來(lái)看都可稱(chēng)為大數(shù)據(jù)，而可視化分析也是大數(shù)據(jù)分析的重要方法。任何系統(tǒng)都是人與計(jì)算機(jī)的共同合作，大數(shù)據(jù)可視化的目的是將計(jì)算機(jī)分析的結(jié)果，用人可以直觀理解的方式進(jìn)行顯示，將人、機(jī)有機(jī)結(jié)合，借助人機(jī)交互的分析方法與技術(shù)，有助于人們更高效的理解大數(shù)據(jù)深層含義[11]。
城市交通警情信息的展示包括表格展示以及與地圖互動(dòng)形式展示，表格均通過(guò)BootStrap-Table插件實(shí)現(xiàn)，可以實(shí)現(xiàn)信息搜索以及分頁(yè)功能。信息展示包括實(shí)時(shí)警情信息展示、分類(lèi)警情展示。實(shí)時(shí)警情展示是通過(guò)SetInterval方法以及AJAX，每1分鐘訪問(wèn)一次數(shù)據(jù)庫(kù)實(shí)現(xiàn)頁(yè)面異步局部刷新。分類(lèi)警情是將所有警情信息分為交通事故、交通擁堵以及交通熱點(diǎn)，其中交通熱點(diǎn)包括群眾求助、路面損毀等。點(diǎn)擊分類(lèi)信息中某條信息，利用Marker類(lèi)庫(kù)可以新建點(diǎn)標(biāo)記，通過(guò)AddMarker方法將標(biāo)注添加到地圖上相應(yīng)位置，為地圖上的點(diǎn)添加點(diǎn)擊事件監(jiān)聽(tīng)，利用SuperMap.Popup.Anchored新建提示框，可以出現(xiàn)該條警情的具體內(nèi)容，并且可以在搜索框搜索相關(guān)字段，如時(shí)間或警情類(lèi)型或地址，直接輸入即可在表中查詢出相關(guān)警情信息。
2.2 城市交通警情可視化
信息的顯示基于Layer，即圖層，先定義圖層再向圖層添加各類(lèi)顯示功能。功能不同的圖層通過(guò)不同接口建立，如通過(guò)AddFeatures方法將點(diǎn)、線、面等添加到各圖層中等。因此，與地圖相關(guān)的不同可視化操作，均在其自身的圖層中進(jìn)行。分區(qū)統(tǒng)計(jì)是在地圖上以大小不等的圓盤(pán)，表示市內(nèi)各區(qū)警情數(shù)量的多少，通過(guò)SuperMap.Geometry.Point設(shè)置中心點(diǎn)坐標(biāo)，并設(shè)置其相應(yīng)名稱(chēng)與對(duì)應(yīng)數(shù)值,將這些值作為SuperMap.Feature.Vector方法的參數(shù)畫(huà)圓。
大數(shù)據(jù)的展示并不需要將所有數(shù)據(jù)一一列舉，人們往往關(guān)注數(shù)據(jù)的聚合狀態(tài)，因此，利用聚散點(diǎn)功能可以通過(guò)點(diǎn)聚合的方式顯示大量點(diǎn)數(shù)據(jù)，當(dāng)點(diǎn)很多或很密集的時(shí)候，將一定范圍內(nèi)的點(diǎn)聚合為一個(gè)聚合點(diǎn)，該聚合點(diǎn)反映了這些點(diǎn)的數(shù)量和大體位置信息，當(dāng)放大地圖時(shí)，聚合點(diǎn)會(huì)逐步散開(kāi)為具體警情點(diǎn)，此時(shí)可以查看該點(diǎn)信息。聚散點(diǎn)功能通過(guò)Layer.ClusterLayer方法建立聚散點(diǎn)圖層，并通過(guò)Control.SelectCluster方法添加鼠標(biāo)滾動(dòng)事件，來(lái)控制點(diǎn)的聚合，功能實(shí)現(xiàn)如圖3所示。熱點(diǎn)圖也有助于對(duì)警情點(diǎn)進(jìn)行直觀反映，以地圖熱點(diǎn)形式顯示所選日期內(nèi)警情，直觀的展示警情發(fā)生熱點(diǎn)區(qū)。該功能的實(shí)現(xiàn)通過(guò)SuperMap.Geometry.Point畫(huà)點(diǎn)，并設(shè)置該點(diǎn)的半徑、坐標(biāo)等信息。
2.3 警情統(tǒng)計(jì)
利用ECharts對(duì)統(tǒng)計(jì)分析欄目下的警情類(lèi)型分析、處理情況分析和警情的上報(bào)時(shí)間段進(jìn)行展示。ECharts是一個(gè)純 JavaScript 的圖表庫(kù)，底層依賴輕量級(jí)的Canvas類(lèi)庫(kù)ZRender，提供直觀、可交互、高度個(gè)性化定制的數(shù)據(jù)可視化圖表。根據(jù)本系統(tǒng)實(shí)際的數(shù)據(jù)分析情況，選擇餅狀圖和柱狀圖兩種圖表作為展示警情統(tǒng)計(jì)分析的結(jié)果較為合適。
圖3 聚散點(diǎn)功能界面
2.4 警力部署
系統(tǒng)提供警力部署相關(guān)功能，包括顯示部署、添加部署以及路徑分析。顯示執(zhí)勤點(diǎn)通過(guò)BootStrap- Table顯示表格，并可以查詢表內(nèi)信息，單擊表格觸發(fā)該表格的OnClickRow方法，再通過(guò)超圖類(lèi)庫(kù)Marker創(chuàng)建點(diǎn)覆蓋物，可實(shí)現(xiàn)在地圖上顯示該警員執(zhí)勤地點(diǎn)，雙擊出觸發(fā)表格的OnDblClickRow方法，可顯示警員詳細(xì)信息。添加部署是對(duì)數(shù)據(jù)庫(kù)的增加操作，通過(guò)