地信网论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

免费视频|新人指南|答学员问|投诉删帖

禁止上传涉密资料|赚取铜板|附件下载

查看: 222|回复: 0
收起左侧

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

[复制链接]
发表于 2016-12-26 11:25 | 显示全部楼层 |阅读模式
土地论坛 三农有趣味

马上注册地信网,享受更多功能,学习更多知识,成就人生精彩!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
上一篇实现了demo的图层控制模块,本篇新增聚合效果,截图如下(源代码见文章底部):

                               
登录/注册后可看大图

                               
登录/注册后可看大图
聚合效果实现的思路如下:
1.map.html引用聚合包,项目已经包含进来了的聚合文件夹:
  1.     <script type="text/javascript">
  2.         //配置arcgis拓展解析天地图服务类引用的路径
  3.         dojoConfig = {
  4.             parseOnLoad: true,
  5.             paths: {
  6.                 ExtensionClusterLayer: location.pathname.replace(/\/[^/]+$/, "") + "/js/main/extras/ClusterLayer"//聚合效果拓展类引用
  7.             }
  8.         };
  9.     </script>
复制代码
2.map.js初始化函数调用聚合效果的js接口,map.clusterLayer.js实现聚合核心效果的js文件
  1.     //加载聚合效果图
  2.     DCI.cluster.Init(map);
复制代码
.map.clusterLayer.js实现聚合核心思路:
(1)聚合数据来源:调用地图动态服务的餐饮图层作为聚合效果的数据源
  1. //采用地图服务的餐饮图层来作为聚合效果的数据来源
  2. var typeUrl = MapConfig.vecMapUrl + "/" + 0;//餐饮图层
  3. var queryTask = "";
  4. var query = new esri.tasks.Query();
  5. query.returnGeometry = true;
  6. query.outFields = ["NAME"];
  7. query.where = "1=1";
  8. queryTask = new esri.tasks.QueryTask(typeUrl);
  9. queryTask.execute(query, DCI.cluster.resultInfo);
复制代码
(2)查询地图服务结果渲染聚合效果:
  1. /**
  2.          * 餐饮图层查询
  3.          */
  4.         resultInfo: function (results) {
  5.             var data = [];//聚合数据源定义
  6.             if (results.features.length > 0) {
  7.                 for (var i = 0; i < results.features.length; i++) {//遍历查询的图层结果集合,构造聚合效果的数据源
  8.                     var info = {};
  9.                     var latlng = results.features[i].geometry;
  10.                     var webMercator = esri.geometry.webMercatorUtils.geographicToWebMercator(latlng);//地理坐标系必须要转换摩卡托的投影坐标系,不然聚合没效果
  11.                     info.x = webMercator.x;
  12.                     info.y = webMercator.y;
  13.                     info.attributes = results.features[i].attributes;//气泡窗口模型的属性
  14.                     data.push(info);
  15.                 }
  16.                 // popupTemplate to work with attributes specific to this dataset
  17.                 var popupTemplate = new esri.dijit.PopupTemplate({//气泡窗口模型定义
  18.                     "title": "",
  19.                     "fieldInfos": [{
  20.                         "fieldName": "NAME",//字段值
  21.                         "label": "名称:",//字段显示别名
  22.                         visible: true//设置是否可见
  23.                     }]
  24.                 });
  25.                 // cluster layer that uses OpenLayers style clustering
  26.                 DCI.cluster.clusterLayer = new ExtensionClusterLayer.ClusterLayer({
  27.                     "data": data,//绑定聚合数据源
  28.                     "distance": 8000000,//设置聚合距离,根据地图分辨率来设置合适的值,默认是50
  29.                     "id": "clusters",
  30.                     "labelColor": "#fff",//图标字体颜色值,白色字体
  31.                     "labelOffset": 10,//字体偏移位置
  32.                     "resolution": DCI.cluster.map.extent.getWidth() / DCI.cluster.map.width,//计算当前地图的分辨率
  33.                     "singleColor": "#888",
  34.                     "singleTemplate": popupTemplate//绑定气泡窗口模型
  35.                 });
  36.                 //下面是设置聚合效果模型,根据聚合的点数来分三个等级,不同等级用不同的大小以及颜色图标来表示,0-2为蓝色;2-200为绿色;200-1001为红色
  37.                 var defaultSym = new esri.symbol.SimpleMarkerSymbol().setSize(4);
  38.                 var renderer = new esri.renderers.ClassBreaksRenderer(defaultSym, "clusterCount");
  39.                 var picBaseUrl = getRootPath() + "Content/images/clusterlayer/";
  40.                 var blue = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
  41.                 var green = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
  42.                 var red = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72).setOffset(0, 15);
  43.                 renderer.addBreak(0, 2, blue);
  44.                 renderer.addBreak(2, 200, green);
  45.                 renderer.addBreak(200, 1001, red);
  46.                 //设置聚合图层的分级模板
  47.                 DCI.cluster.clusterLayer.setRenderer(renderer);
  48.                 //聚合图层叠加在地图展示
  49.                 DCI.cluster.map.addLayer(DCI.cluster.clusterLayer);
  50.             }

  51.         }
复制代码
具体实现的详细过程,下载源代码:https://yun.baidu.com/s/1c1LO2Zm

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


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

土流网土地流转招募令
在线客服

手机版|新人指南|地信论坛 ( 湘ICP备14003170号-5 湖南土流信息有限公司 版权所有 关于地信 联系方式 邮箱登陆

Powered by Discuz! X3.2

快速回复 返回顶部 返回列表