上一篇實現了demo的圖層控制模組，本篇新增聚合效果，截圖如下（原始碼見文章底部）：

聚合效果實現的思路如下：

1.map.html引用聚合包，專案已經包含進來了的聚合資料夾：

    <script type="text/javascript">
        //配置arcgis拓展解析天地圖服務類引用的路徑
        dojoConfig = {
            parseOnLoad: true,
            paths: {
                ExtensionClusterLayer: location.pathname.replace(/\/[^/]+$/, "") + "/js/main/extras/ClusterLayer"//聚合效果拓展類引用
            }
        };
    </script>
 

2.map.js初始化函式呼叫聚合效果的js介面，map.clusterLayer.js實現聚合核心效果的js檔案

    //載入聚合效果圖
    DCI.cluster.Init(map);

3.map.clusterLayer.js實現聚合核心思路：

（1）聚合資料來源：呼叫地圖動態服務的餐飲圖層作為聚合效果的資料來源

//採用地圖服務的餐飲圖層來作為聚合效果的資料來源
var typeUrl = MapConfig.vecMapUrl + "/" + 0;//餐飲圖層
var queryTask = "";
var query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["NAME"];
query.where = "1=1";
queryTask = new esri.tasks.QueryTask(typeUrl);
queryTask.execute(query, DCI.cluster.resultInfo);
 

（2）查詢地圖服務結果渲染聚合效果：

        /**
         * 餐飲圖層查詢
         */
        resultInfo: function (results) {
            var data = [];//聚合資料來源定義
            if (results.features.length > 0) {
                for (var i = 0; i < results.features.length; i++) {//遍歷查詢的圖層結果集合,構造聚合效果的資料來源
                    var info = {};
                    var latlng = results.features[i].geometry;
                    var webMercator = esri.geometry.webMercatorUtils.geographicToWebMercator(latlng);//地理座標系必須要轉換摩卡託的投影座標系,不然聚合沒效果
                    info.x = webMercator.x;
                    info.y = webMercator.y;
                    info.attributes = results.features[i].attributes;//氣泡視窗模型的屬性
                    data.push(info);
                }
                // popupTemplate to work with attributes specific to this dataset
                var popupTemplate = new esri.dijit.PopupTemplate({//氣泡視窗模型定義
                    "title": "",
                    "fieldInfos": [{
                        "fieldName": "NAME",//欄位值
                        "label": "名稱:",//欄位顯示別名
                        visible: true//設定是否可見
                    }]
                });
                // cluster layer that uses OpenLayers style clustering
                DCI.cluster.clusterLayer = new ExtensionClusterLayer.ClusterLayer({
                    "data": data,//繫結聚合資料來源
                    "distance": 8000000,//設定聚合距離，根據地圖解析度來設定合適的值，預設是50
                    "id": "clusters",
                    "labelColor": "#fff",//圖示字型顏色值，白色字型
                    "labelOffset": 10,//字型偏移位置
                    "resolution": DCI.cluster.map.extent.getWidth() / DCI.cluster.map.width,//計算當前地圖的解析度
                    "singleColor": "#888",
                    "singleTemplate": popupTemplate//繫結氣泡視窗模型
                });
                //下面是設定聚合效果模型，根據聚合的點數來分三個等級，不同等級用不同的大小以及顏色圖示來表示，0-2為藍色；2-200為綠色；200-1001為紅色
                var defaultSym = new esri.symbol.SimpleMarkerSymbol().setSize(4);
                var renderer = new esri.renderers.ClassBreaksRenderer(defaultSym, "clusterCount");
                var picBaseUrl = getRootPath() + "Content/images/clusterlayer/";
                var blue = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
                var green = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
                var red = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72).setOffset(0, 15);
                renderer.addBreak(0, 2, blue);
                renderer.addBreak(2, 200, green);
                renderer.addBreak(200, 1001, red);
                //設定聚合圖層的分級模板
                DCI.cluster.clusterLayer.setRenderer(renderer);
                //聚合圖層疊加在地圖展示
                DCI.cluster.map.addLayer(DCI.cluster.clusterLayer);
            }

        }
 

GIS之家新部落格系列釋出更新在GIS之家網站，歡迎關注收藏：GIS之家網站 
GIS之家作品：GIS之家 
GIS之家交流諮詢：諮詢模式