在做项目的时候，碰见了这样一个问题：给地图上标注点对象，数据是从数据库来的，包含XY坐标信息的，通过graphic和graphiclayer 的方式添加到地图上，其中有一个对象的数量很多，上万了吧，通过上述的方式无法在地图上进行展示，就想到了聚类，当时由于技术和时间的关系，没有实现，最近，稍微有点先下时间，就又想起这事，继续研究，终于，皇天不负有心人，出来了，出来的第一时间写出来，以便大家使用。

首先，看看实现后的效果：

初始化状态

点击对象显示详细对象和信息框

放大后的效果

效果就是上面所示的这个样子的，下面说说实现的步骤与思路：

1、数据

正常数据的来源是源自数据库的JSON数据，在本例子中，新建了一个变量用来模拟JSON数据，我所用的数据是全国的市县级的点状数据转换来的，如下：

2、clusterLayer的封装

根据需求，对GraphicsLayer进行了封装为clusterLayer，来源为Arcgis for JS官方实例，对其中个别代码做了修改，源代码如下：

define([
  "dojo/_base/declare",
  "dojo/_base/array",
  "esri/Color",
  "dojo/_base/connect",

  "esri/SpatialReference",
  "esri/geometry/Point",
  "esri/graphic",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/TextSymbol",

  "esri/dijit/PopupTemplate",
  "esri/layers/GraphicsLayer"
], function (
  declare, arrayUtils, Color, connect,
  SpatialReference, Point, Graphic, SimpleMarkerSymbol, TextSymbol, 
  PopupTemplate, GraphicsLayer
) {
  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.
      //   distance:  Number?
      //     Optional. The max number of pixels between points to group points in the same cluster. Default value is 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.
      
      this._clusterTolerance = options.distance || 50;
      this._clusterData = http://www.mamicode.com/options.data || [];>3、ClusterLayer的导入与引用

文件目录
如上图所示文件目录，dojo导入的方式为：
    <script>
        // helpful for understanding dojoConfig.packages vs. dojoConfig.paths:
        // http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/
        var dojoConfig = {
            paths: {
                extras: location.pathname.replace(/\/[^/]+$/, "") + "/extras"
            }
        };
    </script>
在代码中引用的代码为：
require([
            "extras/ClusterLayer"
        ], function(
            ClusterLayer
        ){
});
4、地图、图层的加载等
完成上述操作，就能去实现聚类了，代码如下：
           parser.parse();

            map = new Map("map", {logo:false,slider: true});
            var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/image/MapServer");
            map.addLayer(tiled,0);
            map.centerAndZoom(new Point(103.847, 36.0473, map.spatialReference),4);

            map.on("load", function() {
                addClusters(county.items);
            });

            function addClusters(items) {
                console.log(items);
                var countyInfo = {};
                countyInfo.data = http://www.mamicode.com/arrayUtils.map(items, function(item) {>注：在创建ClusterLayer对象时有以下几个参数，
1、distance
distance控制的是两个点之间的距离，distance值越小，点密度越大，反之亦然；
2、labelColor
labelColor为个数显示的颜色；
3、labelOffset
labelOffset默认值为0，+为向上，-为向下；
4、singleColor
singleColor为单个对象出现时显示的颜色；
5、maxSingles
maxSingles是最多可显示多少个点。
6、resolution
resolution是一个变化的值，当前的地图范围/地图的范围即为resolution；
7、对ClusterLayer进行ClassBreaksRenderer
此处ClassBreaksRenderer的短点的值可按照数据的多少来确定。

cluster.html的源码如下：
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Cluster</title>
    <link rel="stylesheet" href=http://www.mamicode.com/"http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css">>

欢迎关注LZUGIS CSDN之Arcgis for JS系列文章，有疑问请联系：
QQ：1004740957
Mail：niujp08@qq.com
来信请注明您的来意，方便我为您解疑答惑。




Arcgis for JS之Cluster聚类分析的实现