吳廣財(cái)　江疆　翟鴻榮

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

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

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

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

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

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

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

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

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

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

（1） AnyChart

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

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

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

（2） Raphael

Raphael是一個(gè)用于在網(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ù)量點(diǎn)數(shù)據(jù)的同時(shí)讀取與呈現(xiàn)性能不足。

（3） 百度地圖

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

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

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

2.1 AnyChart技術(shù)

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

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

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

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

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

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

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

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

type="AbsoluteDeviation" range_count="5"

palette="custom"/>

2.2 Raphael技術(shù)

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

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

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

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

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

（4） 在頁面上通過raphael API進(jìn)行調(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提供的展示方法在頁面進(jìn)行大小控制展示：

$（"#"+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)實(shí)現(xiàn)對(duì)地圖圖層在線獲取與展示信息的在線集成，對(duì)于企業(yè)內(nèi)部應(yīng)用平臺(tái)，出于安全要求，必須是企業(yè)內(nèi)部的局域網(wǎng)。因此查閱了大量百度地圖API[10]的應(yīng)用資料，開展百度地圖離線應(yīng)用研究與嘗試。基本原理為通過下載離線百度地圖瓦片，實(shí)現(xiàn)對(duì)在線地圖的本地化存儲(chǔ)，通過修改API中圖片讀取路徑，實(shí)現(xiàn)對(duì)圖層數(shù)據(jù)的本地讀取與展示內(nèi)容的本地在線集成。

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

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

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

（2） 編寫百度地圖后臺(tái)獲取地圖的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） 前臺(tái)JSP頁面調(diào)用百度API進(jìn)行配置和顯示，方式如下：

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

_densityPt： function （Points， tilePoint） {

var date1 = new Date（）；

var pout = []；

var tw = 256；

//根據(jù)長(zhǎng)度進(jìn)行判斷分割

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

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

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

//進(jìn)行數(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)再進(jì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]；

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

if （piex>xmin && piexymin && piey

break；

}}}}

var date2 = new Date（）；

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

//獲得時(shí)間差的毫秒數(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í)行層三個(gè)層面的。通過渠道層、客戶層、業(yè)務(wù)層和資源層四個(gè)圖層，綜合實(shí)現(xiàn)渠道布局、客戶分布、業(yè)務(wù)情況及服務(wù)資源情況的統(tǒng)計(jì)分析功能和可視化展現(xiàn)。通過采集和管理多種地理空間信息，將四個(gè)圖層的數(shù)據(jù)與地理空間數(shù)據(jù)進(jìn)行匹配與集成，實(shí)現(xiàn)服務(wù)數(shù)據(jù)的直觀可視，建立服務(wù)渠道分析的“一張圖”。

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

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

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

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

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

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

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

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

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

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

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

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

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

4 結(jié) 語

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

參考文獻(xiàn)

[1] 李紅新.基于我國電子商務(wù)發(fā)展的趨勢(shì)研究[J].價(jià)值工程，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] 楊東進(jìn).網(wǎng)絡(luò)地理信息的技術(shù)實(shí)現(xiàn)[J].科技資訊，2006 （26）：6?7.

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

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

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

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

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

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

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

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

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

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

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

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

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

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