Web地圖熱力圖原理及應用

盧健 張倩 左世祥 張曉峰

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

關鍵詞：數據可視化;熱力圖;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 概述

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

2 OpenLayers概述

2.1 簡介

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

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

2.2 基本模塊

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

3 熱力圖原理及實現

3.1 熱力圖原理

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

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

（1）為離散點設置一個半徑，創建圓形緩沖區。

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

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

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

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

3.2 實現

3.2.1 數據準備

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

3.2.2 生成熱力圖

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

（1）首先找出數據集中的最大值。

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

經過上述處理，結合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為每個像素渲染點半徑，可根據實際效果進行調整，需要特別注意的是renderMode，其有兩種方式，一種是image，一種是vector，兩者分別為柵格和矢量，第一個渲染速度快，后者慢，對于大量數據渲染有利，通常為了增加其流暢性默認設置其值為image。

4 應用

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

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

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

5 結論

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

參考文獻：

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

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

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

[4]趙婷，華一新，李響，等.一種基于Heat Map的地理標簽數據可視化表達的研究[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.