Arcgis js api 聚合图层

1. define([  
2.   "dojo/_base/declare",  
3.   "dojo/_base/array",  
4.   "esri/Color",  
5.   "dojo/_base/connect",  
6.   
7.   "esri/SpatialReference",  
8.   "esri/geometry/Point",  
9.   "esri/graphic",  
10.   "esri/symbols/SimpleMarkerSymbol",  
11.   "esri/symbols/TextSymbol",  
12.   
13.   "esri/dijit/PopupTemplate",  
14.   "esri/layers/GraphicsLayer"  
15. ], function (  
16.   declare, arrayUtils, Color, connect,  
17.   SpatialReference, Point, Graphic, SimpleMarkerSymbol, TextSymbol,   
18.   PopupTemplate, GraphicsLayer  
19. ) {  
20.   return declare([GraphicsLayer], {  
21.     constructor: function(options) {  
22.       // options:  
23.       //   data:  Object[]  
24.       //     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.  
25.       //   distance:  Number?  
26.       //     Optional. The max number of pixels between points to group points in the same cluster. Default value is 50.  
27.       //   labelColor:  String?  
28.       //     Optional. Hex string or array of rgba values used as the color for cluster labels. Default value is #fff (white).  
29.       //   labelOffset:  String?  
30.       //     Optional. Number of pixels to shift a cluster label vertically. Defaults to -5 to align labels with circle symbols. Does not work in IE.  
31.       //   resolution:  Number  
32.       //     Required. Width of a pixel in map coordinates. Example of how to calculate:   
33.       //     map.extent.getWidth() / map.width  
34.       //   showSingles:  Boolean?  
35.       //     Optional. Whether or graphics should be displayed when a cluster graphic is clicked. Default is true.  
36.       //   singleSymbol:  MarkerSymbol?  
37.       //     Marker Symbol (picture or simple). Optional. Symbol to use for graphics that represent single points. Default is a small gray SimpleMarkerSymbol.  
38.       //   singleTemplate:  PopupTemplate?  
39.       //     PopupTemplate. Optional. Popup template used to format attributes for graphics that represent single points. Default shows all attributes as "attribute = value" (not recommended).  
40.       //   maxSingles:  Number?  
41.       //     Optional. Threshold for whether or not to show graphics for points in a cluster. Default is 1000.  
42.       //   webmap:  Boolean?  
43.       //     Optional. Whether or not the map is from an ArcGIS.com webmap. Default is false.  
44.       //   spatialReference:  SpatialReference?  
45.       //     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.  
46.         
47.       this._clusterTolerance = options.distance || 50;  
48.       this._clusterData = options.data || [];  
49.       this._clusters = [];  
50.       this._clusterLabelColor = options.labelColor || "#000";  
51.       // labelOffset can be zero so handle it differently  
52.       this._clusterLabelOffset = (options.hasOwnProperty("labelOffset")) ? options.labelOffset : -5;  
53.       // graphics that represent a single point  
54.       this._singles = []; // populated when a graphic is clicked  
55.       this._showSingles = options.hasOwnProperty("showSingles") ? options.showSingles : true;  
56.       // symbol for single graphics  
57.       var SMS = SimpleMarkerSymbol;  
58.       this._singleSym = options.singleSymbol || new SMS("circle", 6, null, new Color(options.singleColor));  
59.       this._singleTemplate = options.singleTemplate || new PopupTemplate({ "title": "", "description": "{*}" });  
60.       this._maxSingles = options.maxSingles || 1000;  
61.   
62.       this._webmap = options.hasOwnProperty("webmap") ? options.webmap : false;  
63.   
64.       this._sr = options.spatialReference || new SpatialReference({ "wkid": 102100 });  
65.   
66.       this._zoomEnd = null;  
67.     },  
68.   
69.     // override esri/layers/GraphicsLayer methods   
70.     _setMap: function(map, surface) {  
71.       // calculate and set the initial resolution  
72.       this._clusterResolution = map.extent.getWidth() / map.width; // probably a bad default...  
73.       this._clusterGraphics();  
74.   
75.       // connect to onZoomEnd so data is re-clustered when zoom level changes  
76.       this._zoomEnd = connect.connect(map, "onZoomEnd", this, function() {  
77.         // update resolution  
78.         this._clusterResolution = this._map.extent.getWidth() / this._map.width;  
79.         this.clear();  
80.         this._clusterGraphics();  
81.       });  
82.   
83.       // GraphicsLayer will add its own listener here  
84.       var div = this.inherited(arguments);  
85.       return div;  
86.     },  
87.   
88.     _unsetMap: function() {  
89.       this.inherited(arguments);  
90.       connect.disconnect(this._zoomEnd);  
91.     },  
92.   
93.     // public ClusterLayer methods  
94.     add: function(p) {  
95.       // Summary:  The argument is a data point to be added to an existing cluster. If the data point falls within an existing cluster, it is added to that cluster and the cluster's label is updated. If the new point does not fall within an existing cluster, a new cluster is created.  
96.       //  
97.       // if passed a graphic, use the GraphicsLayer's add method  
98.       if ( p.declaredClass ) {  
99.         this.inherited(arguments);  
100.         return;  
101.       }  
102.   
103.       // add the new data to _clusterData so that it's included in clusters  
104.       // when the map level changes  
105.       this._clusterData.push(p);  
106.       var clustered = false;  
107.       // look for an existing cluster for the new point  
108.       for ( var i = 0; i < this._clusters.length; i++ ) {  
109.         var c = this._clusters[i];  
110.         if ( this._clusterTest(p, c) ) {  
111.           // add the point to an existing cluster  
112.           this._clusterAddPoint(p, c);  
113.           // update the cluster's geometry  
114.           this._updateClusterGeometry(c);  
115.           // update the label  
116.           this._updateLabel(c);  
117.           clustered = true;  
118.           break;  
119.         }  
120.       }  
121.   
122.       if ( ! clustered ) {  
123.         this._clusterCreate(p);  
124.         p.attributes.clusterCount = 1;  
125.         this._showCluster(p);  
126.       }  
127.     },  
128.   
129.     clear: function() {  
130.       // Summary:  Remove all clusters and data points.  
131.       this.inherited(arguments);  
132.       this._clusters.length = 0;  
133.     },  
134.   
135.     clearSingles: function(singles) {  
136.       // Summary:  Remove graphics that represent individual data points.  
137.       var s = singles || this._singles;  
138.       arrayUtils.forEach(s, function(g) {  
139.         this.remove(g);  
140.       }, this);  
141.       this._singles.length = 0;  
142.     },  
143.   
144.     onClick: function(e) {  
145.       // remove any previously showing single features  
146.       this.clearSingles(this._singles);  
147.   
148.       // find single graphics that make up the cluster that was clicked  
149.       // would be nice to use filter but performance tanks with large arrays in IE  
150.       var singles = [];  
151.       for ( var i = 0, il = this._clusterData.length; i < il; i++) {  
152.         if ( e.graphic.attributes.clusterId == this._clusterData[i].attributes.clusterId ) {  
153.           singles.push(this._clusterData[i]);  
154.         }  
155.       }  
156.       if ( singles.length > this._maxSingles ) {  
157.         alert("Sorry, that cluster contains more than " + this._maxSingles + " points. Zoom in for more detail.");  
158.         return;  
159.       } else {  
160.         // stop the click from bubbling to the map  
161.         e.stopPropagation();  
162.         this._map.infoWindow.show(e.graphic.geometry);  
163.         this._addSingles(singles);  
164.       }  
165.     },  
166.   
167.     // internal methods   
168.     _clusterGraphics: function() {  
169.       // first time through, loop through the points  
170.       for ( var j = 0, jl = this._clusterData.length; j < jl; j++ ) {  
171.         // see if the current feature should be added to a cluster  
172.         var point = this._clusterData[j];  
173.         var clustered = false;  
174.         var numClusters = this._clusters.length;  
175.         for ( var i = 0; i < this._clusters.length; i++ ) {  
176.           var c = this._clusters[i];  
177.           if ( this._clusterTest(point, c) ) {  
178.             this._clusterAddPoint(point, c);  
179.             clustered = true;  
180.             break;  
181.           }  
182.         }  
183.   
184.         if ( ! clustered ) {  
185.           this._clusterCreate(point);  
186.         }  
187.       }  
188.       this._showAllClusters();  
189.     },  
190.   
191.     _clusterTest: function(p, cluster) {  
192.       var distance = (  
193.         Math.sqrt(  
194.           Math.pow((cluster.x - p.x), 2) + Math.pow((cluster.y - p.y), 2)  
195.         ) / this._clusterResolution  
196.       );  
197.       return (distance <= this._clusterTolerance);  
198.     },  
199.   
200.     // points passed to clusterAddPoint should be included   
201.     // in an existing cluster  
202.     // also give the point an attribute called clusterId   
203.     // that corresponds to its cluster  
204.     _clusterAddPoint: function(p, cluster) {  
205.       // average in the new point to the cluster geometry  
206.       var count, x, y;  
207.       count = cluster.attributes.clusterCount;  
208.       x = (p.x + (cluster.x * count)) / (count + 1);  
209.       y = (p.y + (cluster.y * count)) / (count + 1);  
210.       cluster.x = x;  
211.       cluster.y = y;  
212.   
213.       // build an extent that includes all points in a cluster  
214.       // extents are for debug/testing only...not used by the layer  
215.       if ( p.x < cluster.attributes.extent[0] ) {  
216.         cluster.attributes.extent[0] = p.x;  
217.       } else if ( p.x > cluster.attributes.extent[2] ) {  
218.         cluster.attributes.extent[2] = p.x;  
219.       }  
220.       if ( p.y < cluster.attributes.extent[1] ) {  
221.         cluster.attributes.extent[1] = p.y;  
222.       } else if ( p.y > cluster.attributes.extent[3] ) {  
223.         cluster.attributes.extent[3] = p.y;  
224.       }  
225.   
226.       // increment the count  
227.       cluster.attributes.clusterCount++;  
228.       // attributes might not exist  
229.       if ( ! p.hasOwnProperty("attributes") ) {  
230.         p.attributes = {};  
231.       }  
232.       // give the graphic a cluster id  
233.       p.attributes.clusterId = cluster.attributes.clusterId;  
234.     },  
235.   
236.     // point passed to clusterCreate isn't within the   
237.     // clustering distance specified for the layer so  
238.     // create a new cluster for it  
239.     _clusterCreate: function(p) {  
240.       var clusterId = this._clusters.length + 1;  
241.       // console.log("cluster create, id is: ", clusterId);  
242.       // p.attributes might be undefined  
243.       if ( ! p.attributes ) {  
244.         p.attributes = {};  
245.       }  
246.       p.attributes.clusterId = clusterId;  
247.       // create the cluster  
248.       var cluster = {   
249.         "x": p.x,  
250.         "y": p.y,  
251.         "attributes" : {  
252.           "clusterCount": 1,  
253.           "clusterId": clusterId,  
254.           "extent": [ p.x, p.y, p.x, p.y ]  
255.         }  
256.       };  
257.       this._clusters.push(cluster);  
258.     },  
259.   
260.     _showAllClusters: function() {  
261.       for ( var i = 0, il = this._clusters.length; i < il; i++ ) {  
262.         var c = this._clusters[i];  
263.         this._showCluster(c);  
264.       }  
265.     },  
266.   
267.     _showCluster: function(c) {  
268.       var point = new Point(c.x, c.y, this._sr);  
269.       this.add(  
270.         new Graphic(  
271.           point,   
272.           null,   
273.           c.attributes  
274.         )  
275.       );  
276.       // code below is used to not label clusters with a single point  
277.       if ( c.attributes.clusterCount == 1 ) {  
278.         return;  
279.       }  
280.   
281.       // show number of points in the cluster  
282.       var font  = new esri.symbol.Font()  
283.           .setSize("10pt")  
284.           .setWeight(esri.symbol.Font.WEIGHT_BOLD);  
285.       var label = new TextSymbol(c.attributes.clusterCount)  
286.         .setColor(new Color(this._clusterLabelColor))  
287.         .setOffset(0, this._clusterLabelOffset)  
288.         .setFont(font);  
289.       this.add(  
290.         new Graphic(  
291.           point,  
292.           label,  
293.           c.attributes  
294.         )  
295.       );  
296.     },  
297.   
298.     _addSingles: function(singles) {  
299.       // add single graphics to the map  
300.       arrayUtils.forEach(singles, function(p) {  
301.         var g = new Graphic(  
302.           new Point(p.x, p.y, this._sr),  
303.           this._singleSym,  
304.           p.attributes,  
305.           this._singleTemplate  
306.         );  
307.         this._singles.push(g);  
308.         if ( this._showSingles ) {  
309.           this.add(g);  
310.         }  
311.       }, this);  
312.       this._map.infoWindow.setFeatures(this._singles);  
313.     },  
314.   
315.     _updateClusterGeometry: function(c) {  
316.       // find the cluster graphic  
317.       var cg = arrayUtils.filter(this.graphics, function(g) {  
318.         return ! g.symbol &&  
319.                g.attributes.clusterId == c.attributes.clusterId;  
320.       });  
321.       if ( cg.length == 1 ) {  
322.         cg[0].geometry.update(c.x, c.y);  
323.       } else {  
324.         console.log("didn't find exactly one cluster geometry to update: ", cg);  
325.       }  
326.     },  
327.   
328.     _updateLabel: function(c) {  
329.       // find the existing label  
330.       var label = arrayUtils.filter(this.graphics, function(g) {  
331.         return g.symbol &&   
332.                g.symbol.declaredClass == "esri.symbol.TextSymbol" &&  
333.                g.attributes.clusterId == c.attributes.clusterId;  
334.       });  
335.       if ( label.length == 1 ) {  
336.         // console.log("update label...found: ", label);  
337.         this.remove(label[0]);  
338.         var newLabel = new TextSymbol(c.attributes.clusterCount)  
339.           .setColor(new Color(this._clusterLabelColor))  
340.           .setOffset(0, this._clusterLabelOffset);  
341.         this.add(  
342.           new Graphic(  
343.             new Point(c.x, c.y, this._sr),  
344.             newLabel,  
345.             c.attributes  
346.           )  
347.         );  
348.         // console.log("updated the label");  
349.       } else {  
350.         console.log("didn't find exactly one label: ", label);  
351.       }  
352.     },  
353.   
354.     // debug only...never called by the layer  
355.     _clusterMeta: function() {  
356.       // print total number of features  
357.       console.log("Total:  ", this._clusterData.length);  
358.   
359.       // add up counts and print it  
360.       var count = 0;  
361.       arrayUtils.forEach(this._clusters, function(c) {  
362.         count += c.attributes.clusterCount;  
363.       });  
364.       console.log("In clusters:  ", count);  
365.     }  
366.   });  
367. });  

1. require([  
2.             "extras/ClusterLayer"  
3.         ], function(  
4.             ClusterLayer  
5.         ){  
6. });  

1. parser.parse();  
2.   
3.  map = new Map("map", {logo:false,slider: true});  
4.  var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/image/MapServer");  
5.  map.addLayer(tiled,0);  
6.  map.centerAndZoom(new Point(103.847, 36.0473, map.spatialReference),4);  
7.   
8.  map.on("load", function() {  
9.      addClusters(county.items);  
10.  });  
11.   
12.  function addClusters(items) {  
13.      console.log(items);  
14.      var countyInfo = {};  
15.      countyInfo.data = arrayUtils.map(items, function(item) {  
16.          var latlng = new  Point(parseFloat(item.x), parseFloat(item.y), map.spatialReference);  
17.          var webMercator = webMercatorUtils.geographicToWebMercator(latlng);  
18.          var attributes = {  
19.              "名称": item.name,  
20.              "经度": item.x,  
21.              "纬度": item.y  
22.          };  
23.          return {  
24.              "x": webMercator.x,  
25.              "y": webMercator.y,  
26.              "attributes": attributes  
27.          };  
28.      });  
29.      console.log(countyInfo.data);  
30.      // cluster layer that uses OpenLayers style clustering  
31.      clusterLayer = new ClusterLayer({  
32.          "data": countyInfo.data,  
33.          "distance": 150,  
34.          "id": "clusters",  
35.          "labelColor": "#fff",  
36.          "labelOffset": -4,  
37.          "resolution": map.extent.getWidth() / map.width,  
38.          "singleColor": "#f00",  
39.          "maxSingles":3000  
40.      });  
41.      var defaultSym = new SimpleMarkerSymbol().setSize(4);  
42.      var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");  
43.   
44.      /*var picBaseUrl = "images/"; 
45.      var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15); 
46.      var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15); 
47.      var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 80, 80).setOffset(0, 15);*/  
48.      var style1 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,  
49.              new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
50.                      new Color([255,200,0]), 1),  
51.              new Color([255,200,0,0.8]));  
52.      var style2 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 25,  
53.              new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
54.                      new Color([255,125,3]), 1),  
55.              new Color([255,125,3,0.8]));  
56.      var style3 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 30,  
57.              new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
58.                      new Color([255,23,58]), 1),  
59.              new Color([255,23,58,0.8]));  
60.      var style4 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 35,  
61.              new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
62.                      new Color([204,0,184]), 1),  
63.              new Color([204,0,184,0.8]));  
64.      var style5 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 40,  
65.              new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
66.                      new Color([0,0,255]), 1),  
67.              new Color([0,0,255,0.8]));  
68.      renderer.addBreak(0, 2, style1);  
69.      renderer.addBreak(2, 100, style2);  
70.      renderer.addBreak(100, 500, style3);  
71.      renderer.addBreak(500, 1000, style4);  
72.      renderer.addBreak(1000, 3001, style5);  
73.   
74.      clusterLayer.setRenderer(renderer);  
75.      map.addLayer(clusterLayer);  
76.      // close the info window when the map is clicked  
77.      map.on("click", cleanUp);  
78.      // close the info window when esc is pressed  
79.      map.on("key-down", function(e) {  
80.          if (e.keyCode === 27) {  
81.              cleanUp();  
82.          }  
83.      });  
84.  }  
85.  function cleanUp() {  
86.      map.infoWindow.hide();  
87.      clusterLayer.clearSingles();  
88.  }  

1. >  
2.   
3.   
4.     <meta< span=""> charset="utf-8">  
5.     <meta< span=""> name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  
6.       
7.     <link< span=""> rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css">  
8.     <link< span=""> rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">  
9.       
10.   
11.       
12.     <script< span=""> src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js">  
13.     <script< span=""> src="data/county.js">  
14.       
15.   
16.   
17.   
18.      id="map">

<!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="https://js.arcgis.com/3.15/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }

      /* center the image in the popup */
      .esriViewPopup .gallery { margin: 0 auto !important; }
    </style>

    <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>
    <script src="https://js.arcgis.com/3.15/"></script>
    <script>
      var map;
      require([
        "dojo/parser", 
        "dojo/ready",
        "dojo/_base/array",
        "esri/Color",
        "dojo/dom-style",
        "dojo/query",

        "esri/map", 
        "esri/request",
        "esri/graphic",
        "esri/geometry/Extent",

        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/PictureMarkerSymbol",
        "esri/renderers/ClassBreaksRenderer",

        "esri/layers/GraphicsLayer",
        "esri/SpatialReference",
        "esri/dijit/PopupTemplate",
        "esri/geometry/Point",
        "esri/geometry/webMercatorUtils",

        "extras/ClusterLayer",

        "dijit/layout/BorderContainer", 
        "dijit/layout/ContentPane", 
        "dojo/domReady!"
      ], function(
        parser, ready, arrayUtils, Color, domStyle, query,
        Map, esriRequest, Graphic, Extent,
        SimpleMarkerSymbol, SimpleFillSymbol, PictureMarkerSymbol, ClassBreaksRenderer,
        GraphicsLayer, SpatialReference, PopupTemplate, Point, webMercatorUtils,
        ClusterLayer
      ) {
        ready(function() {
          parser.parse();

          var clusterLayer;
          var popupOptions = {
            "markerSymbol": new SimpleMarkerSymbol("circle", 20, null, new Color([0, 0, 0, 0.25])),
            "marginLeft": "20",
            "marginTop": "20"
          };
          map = new Map("map", {
            basemap: "oceans",
            center: [-117.789, 33.543],
            zoom: 13
          });

          map.on("load", function() {
            // hide the popup's ZoomTo link as it doesn't make sense for cluster features
            domStyle.set(query("a.action.zoomTo")[0], "display", "none");

            // get the latest 1000 photos from instagram/laguna beach
            var photos = esriRequest({
              url: "data/1000-photos.json",
              handleAs: "json"
            });
            photos.then(addClusters, error);
          });

          function addClusters(resp) {
            var photoInfo = {};
            var wgs = new SpatialReference({
              "wkid": 4326
            });
            photoInfo.data = arrayUtils.map(resp, function(p) {
              var latlng = new  Point(parseFloat(p.lng), parseFloat(p.lat), wgs);
              var webMercator = webMercatorUtils.geographicToWebMercator(latlng);
              var attributes = {
                "Caption": p.caption,
                "Name": p.full_name,
                "Image": p.image,
                "Link": p.link
              };
              return {
                "x": webMercator.x,
                "y": webMercator.y,
                "attributes": attributes
              };
            });

            // popupTemplate to work with attributes specific to this dataset
            var popupTemplate = new PopupTemplate({
              "title": "",
              "fieldInfos": [{
                "fieldName": "Caption",
                visible: true
              }, {
                "fieldName": "Name",
                "label": "By",
                visible: true
              }, {
                "fieldName": "Link",
                "label": "On Instagram",
                visible: true
              }],
              "mediaInfos": [{
                "title": "",
                "caption": "",
                "type": "image",
                "value": {
                  "sourceURL": "{Image}",
                  "linkURL": "{Link}"
                }
              }]
            });

            // cluster layer that uses OpenLayers style clustering
            clusterLayer = new ClusterLayer({
              "data": photoInfo.data,
              "distance": 100,
              "id": "clusters",
              "labelColor": "#fff",
              "labelOffset": 10,
              "resolution": map.extent.getWidth() / map.width,
              "singleColor": "#888",
              "singleTemplate": popupTemplate
            });
            var defaultSym = new SimpleMarkerSymbol().setSize(4);
            var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");

            var picBaseUrl = "http://static.arcgis.com/images/Symbols/Shapes/";
            var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
            var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
            var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72).setOffset(0, 15);
            renderer.addBreak(0, 2, blue);
            renderer.addBreak(2, 200, green);
            renderer.addBreak(200, 1001, red);

            clusterLayer.setRenderer(renderer);
            map.addLayer(clusterLayer);

            // close the info window when the map is clicked
            map.on("click", cleanUp);
            // close the info window when esc is pressed
            map.on("key-down", function(e) {
              if (e.keyCode === 27) {
                cleanUp();
              }
            });
          }

          function cleanUp() {
            map.infoWindow.hide();
            clusterLayer.clearSingles();
          }

          function error(err) {
            console.log("something failed: ", err);
          }

          // show cluster extents...
          // never called directly but useful from the console 
          window.showExtents = function() {
            var extents = map.getLayer("clusterExtents");
            if ( extents ) {
              map.removeLayer(extents);
            }
            extents = new GraphicsLayer({ id: "clusterExtents" });
            var sym = new SimpleFillSymbol().setColor(new Color([205, 193, 197, 0.5]));

            arrayUtils.forEach(clusterLayer._clusters, function(c, idx) {
              var e = c.attributes.extent;
              extents.add(new Graphic(new Extent(e[0], e[1], e[2], e[3], map.spatialReference), sym));
            }, this);
            map.addLayer(extents, 0);
          };
        });
      });
    </script>
  </head>
  
  <body>
    <div data-dojo-type="dijit/layout/BorderContainer" 
         data-dojo-props="design:'headline',gutters:false" 
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map" 
           data-dojo-type="dijit/layout/ContentPane" 
           data-dojo-props="region:'center'"> 
      </div>
    </div>
  </body>
</html>

1. define([  
2.     "dojo/_base/declare",  
3.     "dojo/_base/array",  
4.     "esri/Color",  
5.     "dojo/_base/connect",  
6.   
7.     "esri/SpatialReference",  
8.     "esri/geometry/Point",  
9.     "esri/graphic",  
10.     "esri/symbols/SimpleMarkerSymbol",  
11.     "esri/symbols/TextSymbol",  
12.   
13.     "esri/dijit/PopupTemplate",  
14.     "esri/layers/GraphicsLayer"  
15. ], function (  
16.     declare, arrayUtils, Color, connect,  
17.     SpatialReference, Point, Graphic, SimpleMarkerSymbol, TextSymbol,  
18.     PopupTemplate, GraphicsLayer  
19.     ) {  
20.     return declare([GraphicsLayer], {  
21.         constructor: function(options) {  
22.             // 参数:  
23.             //   data:  Object[]  
24.             //     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.  
25.             //   field:  string?  
26.             //     The field of cluster.  
27.             //   showSingles:  Boolean?  
28.             //     Optional. Whether or graphics should be displayed when a cluster graphic is clicked. Default is true.  
29.             //   labelColor:  String?  
30.             //     Optional. Hex string or array of rgba values used as the color for cluster labels. Default value is #fff (white).  
31.             //   labelOffset:  String?  
32.             //     Optional. Number of pixels to shift a cluster label vertically. Defaults to -5 to align labels with circle symbols. Does not work in IE.  
33.             //   singleSymbol:  MarkerSymbol?  
34.             //     Marker Symbol (picture or simple). Optional. Symbol to use for graphics that represent single points. Default is a small gray SimpleMarkerSymbol.  
35.             //   spatialReference:  SpatialReference?  
36.             //     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.  
37.             //   singleTemplate:  PopupTemplate?  
38.             //     PopupTemplate. Optional. Popup template used to format attributes for graphics that represent single points. Default shows all attributes as "attribute = value" (not recommended).  
39.   
40.             //聚类的字段  
41.             this._clusterField = options.field || "";  
42.             //聚类数据  
43.             this._clusterData = options.data || [];  
44.             this._clusters = [];  
45.             //标注颜色，默认为白色  
46.             this._clusterLabelColor = options.labelColor || "#000";  
47.             //标注偏移，默认为-5  
48.             this._clusterLabelOffset = (options.hasOwnProperty("labelOffset")) ? options.labelOffset : -5;  
49.   
50.             this._showSingles = options.hasOwnProperty("showSingles") ? options.showSingles : true;  
51.             //单个对象  
52.             this._singles = []; //点击时出现  
53.             // 单个的样式  
54.             var SMS = SimpleMarkerSymbol;  
55.             this._singleSym = options.singleSymbol || new SMS("circle", 6, null, new Color(options.singleColor,0.6));  
56.             //空间参考  
57.             this._sr = options.spatialReference || new SpatialReference({ "wkid": 102100 });  
58.             //地图缩放  
59.             this._zoomEnd = null;  
60.   
61.             this._singleTemplate = options.singleTemplate || new PopupTemplate({ "title": "", "description": "{*}" });  
62.         },  
63.   
64.         // 重构esri/layers/GraphicsLayer方法  
65.         _setMap: function(map, surface) {  
66.             this._clusterGraphics();  
67.   
68.             /*// 地图缩放重新聚类 
69.             this._zoomEnd = connect.connect(map, "onZoomEnd", this, function() { 
70.                 this.clear(); 
71.                 this._clusterGraphics(); 
72.             });*/  
73.   
74.             // GraphicsLayer will add its own listener here  
75.             var div = this.inherited(arguments);  
76.             return div;  
77.         },  
78.   
79.         _unsetMap: function() {  
80.             this.inherited(arguments);  
81.             connect.disconnect(this._zoomEnd);  
82.         },  
83.   
84.         // public ClusterLayer methods  
85.         add: function(p) {  
86.             // Summary:  The argument is a data point to be added to an existing cluster. If the data point falls within an existing cluster, it is added to that cluster and the cluster's label is updated. If the new point does not fall within an existing cluster, a new cluster is created.  
87.             //  
88.             // if passed a graphic, use the GraphicsLayer's add method  
89.             if ( p.declaredClass ) {  
90.                 this.inherited(arguments);  
91.                 return;  
92.             }  
93.   
94.             // add the new data to _clusterData so that it's included in clusters  
95.             // when the map level changes  
96.             this._clusterData.push(this._clusters);  
97.             var clustered = false;  
98.             // look for an existing cluster for the new point  
99.             for ( var i = 0; i < this._clusters.length; i++ ) {  
100.                 var c = this._clusters[i];  
101.                 if ( this._clusterTest(p, c) ) {  
102.                     // add the point to an existing cluster  
103.                     this._clusterAddPoint(p, c);  
104.                     // update the cluster's geometry  
105.                     this._updateClusterGeometry(c);  
106.                     // update the label  
107.                     this._updateLabel(c);  
108.                     clustered = true;  
109.                     break;  
110.                 }  
111.             }  
112.   
113.             if ( ! clustered ) {  
114.                 this._clusterCreate(p);  
115.                 p.attributes.clusterCount = 1;  
116.                 this._showCluster(p);  
117.             }  
118.         },  
119.   
120.         clear: function() {  
121.             // Summary:  Remove all clusters and data points.  
122.             this.inherited(arguments);  
123.             this._clusters.length = 0;  
124.         },  
125.   
126.         clearSingles: function(singles) {  
127.             // Summary:  Remove graphics that represent individual data points.  
128.             var s = singles || this._singles;  
129.             arrayUtils.forEach(s, function(g) {  
130.                 this.remove(g);  
131.             }, this);  
132.             this._singles.length = 0;  
133.             map.graphics.clear();  
134.         },  
135.   
136.         onClick: function(e) {  
137.             // remove any previously showing single features  
138.             this.clearSingles(this._singles);  
139.   
140.             // find single graphics that make up the cluster that was clicked  
141.             // would be nice to use filter but performance tanks with large arrays in IE  
142.             var singles = [];  
143.             for ( var i = 0, il = this._clusterData.length; i < il; i++) {  
144.                 if ( e.graphic.attributes.clusterId == this._clusterData[i].attributes.clusterId ) {  
145.                     singles.push(this._clusterData[i]);  
146.                 }  
147.             }  
148.             if ( singles.length > this._maxSingles ) {  
149.                 alert("Sorry, that cluster contains more than " + this._maxSingles + " points. Zoom in for more detail.");  
150.                 return;  
151.             } else {  
152.                 // stop the click from bubbling to the map  
153.                 e.stopPropagation();  
154.                 this._map.infoWindow.show(e.graphic.geometry);  
155.                 this._addSingles(singles);  
156.             }  
157.         },  
158.   
159.         // 图形聚类  
160.         _clusterGraphics: function() {  
161.             // first time through, loop through the points  
162.             for ( var j = 0, jl = this._clusterData.length; j < jl; j++ ) {  
163.                 // see if the current feature should be added to a cluster  
164.                 var point = this._clusterData[j];  
165.   
166.                 var clustered = false;  
167.                 for ( var i = 0, numClusters = this._clusters.length; i < numClusters; i++ ) {  
168.                     var c = this._clusters[i];  
169.                     if ( this._clusterTest(point, c) ) {  
170.                         var pt = new esri.geometry.Point(point.x,point.y);  
171.                         this._clusterAddPoint(point, c);  
172.                         clustered = true;  
173.                         break;  
174.                     }  
175.                 }  
176.                 if ( ! clustered ) {  
177.                     this._clusterCreate(point);  
178.                 }  
179.             }  
180.             this._showAllClusters();  
181.         },  
182.   
183.         _clusterTest: function(p, cluster) {  
184.             if(p.attributes.proCode === cluster.field){  
185. //                console.log("true");  
186.                 return true;  
187.             }  
188.             else{  
189. //                console.log("false");  
190.                 return false;  
191.             }  
192.         },  
193.   
194.         // points passed to clusterAddPoint should be included  
195.         // in an existing cluster  
196.         // also give the point an attribute called clusterId  
197.         // that corresponds to its cluster  
198.         _clusterAddPoint: function(p, cluster) {  
199.             // average in the new point to the cluster geometry  
200.             var count, field;  
201.             count = cluster.attributes.clusterCount;  
202.             field = p.attributes.proCode;  
203.             cluster.field = field;  
204.             // increment the count  
205.             cluster.attributes.clusterCount++;  
206.             // attributes might not exist  
207.             if ( ! p.hasOwnProperty("attributes") ) {  
208.                 p.attributes = {};  
209.             }  
210.             // give the graphic a cluster id  
211.             p.attributes.clusterId = cluster.attributes.clusterId;  
212.         },  
213.   
214.         // point passed to clusterCreate isn't within the  
215.         // clustering distance specified for the layer so  
216.         // create a new cluster for it  
217.         _clusterCreate: function(p) {  
218.             var clusterId = this._clusters.length + 1;  
219.             // console.log("cluster create, id is: ", clusterId);  
220.             // p.attributes might be undefined  
221.             if ( ! p.attributes ) {  
222.                 p.attributes = {};  
223.             }  
224.             p.attributes.clusterId = clusterId;  
225.             // create the cluster  
226.             var cluster = {  
227.                 "x": p.x,  
228.                 "y": p.y,  
229.                 "field": p.attributes.proCode,  
230.                 "attributes" : {  
231.                     "clusterCount": 1,  
232.                     "clusterId": clusterId  
233.                 }  
234.             };  
235.             this._clusters.push(cluster);  
236.         },  
237.   
238.         _showAllClusters: function() {  
239.             for ( var i = 0, il = this._clusters.length; i < il; i++ ) {  
240.                 var c = this._clusters[i];  
241.                 this._showCluster(c);  
242.             }  
243.         },  
244.   
245.         _showCluster: function(c) {  
246.             var point = new Point(c.x, c.y, this._sr);  
247.             this.add(  
248.                 new Graphic(  
249.                     point,  
250.                     null,  
251.                     c.attributes  
252.                 )  
253.             );  
254.             // code below is used to not label clusters with a single point  
255.             if ( c.attributes.clusterCount == 1 ) {  
256.                 return;  
257.             }  
258.   
259.             // show number of points in the cluster  
260.             var font  = new esri.symbol.Font()  
261.                 .setSize("10pt")  
262.                 .setWeight(esri.symbol.Font.WEIGHT_BOLD);  
263.             var label = new TextSymbol(c.attributes.clusterCount)  
264.                 .setColor(new Color(this._clusterLabelColor))  
265.                 .setOffset(0, this._clusterLabelOffset)  
266.                 .setFont(font);  
267.             this.add(  
268.                 new Graphic(  
269.                     point,  
270.                     label,  
271.                     c.attributes  
272.                 )  
273.             );  
274.         },  
275.   
276.         _addSingles: function(singles) {  
277.             var mlPoint = new esri.geometry.Multipoint(this._sr);  
278.             // add single graphics to the map  
279.             arrayUtils.forEach(singles, function(p) {  
280.                 var pt = new Point(p.x, p.y, this._sr);  
281.                 mlPoint.addPoint(pt);  
282.                 var g = new Graphic(  
283.                     pt,  
284.                     this._singleSym,  
285.                     p.attributes,  
286.                     this._singleTemplate  
287.                 );  
288.                 this._singles.push(g);  
289.                 if ( this._showSingles ) {  
290.                     this.add(g);  
291.                 }  
292.             }, this);  
293.             map.setExtent(mlPoint.getExtent().expand(2.5));  
294.             var singleCenter = mlPoint.getExtent().getCenter();  
295.             var font  = new esri.symbol.Font();  
296.             font.setSize("15pt");  
297.             font.setFamily("微软雅黑");  
298.             font.setWeight("bold");  
299.             var text = new esri.symbol.TextSymbol(singles[0].attributes.proName);  
300.             text.setFont(font);  
301.             text.setColor(new Color([0,0,0]));  
302.             var labelGraphic = new esri.Graphic(singleCenter,text);  
303.             map.graphics.add(labelGraphic);  
304.             this._map.infoWindow.setFeatures(this._singles);  
305.         },  
306.   
307.         _updateClusterGeometry: function(c) {  
308.             // find the cluster graphic  
309.             var cg = arrayUtils.filter(this.graphics, function(g) {  
310.                 return ! g.symbol &&  
311.                     g.attributes.clusterId == c.attributes.clusterId;  
312.             });  
313.             if ( cg.length == 1 ) {  
314.                 cg[0].geometry.update(c.x, c.y);  
315.             } else {  
316.                 console.log("didn't find exactly one cluster geometry to update: ", cg);  
317.             }  
318.         },  
319.   
320.         _updateLabel: function(c) {  
321.             // find the existing label  
322.             var label = arrayUtils.filter(this.graphics, function(g) {  
323.                 return g.symbol &&  
324.                     g.symbol.declaredClass == "esri.symbol.TextSymbol" &&  
325.                     g.attributes.clusterId == c.attributes.clusterId;  
326.             });  
327.             if ( label.length == 1 ) {  
328.                 // console.log("update label...found: ", label);  
329.                 this.remove(label[0]);  
330.                 var newLabel = new TextSymbol(c.attributes.clusterCount)  
331.                     .setColor(new Color(this._clusterLabelColor))  
332.                     .setOffset(0, this._clusterLabelOffset);  
333.                 this.add(  
334.                     new Graphic(  
335.                         new Point(c.x, c.y, this._sr),  
336.                         newLabel,  
337.                         c.attributes  
338.                     )  
339.                 );  
340.                 // console.log("updated the label");  
341.             } else {  
342.                 console.log("didn't find exactly one label: ", label);  
343.             }  
344.         },  
345.   
346.         // debug only...never called by the layer  
347.         _clusterMeta: function() {  
348.             // print total number of features  
349.             console.log("Total:  ", this._clusterData.length);  
350.   
351.             // add up counts and print it  
352.             var count = 0;  
353.             arrayUtils.forEach(this._clusters, function(c) {  
354.                 count += c.attributes.clusterCount;  
355.             });  
356.             console.log("In clusters:  ", count);  
357.         }  
358.     });  
359. });  

1. var dojoConfig = {  
2.     paths: {  
3.         extras: location.pathname.replace(//[^/]+$/, "") + "/extras"  
4.     }  
5. };  

1. require([......  
2.     "extras/ZoneClusterLayer",  
3.     "dojo/domReady!"  
4. ], function(  
5.     ......,  
6.     ZoneClusterLayer  
7. ){  

1. function addClusters(items) {  
2.     var countyInfo = {};  
3.     countyInfo.data = arrayUtils.map(items, function(item) {  
4.         var latlng = new  Point(parseFloat(item.x), parseFloat(item.y), map.spatialReference);  
5.         var webMercator = webMercatorUtils.geographicToWebMercator(latlng);  
6.         var attributes = {  
7.             "proName": item.attributes.proname,  
8.             "proCode":item.procode,  
9.             "countyName": item.attributes.countyname,  
10.             "lng": item.x,  
11.             "lat": item.y  
12.         };  
13.         return {  
14.             "x": webMercator.x,  
15.             "y": webMercator.y,  
16.             "attributes": attributes  
17.         };  
18.     });  
19.     clusterLayer = new ZoneClusterLayer({  
20.         "data": countyInfo.data,  
21.         "id": "clusters",  
22.         "labelColor": "#fff",  
23.         "labelOffset": -4,  
24.         "singleColor": "#0ff",  
25.         "field":"proCode"  
26.     });  
27.     var defaultSym = new SimpleMarkerSymbol().setSize(4);  
28.     var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");  
29.   
30.     /*var picBaseUrl = "images/"; 
31.      var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15); 
32.      var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15); 
33.      var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 80, 80).setOffset(0, 15);*/  
34.     var style1 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,  
35.             new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
36.                     new Color([255,200,0]), 1),  
37.             new Color([255,200,0,0.8]));  
38.     var style2 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 20,  
39.             new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
40.                     new Color([255,125,3]), 1),  
41.             new Color([255,125,3,0.8]));  
42.     var style3 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 23,  
43.             new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
44.                     new Color([255,23,58]), 1),  
45.             new Color([255,23,58,0.8]));  
46.     var style4 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 28,  
47.             new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
48.                     new Color([204,0,184]), 1),  
49.             new Color([204,0,184,0.8]));  
50.     var style5 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 33,  
51.             new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
52.                     new Color([0,0,255]), 1),  
53.             new Color([0,0,255,0.8]));  
54.     renderer.addBreak(1, 10, style1);  
55.     renderer.addBreak(10, 50, style2);  
56.     renderer.addBreak(50, 100, style3);  
57.     renderer.addBreak(100, 150, style4);  
58.     renderer.addBreak(150, 200, style5);  
59.   
60.     clusterLayer.setRenderer(renderer);  
61.     map.addLayer(clusterLayer);  
62.     // close the info window when the map is clicked  
63.     map.on("click", cleanUp);  
64.     // close the info window when esc is pressed  
65.     map.on("key-down", function(e) {  
66.         if (e.keyCode === 27) {  
67.             cleanUp();  
68.         }  
69.     });  
70. }  
71. function cleanUp() {  
72.     map.infoWindow.hide();  
73.     clusterLayer.clearSingles();  
74. }  

1. >  
2.   
3.   
4.     <meta< span=""> charset="utf-8">  
5.     <meta< span=""> name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  
6.       
7.     <link< span=""> rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css">  
8.     <link< span=""> rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">  
9.       
10.   
11.       
12.     <script< span=""> src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js">  
13.     <script< span=""> src="data/county.js">  
14.       
15.   
16.   
17.   
18.      id="map">