GIS可視化——熱點圖

一、簡介

SuperMap iClient for JavaScript提供了熱點圖（HeatMapLayer），用於渲染數據衰減趨勢、顏色漸變的效果。

• 原理：在客戶端直接渲染的柵格圖，熱點圖的渲染需要三大要素：1、熱點數據，熱點數據需要點數據，每一個熱點數據需要有地理位置以及權重值 （能夠明顯的表現某位置某事件發生頻率或事物分布密度等，如可以為溫度的高低、人口密集度等等）；2、熱點衰減漸變填充色集合， 用於渲染每一個熱點從中心向外衰減時的漸變色；3、熱點半徑，也就是衰減半徑。每一個熱點需要從中心點外四周根據半徑計算衰減度， 對在熱點衰減區內的每一個像素計算需要渲染的顏色值，然后進行客戶端渲染。
• 特點：可以通過顏色用圖示化方法來表達二維離散數據的分布，並且可以呈現每一個離散點的權重值的衰減趨勢和離散點之間的衰減疊加。
• 應用場景：由於熱點圖的衰減是像素級別的，視覺效果方面極佳，但不能與具體數據進行一一對應，只能表示權重之間的差別，所以可以用於一些對精度要求不高 而需要重點突出權重漸變的行業，如可以制作氣象溫度對比動態效果圖、地震區域的震點強弱圖等。

二、使用

1、創建熱點圖圖層

首先創建一個熱點圖對象。由於熱點圖是對矢量點數據的渲染，不能作為底圖，初始化只需要設置一個圖層的名稱即可。

 

//創建一個名為“heatMap”的熱點圖層。
heatMapLayer = new SuperMap.Layer.HeatMapLayer("heatMap");
        

 

2、添加到地圖

 

然后將此圖層添加到map里面。

 

//向map中添加圖層
map.addLayers([heatMapLayer]);
        

 

3、添加數據

 

首先需要獲取一個點數組（SuperMap.Feature.Vector數組）， 數據可以從服務器查詢，也可以使用本地數據，不過都只能是點數據。 如下的形式：

 

var heatFeatures = [feature1,feature2,......,featureN];
        

 

這些features首先必須是點數據，每一個 feature 必須滿足在attributes屬性中存在記錄權重的值。 如我們可以這樣初始化feature：

 

var heatFeature = new SuperMap.Feature.Vector(
     new SuperMap.Geometry.Point(
                    Math.random()*360 - 180,
                    Math.random()*180 - 90
            ),
            {
                "value":Math.random()*9
            }
    );
        

 

這里的value就是記錄權重的字段，當每一個feature數據帶上權重數據后， 我們還需要讓layer知道如何讀取這些數據，所以需要告訴layer讀哪一個字段：

 

heatMapLayer.featureWeight = "value";
        

 

再把所有的features添加進layer

 

heatMapLayer.addFeatures(heatFeatures);
        

 

然后我們就可以獲得如下熱點圖的效果了：

4、自定義顏色

雖然上面的效果很好，但是顏色漸變是固定的，下面我們就試着自己來設置顏色的漸變

我們可以給屬性items賦值一個分段顏色數組以此來設置顏色漸變。如下：

 

            var items = [
                {
                    start:0,
                    end:1,
                    startColor:new  SuperMap.REST.ServerColor(170,240,233),
                    endColor:new  SuperMap.REST.ServerColor(180,245,185)
                },
                {
                    start:1,
                    end:2,
                    startColor:new  SuperMap.REST.ServerColor(180,245,185),
                    endColor:new  SuperMap.REST.ServerColor(223,250,177)
                },
                {
                    start:2,
                    end:3,
                    startColor:new  SuperMap.REST.ServerColor(223,250,177),
                    endColor:new  SuperMap.REST.ServerColor(224,239,152)
                },
                {
                    start:3,
                    end:4,
                    startColor:new  SuperMap.REST.ServerColor(224,239,152),
                    endColor:new  SuperMap.REST.ServerColor(160,213,103)
                },
                {
                    start:4,
                    end:5,
                    startColor:new  SuperMap.REST.ServerColor(160,213,103),
                    endColor:new  SuperMap.REST.ServerColor(44,104,50)
                },
                {
                    start:5,
                    end:6,
                    startColor:new  SuperMap.REST.ServerColor(44,104,50),
                    endColor:new  SuperMap.REST.ServerColor(29,135,59)
                },
                {
                    start:6,
                    end:7,
                    startColor:new  SuperMap.REST.ServerColor(29,135,59),
                    endColor:new  SuperMap.REST.ServerColor(118,154,49)
                },
                {
                    start:7,
                    end:8,
                    startColor:new  SuperMap.REST.ServerColor(118,154,49),
                    endColor:new  SuperMap.REST.ServerColor(204,175,27)
                },
                {
                    start:8,
                    end:9,
                    startColor:new  SuperMap.REST.ServerColor(204,175,27),
                    endColor:new  SuperMap.REST.ServerColor(198,63,2)
                }

            ];
            heatMapLayer.items = items;
        

 

這樣我們就實現了自己的顏色漸變：

這樣我們就可以使用熱點圖功能了，完整范例請見

http://www.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/heatmapLayer.html

http://www.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/heatmapColorSection.html

http://www.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/heatmapColorManual.html