一、簡介
- 原理：按照格網大小將區域進行划分，由一個矩形格網替代當前范圍內的數據，由格網中心數字代替格網的權重（可以為格網中數據的數量，數據某權重的平均值、最大值、最小值等）， 由格網之間顏色的不同表達漸變性
- 特點：結合了熱點圖和聚散的特性，具有熱點圖的對權重的層次漸變直觀性以及聚散解決數據量過大的優勢。
- 應用場景：熱點格網圖將大量數據以格網顯示，減少了瀏覽器的負荷，在格網擴展開后又能保證數據的完整性，並且具有熱點圖的部分顏色漸變趨勢帶來的視覺直觀性， 該功能主要用於渲染大數據量點數據，可以應用於人口密度、溫度監控、高原地勢成像、海底海拔成像等行業。
二、使用
首先我們得做一些准備：
- 保證存在可用的數據，如果我們的格網只代表數量，那么用戶只需要提前准備一個非空的點數據集即可，確保每一個點數據存在地理坐標， 如果我們的格網不是代表數量，而是權重平均值（或者最大最小值等），那么還需要保證每一個點數據存在權重字段，假如為 weightName ， 此字段的數據必須為數字類型，在客戶端需要設置heatGridLayer.dataField = weightName ；以便獲取權重進行計算。
- 由於熱點格網圖只是渲染矢量數據，所以不能作為底圖，我們需要在map添加一個 TiledDynamicRESTLayer
1、創建熱點格網圖圖層
首先創建一個熱點格網圖對象。由於熱點格網圖只負責矢量數據的渲染，所以初始化只需要設置一個圖層的名稱即可。
//創建一個名為“myHeatGrid”的熱點格網圖層。
var heatGridLayer = new SuperMap.Layer.HeatGridLayer("myHeatGrid");
2、添加到地圖
然后將此圖層添加到map里面。
//向map中添加圖層
map.addLayers([heatGridLayer]);
3、添加數據
首先需要獲取一個點數組（SuperMap.Feature.Vector數組）， 數據可以從服務器查詢我們之前准備好的點數據集，也可以使用本地數據，不過都只能是點數據。 如下的形式：
var heatFeatures = [feature1,feature2,......,featureN];
其次需要一個格網子對象數組主要用於對數據進行分段渲染。此數組的每一個子對象必須有如下三個屬性：
- start：代表格網表示的數據的下限（包含）;
- end：代表格網表示的數據的上限（不包含）;
- style：代表需要賦值給格網的style。style詳細屬性請查看SuperMap.Feature.Vector.style
//創建一個格網子對向數組
var items = [
{
//在此例子中代表格網中點數據數量的下限，也就是至少為0個
start:0,
//在此例子中代表格網中點數據數量的上限，也就是至多不超過5個（不包含5個）
end:5,
//代表滿足一個格網中數據數量大於等於0且小於5的格網按照如下的style進行渲染
style:{
//格網的邊框顏色
strokeColor: "#C69944",
//格網邊框的寬度
strokeWidth: 1,
//格網內部填充色
fillColor: "#B8E4B8",
//格網的透明度
fillOpacity: 0.5
}
},
{
start:5,
end:10,
style:{
strokeColor: "#C69944",
strokeWidth: 1,
fillColor: "#66dd66",
fillOpacity: 0.5
}
},
...
];
設置相關參數：
//設置熱點格網圖的格網子對象數組，如果不設置則所有格網都是統一默認style
heatGridLayer.items=items;
//將數據添加到圖層中
heatGridLayer.addFeatures(heatFeatures);
然后一個簡單的熱點格網圖我們就創建成功了，如下是查詢的全球各國首都制作的格網圖效果：
4、其他常用屬性
4.1 labelMode 與 dataField
此范例默認表示的是數量，也就是 labelMode 為默認0，可以用於與人口密度的展示方面。
當 labelMode 屬性設置為非0時，dataField 屬性也必須設置，需要制定一下數據的來源，如：
//設置為格網中所有數據的平均值
heatGridLayer.labelMode = SuperMap.Layer.HeatGridLayer.LABELMODE_MEAN ;
//假設我們的點數據集的權重字段weightName為“temperature”，那么此處需要指定
//如果數據時查詢出來的，那么在 feature.attributes 里面會自動存放權重，如果是自己創建的Feature，那么必須自己往feature.attributes里添加權重值。
heatGridLayer.dataField = "temperature";
保證數據存在權重，客戶端相應設置權重字段就能使用平均值、最大最小的模式
4.2 gridHeight 與 gridWidth
這兩個參數用於設置格網的高度和寬度，單位是像素，默認都是50像素的大小。熱點格網圖中的點數據聚散計算就是由格網的寬高決定的， 聚散計算時會將格網大小換算為地理范圍，將內部所有點聚散為一個格網，所以格網的寬高越大，相對來說聚散的點越多，而格網數量會越少， 格網過少效果不好，過多影響瀏覽器性能，從而用戶需要根據自己的需求設置寬高。格網寬高必須都大於0，格網寬高可隨意設置，如：
//設置格網的高度
heatGridLayer.gridHeight = 10 ;
//設置格網的寬度
heatGridLayer.gridWidth = 25;
4.3 isZoomIn 與 zoomInNumber
這兩個參數用於控制點擊格網時的放大效果， isZoomIn 默認為true，代表默認情況點擊格網地圖會進行放大， zoomInNumber 默認為1，代表點擊格網時地圖放大一級。 這兩個參數可以控制點擊格網是否放大以及放大的程度，如：
//設置點擊格網時可以放大地圖
heatGridLayer.isZoomIn = true ;
//設置點擊格網時地圖放大2級
heatGridLayer.zoomInNumber = 2;
4.4 spreadZoom
設置熱點格網圖的擴散級別，當地圖放大到這一級時格網會進行擴散，還原為點數據，默認為3，如：
//設置格網圖放大到第4級時進行格網擴散
heatGridLayer.spreadZoom = 4 ;
擴散后的效果如下：
5、事件使用
熱點格網圖支持很多事件，如：
- clickFeature：點擊點事件
- clickGrid：點擊網格事件
- clickout：點擊要素外
- mouseoverFeature：移進點事件
- mouseoverGrid：移進網格事件
- mouseoutFeature：移出點事件
- dblclickFeature：雙擊點事件
- dblclickGrid：雙擊網格事件
這里舉例說明一下最常用的clickFeature事件，當地圖、底圖以及heatGridLayer都准備完畢時注冊事件如下：
//初始化格網選擇事件控件
var select = new SuperMap.Control.SelectGrid(heatGridLayer,{
callbacks:{
//綁定clickFeature
clickFeature:function(f){
//初始化信息框
openInfoWin(f);
}
}
});
//將控件添加進map
map.addControl(select);
//激活控件
select.activate();
彈出信息框的代碼如下：
function openInfoWin(feature){
//獲取feature的幾何對象
var geo = feature.geometry;
//獲取geo的bounds
var bounds = geo.getBounds();
//獲取bounds的中心點
var center = bounds.getCenterLonLat();
//創建popup的內容
var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>";
contentHTML += "<div>"+"SMID："+feature.data.SMID+"<br />"+"國家："+feature.data.COUNTRY+"<br />"+"首都："+feature.data.CAPITAL+"</div></div>";
//創建一個popup彈出信息框
var popup = new SuperMap.Popup.FramedCloud("popwin",
new SuperMap.LonLat(center.lon,center.lat),
null,
contentHTML,
null,
true);
feature.popup = popup;
//將信息框添加進map
map.addPopup(popup);
}
然后當我們點擊點數據時就能獲取如下效果：
這樣我們就可以使用熱點格網圖功能了，完整范例請見：
http://www.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/heatGridLayer.html