• 欢迎光临~

Arcgis js api 聚合图层

开发技术 开发技术 2022-08-03 次浏览
Arcgis for JS之Cluster聚类分析的实现
分类: 开发 3S技术 GIS二次开发 2014-11-02 16:58  734人阅读  评论(1)  收藏  举报
Cluster 聚类分析
在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来的,包含XY坐标信息的,通过graphic和graphiclayer 的方式添加到地图上,其中有一个对象的数量很多,上万了吧,通过上述的方式无法在地图上进行展示,就想到了聚类,当时由于技术和时间的关系,没有实现,最近,稍微有点先下时间,就又想起这事,继续研究,终于,皇天不负有心人,出来了,出来的第一时间写出来,以便大家使用。
 
首先,看看实现后的效果:
Arcgis js api 聚合图层
初始化状态
Arcgis js api 聚合图层
 
Arcgis js api 聚合图层
点击对象显示详细对象和信息框
Arcgis js api 聚合图层
放大后的效果
效果就是上面所示的这个样子的,下面说说实现的步骤与思路:
1、数据
正常数据的来源是源自数据库的JSON数据,在本例子中,新建了一个变量用来模拟JSON数据,我所用的数据是全国的市县级的点状数据转换来的,如下:
Arcgis js api 聚合图层
2、clusterLayer的封装
根据需求,对GraphicsLayer进行了封装为clusterLayer,来源为Arcgis for JS官方实例,对其中个别代码做了修改,源代码如下:
 
[javascript]  view plain copy print ?
Arcgis js api 聚合图层
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. });  
3、ClusterLayer的导入与引用
 
Arcgis js api 聚合图层
文件目录
如上图所示文件目录,dojo导入的方式为:
 
[html]  view plain copy print ?
Arcgis js api 聚合图层
Arcgis js api 聚合图层
  1.   
在代码中引用的代码为:
 
 
[javascript]  view plain copy print ?
Arcgis js api 聚合图层
Arcgis js api 聚合图层
  1. require([  
  2.             "extras/ClusterLayer"  
  3.         ], function(  
  4.             ClusterLayer  
  5.         ){  
  6. });  
4、地图、图层的加载等
 
完成上述操作,就能去实现聚类了,代码如下:
 
[javascript]  view plain copy print ?
Arcgis js api 聚合图层
Arcgis js api 聚合图层
  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.  }  
注:在创建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的源码如下:
 
[html]  view plain copy print ?
Arcgis js api 聚合图层
Arcgis js api 聚合图层
  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>

Arcgis for JS之Cluster聚类分析的实现(基于区域范围的)

 

Arcgis for JS之Cluster聚类分析的实现(基于区域范围的)
分类: 开发 3S技术 GIS二次开发 2014-11-05 10:31  756人阅读  评论(0)  收藏  举报
Cluster arcgis
咱们书接上文,在上文,实现了基于距离的空间聚类的算法实现,在本文,将继续介绍空间聚类之基于区域范围的实现方式,好了,闲言少叙,先看看具体的效果:
Arcgis js api 聚合图层
聚类效果
Arcgis js api 聚合图层
点击显示信息
Arcgis js api 聚合图层
显示单个聚类点
下面说说具体的实现思路。
1、数据组织
在进行数据组织的时候,因为是要按照区域范围的,所以必须得包含区域范围的信息,在本示例中,我用的数据依然是全国2000多个区县点的数据,并添加了省市代码,数据如下:
Arcgis js api 聚合图层
2、聚类思路
根据数据中“procode”去判断类别,是同一类别就将该类别添加到该类别的数据中,并将计数增加1,思路很简单,对graphiclayer进行了扩展,源代码如下:
 
[javascript]  view plain copy print ?
Arcgis js api 聚合图层
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.             // 参数:  
  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. });  
接着将之导入,并调用:
 
 
[javascript]  view plain copy print ?
Arcgis js api 聚合图层
Arcgis js api 聚合图层
  1. var dojoConfig = {  
  2.     paths: {  
  3.         extras: location.pathname.replace(//[^/]+$/, "") + "/extras"  
  4.     }  
  5. };  
 
[javascript]  view plain copy print ?
Arcgis js api 聚合图层
Arcgis js api 聚合图层
  1. require([......  
  2.     "extras/ZoneClusterLayer",  
  3.     "dojo/domReady!"  
  4. ], function(  
  5.     ......,  
  6.     ZoneClusterLayer  
  7. ){  
新建clusterlayer对象,并将之添加到map:
 
 
[javascript]  view plain copy print ?
Arcgis js api 聚合图层
Arcgis js api 聚合图层
  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. }  
 
调用的html的全代码如下:
 
 
[html]  view plain copy print ?
Arcgis js api 聚合图层
Arcgis js api 聚合图层
  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">

  

  •   
  •   
  •   
 
Arcgis for JS之Cluster聚类分析的实现
分类: 开发 3S技术 GIS二次开发 2014-11-02 16:58  725人阅读  评论(1)  收藏  举报
Cluster 聚类分析
在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来的,包含XY坐标信息的,通过graphic和graphiclayer 的方式添加到地图上,其中有一个对象的数量很多,上万了吧,通过上述的方式无法在地图上进行展示,就想到了聚类,当时由于技术和时间的关系,没有实现,最近,稍微有点先下时间,就又想起这事,继续研究,终于,皇天不负有心人,出来了,出来的第一时间写出来,以便大家使用。
 
首先,看看实现后的效果:
Arcgis js api 聚合图层
初始化状态
Arcgis js api 聚合图层
 
Arcgis js api 聚合图层
点击对象显示详细对象和信息框
Arcgis js api 聚合图层
放大后的效果
效果就是上面所示的这个样子的,下面说说实现的步骤与思路:
1、数据
正常数据的来源是源自数据库的JSON数据,在本例子中,新建了一个变量用来模拟JSON数据,我所用的数据是全国的市县级的点状数据转换来的,如下:
Arcgis js api 聚合图层
2、clusterLayer的封装
根据需求,对GraphicsLayer进行了封装为clusterLayer,来源为Arcgis for JS官方实例,对其中个别代码做了修改,源代码如下:
 
[javascript]  view plain copy print ?
Arcgis js api 聚合图层
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. });  
3、ClusterLayer的导入与引用
 
Arcgis js api 聚合图层
文件目录
如上图所示文件目录,dojo导入的方式为:
 
[html]  view plain copy print ?
Arcgis js api 聚合图层
Arcgis js api 聚合图层
  1.   
在代码中引用的代码为:
 
 
[javascript]  view plain copy print ?
Arcgis js api 聚合图层
Arcgis js api 聚合图层
  1. require([  
  2.             "extras/ClusterLayer"  
  3.         ], function(  
  4.             ClusterLayer  
  5.         ){  
  6. });  
4、地图、图层的加载等
 
完成上述操作,就能去实现聚类了,代码如下:
 
[javascript]  view plain copy print ?
Arcgis js api 聚合图层
Arcgis js api 聚合图层
  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.  }  
注:在创建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的源码如下:
 
[html]  view plain copy print ?
Arcgis js api 聚合图层
Arcgis js api 聚合图层
  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">
  
  •   
  •   
  •   
 
 
 
程序员灯塔
转载请注明原文链接:Arcgis js api 聚合图层
喜欢 (0)