arcgis api for js入門開發系列八聚合效果

01-30

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

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

1.map.html引用聚合包，項目已經包含進來了的聚合文件夾：

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

2.map.js初始化函數調用聚合效果的js介面，map.clusterLayer.js實現聚合核心效果的js文件

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

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

（1）聚合數據來源：調用地圖動態服務的餐飲圖層作為聚合效果的數據源

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

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

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

GIS作品：GIS之家

QQ興趣部落：GIS之家部落

GIS項目交流群：238339408

GIS之家交流群一：432512093