GIS可視化——聚散圖

一、簡介

隨着計算機的發展，瀏覽器的不斷進步與完善，現今大部分瀏覽渲染效率有了很大的改善， 但是由於瀏覽器廠商的不同，瀏覽器種類繁多，性能不一，並且很多用戶還使用着不少老的瀏覽， 那些如IE6、7等的老式瀏覽器渲染能力有限，在處理大量數據的時候無法滿足用戶的需求， 為此聚散的思想誕生了，聚散圖將非重點的批量數據進行合並，只渲染少量數據，散開並突出重要信息點， 減少了瀏覽器的負荷，解決了大數據量渲染的性能問題。

• 原理：按區域將多個離散點進行計算，合並成為一個聚散點進行顯示，在某種情況下（如點擊聚散點或者移動到聚散點內部時）將特定的聚散點還原為離散點
• 特點：由於瀏覽器渲染數據的限制，無法顯示大量數據，聚散圖可以合並離散點，提高瀏覽器顯示的數據上限。
• 應用場景：多用於數據量特別大的場景，一次性繪制在瀏覽器導致瀏覽器負荷過重，所以將數據進行合並，這樣整個頁面的聚散點數量不至於過多，減少瀏覽器壓力， 同時需要獲取離散點信息時可以還原對應的聚散點，即保證了瀏覽器裝載了所有數據，又能保證瀏覽器負荷在可接受范圍內。

二、使用

接下來我們一起看一下聚散圖的使用方式：

1、創建聚散圖圖層

 

首先創建一個聚散圖對象。由於聚散圖只負責矢量數據的渲染，所以初始化只需要設置一個圖層的名稱即可。

 

//創建一個名為“Cluster”的聚散圖層。
clusterLayer = new SuperMap.Layer.ClusterLayer("Cluster");
        

 

2、添加到地圖

 

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

 

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

 

3、添加數據

 

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

 

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

 

添加點數據

//將數據添加到圖層中
clusterLayer.addFeatures(features);
    

即可實現類似如下效果，地圖放大縮小時點數據會自動聚散或者散開：

4、事件處理

 

上述的聚散圖的聚散點的散開和聚散都是自動計算的，用戶不能點擊聚散點進行散開，如果需要點擊聚散點進行散開， 則需要添加SelectCluster控件。如下：

//創建聚散選擇控件。
var select = new SuperMap.Control.SelectCluster(clusterLayer);
//將控件添加到map上
map.addControl(select);
//激活控件。
select.activate();
    

這樣當用戶點擊聚散點時會散開，如下：

聚散圖支持很多事件，如： 

• click：點擊事件（包括聚散點和非聚散點）
• clickout：點擊要素外
• over：移進要素事件
• out：移出要素事件
• dblclick：雙擊事件

 

使用事件必須要創建SelectCluster控件，這里舉個簡單例子演示如何使用事件。

//創建聚散選擇控件。該控件實現了聚散圖層的鼠標事件。
var select = new SuperMap.Control.SelectCluster(clusterLayer,{
    callbacks:{
        click:function(f){
            if(!f.isCluster){ //當點擊聚散點的時候不彈出信息窗口
                openInfoWin(f);
            }
        }
    }
});
//將控件添加到map上
map.addControl(select);
//激活控件。
select.activate();
    

定義openInfoWin方法：

function openInfoWin(feature){
    var geo = feature.geometry;
    var bounds = geo.getBounds();
    //獲取中心點
    var center = bounds.getCenterLonLat();
    var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>";
    //這里我們在創建 feature 的時候動態創建了 info 屬性用於存放部分信息
    contentHTML += "<div>"+feature.info.name+"</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添加popup
    map.addPopup(popup);
}
    

然后可以實現如下效果：

5、高級擴展

接下來我們嘗試修改聚散點的圖片以及自定義聚散的數量，聚散圖提供了屬性clusterStyles給我們擴展：

//設置clusterStyles屬性
clusterLayer.clusterStyles = [
    {
        "count":15,//子節點小於等於15的聚散點
         //style的詳情參見 SuperMap.Feature.Vector.style
        "style":{
            fontColor:"#404040",
            graphic:true,
            externalGraphic:"images/markerbig.png",
            graphicWidth:37,
            graphicHeight:38,
            labelXOffset:0,
            labelYOffset:5
        }
    },
    {
        "count":50,//子節點小於等於50大於15的聚散點
        "style":{
            fontColor:"#404040",
            graphic:true,
            externalGraphic:"images/markerflag.png",
            graphicWidth:41,
            graphicHeight:46,
            labelXOffset:0,
            labelYOffset:6
        }
    },
    {
        "count":"moreThanMax",// 子節點大於50的聚散點
        "style":{
            fontColor:"#404040",
            graphic:true,
            externalGraphic:"images/circle.png",
            graphicWidth:48,
            graphicHeight:53,
            labelXOffset:0,
            labelYOffset:0
        }
    }
];
    

這樣我們就可以獲得如下效果了：

完整范例請見

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