地圖可視化技術在電力服務渠道分析系統中的應用

吳廣財　江疆　翟鴻榮

摘 要： 對于目前企業在電力服務渠道中存在的問題，通過引入地圖可視化技術（AnyChart、Raphael、百度地圖），結合電力服務渠道的現狀進行分析，以地圖的形式動態、準確、立體的展示，用于全方位、準確地掌握自身經營狀況、服務水平、客戶需求等，為電網營銷戰略制定和決策提供有力支持。

關鍵詞： 電網； 服務渠道分析； 地圖可視化； 大數據

中圖分類號： TN915.853?34 文獻標識碼： A 文章編號： 1004?373X（2015）15?0090?05

Application of map visualization technologies in electricity service channel analysis

WU Guangcai1， JIANG Jiang1， ZHAI Hongrong2

（1. Information Center of Guangdong Power Grid Limited Company， Guangzhou 510180， China； 2.Yantai Haiyi Software Limited Company， Yantai 264000， China）

Abstract： The problems existed in enterprises′ electricity service channel are described. By introducing map visualization technologies （AnyChart， Raphael and Baidu map） and combining with current situation of electricity service channel， the electricity service channel is analyzed， and showed in dynamic， correct and stereoscopic with map form. It is used to master itself operation condition， service level and customer demands roundly accurately. The methods can provide powerful support for power grid marketing strategy formulation and decision?making.

Keywords： power grid； service channel analysis； map visualization； big data

0 引 言

電網企業現有服務渠道包括95598呼叫中心、實體營業廳、網上營業廳、掌上營業廳、社會化服務渠道、短信等，在這些渠道相應部署了一定的軟硬件設備，投入了一定的資源，服務渠道已經基本擴展完善，并覆蓋了客戶的業務需求[1]。但是對各服務渠道的業務數據、客戶數據的集中分析研究不夠深入。在渠道集約化管理及降低服務成本的要求下，企業市場部目前缺少全面分析各個渠道使用情況及資源運營的手段，對當前服務渠道、客戶、業務及資源的分布和利用情況掌握不夠，較難實現區域內“渠道?客戶?業務?資源”的匹配關系。因此需要對當前服務渠道資源的分布及布局情況進行有效掌握，并對服務渠道布局合理性進行分析，從而為集約化管理、服務渠道資源定位、整合進行戰略輔助決策。

服務渠道使用情況分析與優化功能，是以渠道分析的“一張圖、一張網”為基礎，實現服務渠道使用情況綜合展示、分析和決策功能。

“一張圖”是指以地理地圖為基礎，通過對所在營業區域內渠道布局、客戶分布、業務情況和資源利用等進行分析，以地圖的形式展現不同服務渠道目前的資源情況、客戶特點、業務需求等，為服務渠道的資源集約化管理提供有效支持[2?4]。

“一張網”是指建立起“渠道?業務?客戶?資源”的匹配關系，并在此基礎上實現服務渠道資源對客戶和業務需求的支撐，用于指導企業的服務渠道資源分配和現有服務渠道布局的優化。

以地理地圖為核心，通過可視化呈現，即可展示不同區域中渠道、業務、客戶及服務資源的布局情況，對單一渠道的業務運營過程進行評價，并支持實體營業廳合理性評估、服務渠道布局優化等高級決策分析應用，以切實提高服務渠道的服務水平和能力[5]。

目前大部分電力系統中的應用界面，圖形支持系統的實現方式和提供的功能差異比較大，不同的圖形軟件系統存在公用性和移植性相對較差的特點，同時專業的地圖展示工具存在自成體系，對供電區域地理信息展示較多，基于地圖的可定制與集成開發能力較弱。本項目以開源的或可定制度較高的地圖可視化插件進行研究并在系統開發平臺上進行集成，在整個過程中，研究并運用了多種地圖可視化插件，包括AnyChart，Raphael和百度地圖，滿足了客戶服務渠道分析可視化展示的要求。

1 地圖可視化技術

本文主要針對AnyChart，Raphael和百度地圖三種技術進行研究開發，三種技術均有自己的優缺點，AnyChart展示效果更豐富一些，Raphael定制化更高一些，百度地圖的地圖圖層信息更詳細一些。各個插件的具體情況如下：

（1） AnyChart

AnyChart控件是一款當前流行的數據可視化解決方案，利用此插件，可以創建交互性強、生動的圖表和地圖。AnyChart是一款跨瀏覽器的工具，可以被用于Web，Desktop和Mobile應用程序，AnyChart可運行于當前PC和Mac上所有主流的瀏覽器，如：Chrome， Safari， Firefox， Internet Explorer和Opera，并且可用于所有移動平臺（Android （2.2+））和iOS上的主流瀏覽器。

AnyChart作為一款數據可視化方案的優勢在于其展示效果通過xml文件配置，可以根據自己的需要靈活配置展示的內容，其中dashboard的支持功能非常強大，可以根據自己的需要將任意圖形進行組合對于管理類高管平臺提供了豐富的視覺展示效果。

該款插件具有跨瀏覽器，支持展示效果通過XML文件配置以及良好的視覺外觀和配色方案，能夠使客戶根據不同的需求設計圖表。在本項目的圖形可視化展示中得到了廣泛應用[6]。

（2） Raphael

Raphael是一個用于在網頁中繪制矢量圖形的JavaScript庫。以SVG W3C標準和VML作為創建圖形的基礎，通過JavaScript操作DOM創建出各種復雜的柱狀圖、餅圖、曲線圖等各種圖表，可以繪制任意形狀的圖形，支持圖表或圖像的裁剪和旋轉等復雜操作[7]。

較于其他插件，該產品具有定制化高，可任意繪制與集成不同形式的圖形，但大數據量點數據的同時讀取與呈現性能不足。

（3） 百度地圖

百度地圖JavaScript API是一套由JavaScript語言編寫的應用程序接口，支持基于其API構建功能豐富、交互性強的地圖應用，支持PC端和移動端基于瀏覽器的地圖應用開發[8?9]。

百度地圖JavaScript API具有函數調用簡單，支持大數據點的同時讀取與呈現，且具有圖形縮放下不同圖層信息快速切換的優勢。不足之處為百度地圖一般的API調用均需要接入互聯網，借助于互聯網實現對地圖圖層在線獲取與展示信息的在線集成。

2 技術實現及應用

2.1 AnyChart技術

使用AnyChart具體的開發流程如圖1所示。

圖1 AnyChart具體的開發流程

（1） 在網上獲取shp格式地圖；

（2） 通過地圖文件編輯器udig對shp格式地圖進行編輯，然后通過udig導出一份shp格式的地圖；

（3） 用AnyChart自帶的工具AnyChart Map Converter對生成的shp格式的地圖轉換為.amap格式的地圖；

（4） 通過Anychart中提供API和Map.swf進行地圖繪制，同時，AnyChart可以通過配置數據完成在地圖上展示熱力區域。

AnyChart在頁面繪制圖形的方式如下：

熱力區域的展示使用以下配置文件中的item進行配置，針對不同的區域可以使用type參數進行設置：

type="AbsoluteDeviation" range_count="5"

palette="custom"/>

2.2 Raphael技術

使用Raphael具體的開發流程如圖2所示。

圖2 Raphael具體的開發流程

（1） 在網上獲取shp格式地圖；

（2） 通過地圖文件編輯器udig對shp格式地圖進行編輯，通過udig可以對原有的地圖做適當的修改同時也可以自己進行地圖繪制，并為繪制的地圖添加一些屬性（name， code），然后通過udig導出shp格式的地圖；

（3） 通過ArcGIS對文件格式進行轉換，將shp格式轉換成svg格式，然后對svg格式的數據進行適當修改；

（4） 在頁面上通過raphael API進行調用，然后根據配置的屬性名稱和代碼顯示氣泡圖形。

Raphael在頁面繪制圖形的方式如下，首先獲取地圖路徑和設置顯示字體：

paper.path（d）.data（"cityname"，city）.data（

"color"，_color）.data（"name"，name）.attr（

{

fill：fillColor， stroke： ′#cacac4′，

′stroke?width′： 1.5 }

）.data（"code"，code）；

paper.text（po[0]，po[1]，name）.data（

"cityname"，city）.data（"name"，name）.attr（

{"font?size"："16px"，"fill"："blue"}

）.data（"code"，code）.click（）；

設置完畢后可以直接調用raphael提供的展示方法在頁面進行大小控制展示：

$（"#"+continer）.empty（）；

paper = new Raphael（continer，height，width）；

paper.setViewBox（_x，_y，height，width，true）；

paper.safari（）；

2.3 百度地圖

百度地圖一般的API調用均需要接入互聯網，借助于互聯網實現對地圖圖層在線獲取與展示信息的在線集成，對于企業內部應用平臺，出于安全要求，必須是企業內部的局域網。因此查閱了大量百度地圖API[10]的應用資料，開展百度地圖離線應用研究與嘗試。基本原理為通過下載離線百度地圖瓦片，實現對在線地圖的本地化存儲，通過修改API中圖片讀取路徑，實現對圖層數據的本地讀取與展示內容的本地在線集成。

使用百度地圖具體的開發流程如圖3所示。

圖3 百度地圖的具體開發流程

（1） 網上獲取百度離線地圖包，然后在項目的web.xml中設置讀取地圖圖片的路徑；

（2） 編寫百度地圖后臺獲取地圖的servlet；

String mapaddress = request.getSession（）.getServletContext（）.getInitParameter（"mapaddress"）；

java.io.FileInputStream is=null；

OutputStream os=null；

is = new java.io.FileInputStream（mapaddress）；

int read = 0；

byte[] bytes = new byte[1024]；

os = response.getOutputStream（）；

os.close（）；

（3） 修改百度地圖API的后端獲取地圖路徑；由于百度地圖API默認獲取網上在線圖片，因此需要修改默認地圖路徑；

bs.tileUrls=[server_url+"Getpng"]；

bs.getTilesUrl=function（T，cM）；

Getpng為修改后的離線地圖路徑。

（4） 前臺JSP頁面調用百度API進行配置和顯示，方式如下：

var map = new

BMap.Map（′map′，{minZoom：7，maxZoom：14}）；

map.addControl（new Map.NavigationControl（））；

map.centerAndZoom（new BMap.Point（rx，ry）， 8）；

map.enableScrollWheelZoom（）；

map.enableContinuousZoom（）；

2.4 大數據展示技術

在使用以上三種技術的同時，地圖的展示均存在一個大數據的顯示問題。例如電網公司的變壓器位置，由于變壓器的數據量很大，在幾萬乃至幾十萬以上，在有限的區域內進行大數據量的展示存在一定的難度。在此利用矢量切片技術結合抽稀，將上萬個點快速地繪制于前端，操作時延低于2 s。主要代碼如下：

_densityPt： function （Points， tilePoint） {

var date1 = new Date（）；

var pout = []；

var tw = 256；

//根據長度進行判斷分割

for （var i = 0； i < 16； i++） {

var xmin = i * 16 + tilePoint.x*256；

var xmax = （i + 1） * 16 + tilePoint.x * 256；

//進行數據抽稀

for （var clipPathId in this._clipPathRectangles） {var clipPathZXY = clipPathId.split（′_′）.slice（1）；

var zoom = parseInt（clipPathZXY[0]， 10）；

if （zoom ！== this._map.getZoom（）） {

var rectangle

=this._clipPathRectangles[clipPathId]；

this._map.removeLayer（rectangle）；

var clipPath

= document.getElementById（clipPathId）；

if （clipPath ！== null） {

clipPath.parentNode.removeChild（clipPath）；

}

delete this._clipPathRectangles[clipPathId]；

}}}

//循環再進行一次切割

for （var j = 0； j < 16； j++） {

var ymin = j * 16 + tilePoint.y * 256；

var ymax = （j + 1） * 16 + tilePoint.y * 256；

for （var k = 0； k < Points.length； k++） {

var x = Points[k].geometry.coordinates[0]；

var y = Points[k].geometry.coordinates[1]；

var pie = this._lnglat2pixel（x， y， tilePoint.z）；

var piex = pie[0]；

var piey = pie[1]；

//對于范圍內的數據跳出循環

if （piex>xmin && piexymin && piey

break；

}}}}

var date2 = new Date（）；

var date3 = date2.getTime（） ? date1.getTime（）

//獲得時間差的毫秒數

return pout；

}，

_lnglat2pixel： function （lng， lat， z） {

var sin = Math.sin（lat * Math.PI/180），

pow = Math.pow（2，z）；

var x=（（lng+180）/360）*256*pow；

var y=（0.5 ? Math.log（（1+sin）/（1 ? sin））/（4*Math.PI））*256 *pow；

return [x， y]；

}}）；

3 地圖應用展示

3.1 服務渠道布局展示功能

服務渠道布局展示功能是面向決策層、管理層及執行層三個層面的。通過渠道層、客戶層、業務層和資源層四個圖層，綜合實現渠道布局、客戶分布、業務情況及服務資源情況的統計分析功能和可視化展現。通過采集和管理多種地理空間信息，將四個圖層的數據與地理空間數據進行匹配與集成，實現服務數據的直觀可視，建立服務渠道分析的“一張圖”。

此功能界面作為系統的重要展示功能，需要多種顏色展示豐富的界面效果，因此采用AnyChart作為地圖展示方式， 主要界面顯示如圖4所示。

圖4 AnyChart作為地圖展示方式的界面顯示

頁面展示效果為所有地市局根據每天不同的業務量（或其他指標）進行排序，對排序后的結果劃分為不同的等級，每個等級對應不同的顏色，這樣可以比較直觀地看到業務量比較大或者比較小的地市局分布在廣東的哪個區域內。

3.2 服務渠道分析功能

服務渠道分析功能結合服務渠道分析成果和網上營業廳、實體營業廳、短信營業廳、95598、社會化服務渠道的使用情況，通過地理信息顯示了各渠道的所在位置和覆蓋范圍，圖表統計包含了省公司、地市局和區縣局的多層維度，可以匯總展示該區域用戶數、業務量、渠道數量及資源利用、用戶構成、分類型業務量等信息。

此功能界面主要顯示區域總體數據信息，需要展示速度快，界面簡潔清晰（可能會嵌入柱狀圖等其他圖形），因此采用Raphael作為地圖展示方式，主要界面顯示如圖5所示。

圖5 Raphael作為地圖展示方式的界面顯示

頁面展示效果為所有地市局同時以氣泡的方式展示自己的營業廳（或其他指標）數目，各地市顏色統一，不需要變動顏色，同時頁面上的氣泡可以替換為柱狀或者其他樣式的圖形。

3.3 服務渠道決策功能

服務渠道的決策功能主要面向決策層和管理層，實現對供電營業廳的布點布局優化、營業廳合理性評估相應的決策支持。

此功能需要將各個地市局營業廳位置打到地圖中，同時要根據營業廳在地圖中的顯示位置進行決策，因此展示的界面需要比較詳細，在此主要采用百度地圖作為地圖展示方式，主要界面顯示如圖6所示。

頁面展示效果將地市所有的營業廳位置打印到地圖中，并且根據不同的營業廳類型顯示不同的氣泡顏色，同時點擊氣泡可以彈出該營業廳的詳細信息，包括營業廳的名稱、位置和營業廳人員數目。該頁面也可以直觀地看到各種營業廳的分布區域，為實體營業廳的優化提供有力的支撐。

圖6 百度地圖作為地圖展示方式的界面顯示

4 結 語

本文根據實際的項目需求提出了基于多種地圖技術的編程可視化方法，針對不同的場景采用不同的展示方式，既能快速、美觀地展示全省的面貌，同時可以根據百度的精細圖形展示到廣東各個地市的街道乃至更詳細的地圖信息。實際的應用效果表明，采用多種技術的結合能夠更好地完成系統需要展示的功能，并且具有很好的可操作性。

參考文獻

[1] 李紅新.基于我國電子商務發展的趨勢研究[J].價值工程，2012，34（31）：176?178.

[2] 佚名.教字城市的基礎?CIS地理信息系統綜述[EB/OL].[2007?11?01].http：//www.ccc.gov.cn/xygl/kjjb/kjdt/2007?11?01?143735.html.

[3] 楊東進.網絡地理信息的技術實現[J].科技資訊，2006 （26）：6?7.

[4] 黃杏元，馬勁松，湯勤.地理信息系統概論（修訂版）[M].北京：高等教育出版社，2005.

[5] 李大勇，馬冬雪，王曉寧，等.電網信息可視化應用研究[J].電力系統保護與控制，2009，37（23）：156?158.

[6] 廖志堅，蔣明亮.基于Ajax的廣東省科技指標數據庫系統的設計與實現[J].科技管理研究，2010（8）：47?49.

[7] 楊紹偉，王晶.基于Raphael.js的統計圖形插件開發的研究[EB/OL].[[2014?01?09] .]http：//[www.doc88.com/p?4935458327153.]html.

[8] 戴鳳嬌，肖林華，楊琭，等.基于百度地圖的標記點聚合算法研究[J].中國科技信息，2013（23）：82?85.

[9] 崔文紅.電子地圖的應用及發展趨勢[J].測繪與空間地理信息，2008，31（3）：87?89.

[10] 杜傳明.百度地圖API在小型地理信息系統中的應用[J].測繪與空間地理信息，2011，34（2）：152?156.

[11] 邱家駒，錢源平，劉艷.基于地理信息系統的電力系統靜態安全分析可視化方法[J].中國電機工程學報，1999，19（5）：62?66.

[12] 韓禎祥，呂捷，邱家駒.科學計算可視化及其在電力系統中的應用前景[J].電網技術，1996，20（7）：22?27.

[13] 邱家駒.電力系統靜態安全分析[J].電力系統自動化，1982（2）：50?61.

[14] 武寧.電力系統運行狀態可視化技術的應用[J].科技與企業，2013（24）：166?167.

[15] 趙淑芬.電力系統運行狀態可視化技術綜述[J].黑龍江科技信息，2013（25）：149?150.

[16] 肖華麗.電力調度調控運行可視化[J].科技視界，2014（28）：281?282.

[17] 胡斌，李健，周愛華，等.GIS可視化在跨區電網中的應用[J].計算機與現代化，2012（8）：114?117.