城市交通警情WebGIS設計與開發
2018-10-19 04:00:44徐子惠王方雄顧雙飛
軟件 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模式（瀏覽器/服務器），將系統核心計算功能集中到服務器端?？傮w劃分為客戶端、服務器端與數據庫?？蛻舳藶閃eb前端，即人機交互界面，負責向服務器發送請求，并將服務器端運算的結果進行可視化，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方法，可顯示警員詳細信息。添加部署是對數據庫的增加操作，通過