地圖可視化技術(shù)在電力服務(wù)渠道分析系統(tǒng)中的應(yīng)用

吳廣財　江疆　翟鴻榮

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

關(guān)鍵詞： 電網(wǎng)； 服務(wù)渠道分析； 地圖可視化； 大數(shù)據(jù)

中圖分類號： TN915.853?34 文獻標(biāo)識碼： 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 引 言

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

服務(wù)渠道使用情況分析與優(yōu)化功能，是以渠道分析的“一張圖、一張網(wǎng)”為基礎(chǔ)，實現(xiàn)服務(wù)渠道使用情況綜合展示、分析和決策功能。

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

“一張網(wǎng)”是指建立起“渠道?業(yè)務(wù)?客戶?資源”的匹配關(guān)系，并在此基礎(chǔ)上實現(xiàn)服務(wù)渠道資源對客戶和業(yè)務(wù)需求的支撐，用于指導(dǎo)企業(yè)的服務(wù)渠道資源分配和現(xiàn)有服務(wù)渠道布局的優(yōu)化。

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

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

1 地圖可視化技術(shù)

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

（1） AnyChart

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

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

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

（2） Raphael

Raphael是一個用于在網(wǎng)頁中繪制矢量圖形的JavaScript庫。以SVG W3C標(biāo)準(zhǔn)和VML作為創(chuàng)建圖形的基礎(chǔ)，通過JavaScript操作DOM創(chuàng)建出各種復(fù)雜的柱狀圖、餅圖、曲線圖等各種圖表，可以繪制任意形狀的圖形，支持圖表或圖像的裁剪和旋轉(zhuǎn)等復(fù)雜操作[7]。

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

（3） 百度地圖

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

百度地圖JavaScript API具有函數(shù)調(diào)用簡單，支持大數(shù)據(jù)點的同時讀取與呈現(xiàn)，且具有圖形縮放下不同圖層信息快速切換的優(yōu)勢。不足之處為百度地圖一般的API調(diào)用均需要接入互聯(lián)網(wǎng)，借助于互聯(lián)網(wǎng)實現(xiàn)對地圖圖層在線獲取與展示信息的在線集成。

2 技術(shù)實現(xiàn)及應(yīng)用

2.1 AnyChart技術(shù)

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

圖1 AnyChart具體的開發(fā)流程

（1） 在網(wǎng)上獲取shp格式地圖；

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

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

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

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

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

type="AbsoluteDeviation" range_count="5"

palette="custom"/>

2.2 Raphael技術(shù)

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

圖2 Raphael具體的開發(fā)流程

（1） 在網(wǎng)上獲取shp格式地圖；

（2） 通過地圖文件編輯器udig對shp格式地圖進行編輯，通過udig可以對原有的地圖做適當(dāng)?shù)男薷耐瑫r也可以自己進行地圖繪制，并為繪制的地圖添加一些屬性（name， code），然后通過udig導(dǎo)出shp格式的地圖；

（3） 通過ArcGIS對文件格式進行轉(zhuǎn)換，將shp格式轉(zhuǎn)換成svg格式，然后對svg格式的數(shù)據(jù)進行適當(dāng)修改；

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

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

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（）；

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

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

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

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

paper.safari（）；

2.3 百度地圖

百度地圖一般的API調(diào)用均需要接入互聯(lián)網(wǎng)，借助于互聯(lián)網(wǎng)實現(xiàn)對地圖圖層在線獲取與展示信息的在線集成，對于企業(yè)內(nèi)部應(yīng)用平臺，出于安全要求，必須是企業(yè)內(nèi)部的局域網(wǎng)。因此查閱了大量百度地圖API[10]的應(yīng)用資料，開展百度地圖離線應(yīng)用研究與嘗試?；驹頌橥ㄟ^下載離線百度地圖瓦片，實現(xiàn)對在線地圖的本地化存儲，通過修改API中圖片讀取路徑，實現(xiàn)對圖層數(shù)據(jù)的本地讀取與展示內(nèi)容的本地在線集成。

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

圖3 百度地圖的具體開發(fā)流程

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

（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默認(rèn)獲取網(wǎng)上在線圖片，因此需要修改默認(rèn)地圖路徑；

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

bs.getTilesUrl=function（T，cM）；

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

（4） 前臺JSP頁面調(diào)用百度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 大數(shù)據(jù)展示技術(shù)

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

_densityPt： function （Points， tilePoint） {

var date1 = new Date（）；

var pout = []；

var tw = 256；

//根據(jù)長度進行判斷分割

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

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

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

//進行數(shù)據(jù)抽稀

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]；

}}}

//循環(huán)再進行一次切割

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]；

//對于范圍內(nèi)的數(shù)據(jù)跳出循環(huán)

if （piex>xmin && piexymin && piey

break；

}}}}

var date2 = new Date（）；

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

//獲得時間差的毫秒數(shù)

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 地圖應(yīng)用展示

3.1 服務(wù)渠道布局展示功能

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

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

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

頁面展示效果為所有地市局根據(jù)每天不同的業(yè)務(wù)量（或其他指標(biāo)）進行排序，對排序后的結(jié)果劃分為不同的等級，每個等級對應(yīng)不同的顏色，這樣可以比較直觀地看到業(yè)務(wù)量比較大或者比較小的地市局分布在廣東的哪個區(qū)域內(nèi)。

3.2 服務(wù)渠道分析功能

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

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

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

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

3.3 服務(wù)渠道決策功能

服務(wù)渠道的決策功能主要面向決策層和管理層，實現(xiàn)對供電營業(yè)廳的布點布局優(yōu)化、營業(yè)廳合理性評估相應(yīng)的決策支持。

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

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

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

4 結(jié) 語

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

參考文獻

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

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

[3] 楊東進.網(wǎng)絡(luò)地理信息的技術(shù)實現(xiàn)[J].科技資訊，2006 （26）：6?7.

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

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

[6] 廖志堅，蔣明亮.基于Ajax的廣東省科技指標(biāo)數(shù)據(jù)庫系統(tǒng)的設(shè)計與實現(xiàn)[J].科技管理研究，2010（8）：47?49.

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

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

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

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

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

[12] 韓禎祥，呂捷，邱家駒.科學(xué)計算可視化及其在電力系統(tǒng)中的應(yīng)用前景[J].電網(wǎng)技術(shù)，1996，20（7）：22?27.

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

[14] 武寧.電力系統(tǒng)運行狀態(tài)可視化技術(shù)的應(yīng)用[J].科技與企業(yè)，2013（24）：166?167.

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

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

[17] 胡斌，李健，周愛華，等.GIS可視化在跨區(qū)電網(wǎng)中的應(yīng)用[J].計算機與現(xiàn)代化，2012（8）：114?117.