arcgis api for js入门开发系列八聚合效果(含源代码)

sinna · 发表于 2016-12-26 11:25

上一篇实现了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);

复制代码

.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);
}
}

复制代码

具体实现的详细过程，下载源代码：https://yun.baidu.com/s/1c1LO2Zm

GIS之家论坛（推荐）：GIS之家论坛
GitHub:GIS之家GitHub
GIS作品：GIS之家
QQ兴趣部落：GIS之家部落
GIS项目交流群：238339408
GIS之家交流群一：432512093

[二次开发] arcgis api for js入门开发系列八聚合效果(含源代码)

相关帖子