盧健 張倩 左世祥 張曉峰

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

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

中圖分類號：TP391.41 ? ? ?文獻標志碼：A ? ? ? ? 文章編號：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 概述

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

2 OpenLayers概述

2.1 簡介

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

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

2.2 基本模塊

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

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

3.1 熱力圖原理

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

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

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

（2）對每個離散點的緩沖區(qū)，使用漸進的灰度帶自內(nèi)而外線性衰減渲染。

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

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

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

3.2 實現(xiàn)

3.2.1 數(shù)據(jù)準備

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

3.2.2 生成熱力圖

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

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

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

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

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

4 應用

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

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

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

5 結(jié)論

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

參考文獻：

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

[2]龔健雅，耿晶，吳華意.地理空間知識服務概論[J].武漢大學學報（信息科學版），2014，39（08）：883-890.

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

[4]趙婷，華一新，李響，等.一種基于Heat Map的地理標簽數(shù)據(jù)可視化表達的研究[J].測繪工程，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]王勝開，徐志潔，張健欽，等.逆向熱力圖的繪制方法[J].地球信息科學學報，2018，20（04）：515-522.