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. cVim——Chrome上更强大的vim插件

    ref: http://www.cnblogs.com/voidsky/p/5490787.html 介绍 也许很多人在chrome上都用过类似Vimium, ViChrome的插件,这些插件的目的都 ...

  2. PHP curl_setopt函数用法介绍补充篇

    1.curl数据采集系列之单页面采集函数get_html 单页面采集在数据采集过程中是最常用的一个功能 有时在服务器访问限制的情况下 只能使用这种采集方式 慢 但是可以简单的控制 所以写好一个常用的c ...

  3. jQuery-理解选择结果

    使用$函数选择元素返回的是一个对象,可以称这个对象为jQuery对象,在jQuery执行一些操作的时候很多情况下都是返回的jQuery对象. jQuery中常用处理结果集的方法和属性 表达式 例子 说 ...

  4. 查看 SharePoint 2013 部署到GAC的自定义dll

    在SharePoint 2007和2010中,自定义dll存放在“C:\Windows\assembly\”文件夹中,在Windows资源管理器中可以看到. 但在Sharepoint 2013中,却无 ...

  5. jdbcType 与 Java type

    JDBC Type           Java Type CHAR                String VARCHAR             String LONGVARCHAR      ...

  6. bootstrap大图轮播手机端不能手指滑动解决办法

    网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上 ...

  7. CSS使用学习总结

    尽量少使用类,因为可以层叠识别,如: .News h3而不必在h3上加类 <div class=”News”> <h3></h3> <h2></h ...

  8. DEDECMS教程:首页实现分页的两种方法

    有两种办法可以实现: 一.用arclist标签+Ajax实现织梦首页分页 二.交叉栏目ID 实现织梦首页分页 一.用arclist标签+Ajax实现织梦首页分页 1.必须在首页<head> ...

  9. makefile--变量的使用(二)

    原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 仔细研究我们的之前Makefile发现,我们还有改进的地方,就是此处: target_bin : ...

  10. JQuery--使用autocomplete控件进行自己主动输入完毕(相当于模糊查询)

    之前为了实现这个功能花了我几天的时间. 事实上.实现了之后发现也就那么回事,正所谓万事开头难嘛.. 废话不多说了.这里我使用的是JQuery控件库中的一个Autocomplete控件.即Autocom ...