Web地圖熱力圖原理及應(yīng)用

盧健 張倩 左世祥 張曉峰

摘 ?要：隨著各種地圖框架技術(shù)的不斷發(fā)展、功能的不斷豐富，給數(shù)據(jù)可視化帶來(lái)了極大的便利，基于地圖的可視化方法備受青睞，其中熱力圖作為大數(shù)據(jù)信息展示的直觀有效方式充當(dāng)著重要角色。文章首先對(duì)OpenLayers地圖框架進(jìn)行簡(jiǎn)要概述，其次探討了熱力圖原理并基于OpenLayers框架對(duì)熱力圖的生成進(jìn)行了實(shí)現(xiàn)，最后將熱力圖應(yīng)用于實(shí)際項(xiàng)目中，對(duì)項(xiàng)目的管理模塊決策分析提供了直觀支持。

關(guān)鍵詞：數(shù)據(jù)可視化;熱力圖;OpenLayers

中圖分類(lèi)號(hào)：TP391.41 ? ? ?文獻(xiàn)標(biāo)志碼：A ? ? ? ? 文章編號(hào)：2095-2945（2019）35-0174-03

Abstract： With the continuous development of various map framework technologies and the continuous enrichment of functions， it has brought great convenience to data visualization. Map-based visualization methods are favored. Among them， the thermal diagram plays an important role as an intuitive and effective way to display the information of big data. This paper first gives a brief overview of the OpenLayers map framework， then discusses the principle of thermal map and realizes the generation of thermal map based on OpenLayers framework. Finally， the thermal map is applied to practical projects. It provides intuitive support for the decision-making analysis of the project management module.

Keywords： data visualization; thermal map; OpenLayers

1 概述

近年來(lái)，新興技術(shù)層出不窮，瀏覽器端所能呈現(xiàn)的功能也越來(lái)越豐富，網(wǎng)頁(yè)與地圖的結(jié)合更是開(kāi)辟了數(shù)據(jù)可視化的新方向[1]，以其快速、直觀、動(dòng)態(tài)等特點(diǎn)迅速成為新時(shí)代的寵兒，值此契機(jī)，各種地圖框架應(yīng)運(yùn)而生，諸如高德地圖、百度地圖、谷歌地圖、OpenLayers等框架已在地圖可視化領(lǐng)域各自占有一席之地，其中OpenLayers以其開(kāi)源、功能龐大等優(yōu)勢(shì)深受廣大前端地圖開(kāi)發(fā)者的喜愛(ài)。數(shù)據(jù)可視化隨著數(shù)據(jù)量的急劇增加也面臨著考驗(yàn)，當(dāng)我們需要更直觀有效的形式來(lái)展示大數(shù)據(jù)信息時(shí)，熱力圖無(wú)疑是一種很好的方式，其以特殊高亮的形式呈現(xiàn)數(shù)據(jù)的地理空間特性的圖示，具有綜合展示數(shù)據(jù)地理空間特征和屬性特征的良好特性[2-4]。

2 OpenLayers概述

2.1 簡(jiǎn)介

OpenLayers，正如其官網(wǎng)所言“A high-performance， feature-packed library for all your mapping needs.”一個(gè)滿足你所有制圖需要的高性能的、功能強(qiáng)大的庫(kù)，可以輕松地將動(dòng)態(tài)地圖放在任何網(wǎng)頁(yè)中。它可以顯示從任何來(lái)源加載的地圖圖塊、矢量數(shù)據(jù)和標(biāo)記。OpenLayers已經(jīng)被開(kāi)發(fā)來(lái)進(jìn)一步便于人們利用各種地理信息，它是完全免費(fèi)的、開(kāi)源的JavaScript庫(kù)。

OpenLayers不僅能在瀏覽器中幫助開(kāi)發(fā)者實(shí)現(xiàn)地圖瀏覽的基本功能，比如放大、縮小、平移等常用操作，還可以進(jìn)行選取線、選取面、要素選擇、圖層疊加等不同的操作，甚至能對(duì)已有的OpenLayers操作和數(shù)據(jù)支持類(lèi)型進(jìn)行擴(kuò)展，為其賦予更多的功能。例如，它可以為OpenLayers添加網(wǎng)絡(luò)處理服務(wù)WPS 的操作接口，從而利用已有的空間分析服務(wù)來(lái)對(duì)加載的地理空間數(shù)據(jù)進(jìn)行計(jì)算。

2.2 基本模塊

OpenLayers基本模塊由Map、View、Layer、Source構(gòu)成;其中Map為其核心組件，是地圖開(kāi)發(fā)者基于OpenLayers進(jìn)行Web地圖開(kāi)發(fā)的基石，基于這樣的前提我們才可以疊加所要呈現(xiàn)的圖層;控制地圖的縮放級(jí)別、視角中心、投影是由View組件所決定的，其為呈現(xiàn)地圖特定區(qū)域提供了條件;Source則是地圖圖層的數(shù)據(jù)源，定義著地圖數(shù)據(jù)的來(lái)源，其與Layer存在一一對(duì)應(yīng)關(guān)系，也即是有一個(gè)Source，必然有一個(gè)Layer;Layer是承載源數(shù)據(jù)的載體，其主要功能是對(duì)地圖數(shù)據(jù)的可視化表達(dá)。如圖1所示，Layer承載著Source定義的數(shù)據(jù)源，疊加到Map之上，通過(guò)View控制其縮放、視角、投影組成了基于OpenLayers的地圖可視化基本結(jié)構(gòu)。

3 熱力圖原理及實(shí)現(xiàn)

3.1 熱力圖原理

熱力圖（Heat Map）是通過(guò)密度函數(shù)進(jìn)行可視化用于表示地圖中點(diǎn)的密度的熱圖。它使人們能夠獨(dú)立于縮放因子感知點(diǎn)的密度[5-6]，以特殊高亮的形式呈現(xiàn)數(shù)據(jù)的地理空間特性的圖示，具有綜合展示數(shù)據(jù)地理空間特征和屬性特征的良好特性。

熱力圖生成原理可分為如下幾個(gè)步驟。

（1）為離散點(diǎn)設(shè)置一個(gè)半徑，創(chuàng)建圓形緩沖區(qū)。

（2）對(duì)每個(gè)離散點(diǎn)的緩沖區(qū)，使用漸進(jìn)的灰度帶自?xún)?nèi)而外線性衰減渲染。

（3）因灰度值的可疊加性，對(duì)于重疊的區(qū)域疊加灰度值，緩沖區(qū)之間交叉越多，灰度值越大，也即越“熱”。

（4）以疊加后的灰度值附以彩虹色條帶著色。

通常情況下，繪制熱力圖默認(rèn)使用alpha通道疊加規(guī)則作為其影響力疊加模式[7]，疊加規(guī)則公式如下。

3.2 實(shí)現(xiàn)

3.2.1 數(shù)據(jù)準(zhǔn)備

本文基于OpenLayers地圖框架進(jìn)行熱力圖的繪制，瀏覽其官網(wǎng)提供熱力圖實(shí)例，我們可以看到其熱力圖的實(shí)現(xiàn)提供數(shù)據(jù)源為KML格式數(shù)據(jù)，然而實(shí)際應(yīng)用中，對(duì)于動(dòng)態(tài)數(shù)據(jù)的呈現(xiàn)，實(shí)時(shí)生成KML格式數(shù)據(jù)源往往其效果是事倍功半的，不同區(qū)域、不同條件都會(huì)出現(xiàn)多個(gè)數(shù)據(jù)集呈現(xiàn)不同的熱力圖，意味著需要多個(gè)KML文件，為了滿足需求，對(duì)于數(shù)據(jù)集，通常我們提供的是由坐標(biāo)點(diǎn)和權(quán)值組成的對(duì)象數(shù)組（圖2），以此作為熱力圖生成前的數(shù)據(jù)準(zhǔn)備，無(wú)需額外生成其他格式數(shù)據(jù)，簡(jiǎn)單代碼組織即可。

3.2.2 生成熱力圖

OpenLayers中實(shí)現(xiàn)熱力圖的繪制，基于其提供的ol.layer.Heatmap類(lèi)來(lái)進(jìn)行熱力圖相關(guān)參數(shù)設(shè)置及生成，針對(duì)準(zhǔn)備的數(shù)據(jù)集，需要做如下歸一化處理。

（1）首先找出數(shù)據(jù)集中的最大值。

（2）遍歷數(shù)據(jù)集，將每個(gè)count值除以最大值并將結(jié)果作為權(quán)重設(shè)置其每一個(gè)feature樣式的透明度來(lái)展示熱力圖。

經(jīng)過(guò)上述處理，結(jié)合Heatmap類(lèi)即可完成熱力圖繪制，核心代碼如下所示。

heatMap = new ol.layer.Heatmap（{

gradient： ['#00f'， '#0ff'， '#0f0'， '#ff0'， '#f00']，

radius： 25 ，

renderMode： 'image'，

source： new ol.source.Vector

}）

let max_count=Math.max.apply（Math，data.map（item=>item.count））;

data.map（item=>item.weight=item.count/max_count）;

let pointFeatures = [];

_dataArray.forEach（function （data） {

let _feature = new ol.Feature（{

geometry： new ol.geom.Point（ol.proj.transform（data.coordinate， 'EPSG：4326'， 'EPSG：3857'）），

weight： data.weight }）;

pointFeatures.push（_feature）;

}）

heatMap.getSource（）.addFeatures（pointFeatures）;

map.addLayer（heatMap）;

其中，gradient為熱力圖渲染條帶設(shè)置，默認(rèn)即可，radius為每個(gè)像素渲染點(diǎn)半徑，可根據(jù)實(shí)際效果進(jìn)行調(diào)整，需要特別注意的是renderMode，其有兩種方式，一種是image，一種是vector，兩者分別為柵格和矢量，第一個(gè)渲染速度快，后者慢，對(duì)于大量數(shù)據(jù)渲染有利，通常為了增加其流暢性默認(rèn)設(shè)置其值為image。

4 應(yīng)用

熱力圖因其直觀、高效在數(shù)據(jù)可視化方面多有應(yīng)用，例如，地震帶的分布、人口密度分布、氣溫分布，甚至于網(wǎng)站用戶點(diǎn)擊行為分布等等使用熱力圖都能達(dá)到不僅美觀且直接的效果，這對(duì)于相關(guān)行業(yè)的決策行為有重要意義。

阿壩農(nóng)品匯是阿壩州自然資源與科技信息所研究基于“阿壩州城鄉(xiāng)統(tǒng)籌綜合信息服務(wù)子平臺(tái)示范與研究”項(xiàng)目成果開(kāi)發(fā)而來(lái)，主要目的在于建設(shè)以農(nóng)產(chǎn)品信息服務(wù)系統(tǒng)為示范的農(nóng)業(yè)資源管理和發(fā)布體系，實(shí)現(xiàn)農(nóng)業(yè)數(shù)據(jù)資源整合與共享，農(nóng)業(yè)信息快速采集、傳遞與反饋，為廣大農(nóng)戶農(nóng)產(chǎn)品的銷(xiāo)售、涉農(nóng)政府部門(mén)的決策提供數(shù)據(jù)支撐，更好的為實(shí)現(xiàn)“農(nóng)業(yè)增產(chǎn)、農(nóng)民增收、農(nóng)村繁榮”提供服務(wù)。

本文將熱力圖應(yīng)用于阿壩農(nóng)品匯系統(tǒng)中，針對(duì)于系統(tǒng)的用戶分布、相關(guān)農(nóng)產(chǎn)品的價(jià)格、品種數(shù)量、產(chǎn)量高低、產(chǎn)值高低等分布趨勢(shì)使用熱力圖直觀的呈現(xiàn)在地圖之上，為相關(guān)部門(mén)的決策行為提供了很好的支持，應(yīng)用效果圖如圖3所示。

5 結(jié)論

綜上所述，熱力圖對(duì)于數(shù)據(jù)可視化方面有著簡(jiǎn)單、直接等優(yōu)勢(shì)，對(duì)于大量數(shù)據(jù)的顯示其更是能發(fā)揮直觀的效果，為各種相關(guān)的決策分析行為提供了很好的支持。Web及移動(dòng)應(yīng)用上數(shù)據(jù)的可視化更是面臨考驗(yàn)，如何利用最小的可視區(qū)域展示最全面的數(shù)據(jù)信息，熱力圖是一個(gè)不錯(cuò)的選擇。

參考文獻(xiàn)：

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

[2]龔健雅，耿晶，吳華意.地理空間知識(shí)服務(wù)概論[J].武漢大學(xué)學(xué)報(bào)（信息科學(xué)版），2014，39（08）：883-890.

[3]楊微，劉紀(jì)平，王勇.基于Heatmap的地理對(duì)象空間分布熱度計(jì)算方法[J].測(cè)繪通報(bào)，2012（S1）：391-393+398.

[4]趙婷，華一新，李響，等.一種基于Heat Map的地理標(biāo)簽數(shù)據(jù)可視化表達(dá)的研究[J].測(cè)繪工程，2016，25（06）：28-32.

[5]Skuta C， Bartněk P， Svozil D.In CHlib-interactive cluster heatmap for web applications[J].Journal of Cheminformatics， 2014，6（1）：44.

[6]pakov O， Miniotas D.Visualization of eye gaze data using heat maps[J].Elektronika Ir Elektrotechnika， 2015，115（2）：55-58.

[7]王勝開(kāi)，徐志潔，張健欽，等.逆向熱力圖的繪制方法[J].地球信息科學(xué)學(xué)報(bào)，2018，20（04）：515-522.