1.作用:

聚簇类是用于前端显示优化,使POI点要素显示更为美观。大量的Marker距离太近会引起压盖而对浏览或者操作产生不便,因此,一般在超过1K点的时候,用此类。、

2.使用方式:

   1:  // cluster layer that uses OpenLayers style clustering
   2:              clusterLayer = new ClusterLayer({
   3:                "data": photoInfo.data,
   4:                "distance": 100,
   5:                "id": "clusters",
   6:                "labelColor": "#fff",
   7:                "labelOffset": 10,
   8:                "resolution": map.extent.getWidth() / map.width,
   9:                "singleColor": "#888",
  10:                "maxSingles":1999,
  11:                "singleTemplate": popupTemplate
  12:              });
  13:              var defaultSym = new SimpleMarkerSymbol().setSize(4);
  14:              var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
  15:   
  16:              var picBaseUrl = "http://static.arcgis.com/images/Symbols/Shapes/";
  17:              var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
  18:              var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
  19:              var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72).setOffset(0, 15);
  20:              renderer.addBreak(0, 2, blue);
  21:              renderer.addBreak(2, 200, green);
  22:              renderer.addBreak(200, 1001, red);
  23:   
  24:              clusterLayer.setRenderer(renderer);

25: map.addLayer(clusterLayer);

 

构造函数源码重点:

return declare([GraphicsLayer], {
    constructor: function(options) {
      // options:
      //   data:  Object[]
      //     Array of objects. Required. Object are required to have properties named x, y and attributes. The x and y coordinates have to be numbers that represent a points coordinates.要素对象集合是必要字段。而要素是Json格式,有三个key,x,y,attributes,坐标值之外的属性数据全部放在attributes字段里。
      //   distance:  Number?
      //     Optional. The max number of pixels between points to group points in the same cluster. Default value is 50.该字段是设定两点之间小于多少个像素值就被归类于同一个簇中

默认值是50.
      //   labelColor:  String?
      //     Optional. Hex string or array of rgba values used as the color for cluster labels. Default value is #fff (white).
      //   labelOffset:  String?
      //     Optional. Number of pixels to shift a cluster label vertically. Defaults to -5 to align labels with circle symbols. Does not work in IE.
      //   resolution:  Number
      //     Required. Width of a pixel in map coordinates. Example of how to calculate:
      //     map.extent.getWidth() / map.width
      //   showSingles:  Boolean?
      //     Optional. Whether or graphics should be displayed when a cluster graphic is clicked. Default is true.
      //   singleSymbol:  MarkerSymbol?
      //     Marker Symbol (picture or simple). Optional. Symbol to use for graphics that represent single points. Default is a small gray SimpleMarkerSymbol.
      //   singleTemplate:  PopupTemplate?
      //     PopupTemplate</a>. Optional. Popup template used to format attributes for graphics that represent single points. Default shows all attributes as "attribute = value" (not recommended).
      //   maxSingles:  Number?
      //     Optional. Threshold(阈值) for whether or not to show graphics for points in a cluster. Default is 1000.
      //   webmap:  Boolean?
      //     Optional. Whether or not the map is from an ArcGIS.com webmap. Default is false.
      //   spatialReference:  SpatialReference?
      //     Optional. Spatial reference for all graphics in the layer. This has to match the spatial reference of the map. Default is 102100. Omit this if the map uses basemaps in web mercator.

官方实例在这。点击下载

【ArcGIS for JavaScript api】Clusterlayer聚簇类的更多相关文章

  1. Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式

    原文:Arcgis for Javascript API下类似于百度搜索A.B.C.D marker的实现方式 多说无益,首先贴两张图让大家看看具体的效果: 图1.百度地图搜索结果 图2.Arcgis ...

  2. ArcGIS For JavaScript API 默认参数

    “esri.config”的是在1.3版中的的“esriConfig”的替代品.如果您使用的是1.2或更低的版本,您应该参阅默认API v1.2和更低的配置.对于版本1.3或更高版本,您可以使用“es ...

  3. 利用Arcgis for javascript API绘制GeoJSON并同时弹出多个Popup

    1.引言 由于Arcgis for javascript API不可以绘制Geojson,并且提供的Popup一般只可以弹出一个,在很多专题图制作中,会遇到不少的麻烦.因此本文结合了两个现有的Arcg ...

  4. arcgis for JavaScript API 4.5与4.3的区别

    arcgis 4.5与4.3区别: 鉴于本人使用4.3时间比较久,而arcgis for JavaScript API于9月28日推出了4.5版本,但是直接更换4.5的init.js会出现意想不到的错 ...

  5. ArcGIS API for JavaScript开发笔记(一)——ArcGIS for Javascript API 3.14本地部署

    堪称史上最详细的< ArcGIS forJavascript API 3.14本地部署>文档,有图有真相~~~ ---------环境:Windows server 2012R2,IIS ...

  6. ArcGIS Server JavaScript API 各命名空间的含义【转】

    1.esri 命名空间      所有的对象都是在 esri 命名空间下的,esri 有自己的属性和方法.      如 esri.version 返回当前 JavaScript API 的版本号.e ...

  7. 【转】基于ArcGIS for javascript api 轨迹回放

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  8. ARCGIS FOR JAVASCRIPT API 出现multipleDefine问题

    问题: Error {src: "dojoLoader", info: Object, stack: (...), message: "multipleDefine&qu ...

  9. ArcGIS Server JavaScript API中ESRI字体下载

    ---------------------------------------------------------------------------------- import sys, os im ...

随机推荐

  1. 对于表达式比较长的 for 语句和 if 语句

    对于表达式比较长的 for 语句和 if 语句,为了紧凑起见可以适当地去 掉一些空格,如 for (i=0; i<10; i++)和 if ((a<=b) && (c< ...

  2. (转)Hdmi edid 数据解析

    Hdmi edid 数据解析    (转自:http://blog.chinaunix.net/uid-20672559-id-3384035.html) 一.EDID数据格式: EDID 1.3 d ...

  3. android2.2应用开发之IccCard(sim卡或USIM卡)(转至 http://www.2cto.com/kf/201306/223784.html)

    如果要做android通讯录的联系人的机卡混排显示,由于手机卡类型的不同,导致手机卡存储容量以及可以存储信息不同,就要涉及到android去读Icc卡的信息. 一般的sim卡只能存储姓名跟一个电话号码 ...

  4. Python调用打印机参考例子

    参考资料: http://blog.csdn.net/jdh99/article/details/42585987 http://www.oschina.net/question/1438043_23 ...

  5. CentOS查看你是否有USB 3.0端口

    近来的大多数的新计算机都有了USB 3.0接口了.但是你怎么知道你的计算机有没有USB 3.0接口?这篇短文中,我们会告诉如何在Linux下知道你的系统上有USB 3还是USB3接口. 在Linux终 ...

  6. thinkphp隐藏模块实例

    1.项目中若要隐藏模块的做法 2.配置如下: <?php return array( //'配置项'=>'配置值' 'MODULE_ALLOW_LIST' => array ('Ho ...

  7. 恢复VS2013窗口的默认布局

    打开VS2013   在菜单栏中找到“Window”即“窗口”选项   单击窗口中的“reset Window layout"   点击恢复窗口布局后会有如下提示,选择Yes即可   此时即 ...

  8. Matlab中imread函数使用报错“不应为MATLAB 表达式”分析

    问题描述: 使用imread读取特定路径下的文件时,会提示出错! >> mytest错误: 文件:mytest.m 行:10 列:87不应为 MATLAB 表达式. 出错行: Images ...

  9. IE6图片元素img下出现多余空白问题

    在进行页面的 DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法 也是“见机行事”,根据原因的不同要用不同 ...

  10. linux中nmcli命令详解

    https://www.iyunv.com/thread-269695-1-1.html http://www.178linux.com/44668