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