开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 原文:Arcgis for JS之Cluster聚类分析的实现(基于区域范围的) 咱们书接上文,在上文,实现了基于距离的空间聚类的算法实现,在本文,将继续介绍空间聚类之基于区域范围的实现方式,好了,闲言少叙,先看看具体的效果: 聚类效果 点击显示信息 显示单个聚类点 下面说说具体的实现思路。
+关注继续查看
原文:Arcgis for JS之Cluster聚类分析的实现(基于区域范围的)

咱们书接上文,在上文,实现了基于距离的空间聚类的算法实现,在本文,将继续介绍空间聚类之基于区域范围的实现方式,好了,闲言少叙,先看看具体的效果:


聚类效果


点击显示信息


显示单个聚类点

下面说说具体的实现思路。

1、数据组织

在进行数据组织的时候,因为是要按照区域范围的,所以必须得包含区域范围的信息,在本示例中,我用的数据依然是全国2000多个区县点的数据,并添加了省市代码,数据如下:


2、聚类思路

根据数据中“procode”去判断类别,是同一类别就将该类别添加到该类别的数据中,并将计数增加1,思路很简单,对graphiclayer进行了扩展,源代码如下:

[javascript] view plain copy print?在CODE上查看代码片派生到我的代码片
  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</a>. 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?在CODE上查看代码片派生到我的代码片
  1. var dojoConfig = {  
  2.     paths: {  
  3.         extras: location.pathname.replace(/\/[^/]+$/, "") + "/extras"  
  4.     }  
  5. };  

 

[javascript] view plain copy print?在CODE上查看代码片派生到我的代码片
  1. require([......  
  2.     "extras/ZoneClusterLayer",  
  3.     "dojo/domReady!"  
  4. ], function(  
  5.     ......,  
  6.     ZoneClusterLayer  
  7. ){  

新建clusterlayer对象,并将之添加到map:

[javascript] view plain copy print?在CODE上查看代码片派生到我的代码片
  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的全代码如下:

  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  
  6.     <title>Zone Cluster</title>  
  7.     <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css">  
  8.     <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">  
  9.     <style>  
  10.         html, body, #map{ height: 100%; width: 100%; margin: 0; padding: 0; }  
  11.         #map{ margin: 0; padding: 0; }  
  12.     </style>  
  13.   
  14.     <script>  
  15.         // helpful for understanding dojoConfig.packages vs. dojoConfig.paths:  
  16.         // http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/  
  17.         var dojoConfig = {  
  18.             paths: {  
  19.                 extras: location.pathname.replace(/\/[^/]+$/, "") + "/extras"  
  20.             }  
  21.         };  
  22.     </script>  
  23.     <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>  
  24.     <script src="data/county.js"></script>  
  25.     <script>  
  26.         var map;  
  27.         var clusterLayer;  
  28.         require([  
  29.             "dojo/parser",  
  30.             "dojo/_base/array",  
  31.             "esri/map",  
  32.             "esri/layers/ArcGISTiledMapServiceLayer",  
  33.             "esri/layers/FeatureLayer",  
  34.             "esri/graphic",  
  35.             "esri/Color",  
  36.             "esri/symbols/SimpleMarkerSymbol",  
  37.             "esri/symbols/SimpleLineSymbol",  
  38.             "esri/symbols/SimpleFillSymbol",  
  39.             "esri/renderers/SimpleRenderer",  
  40.             "esri/renderers/ClassBreaksRenderer",  
  41.             "esri/SpatialReference",  
  42.             "esri/geometry/Point",  
  43.             "esri/geometry/webMercatorUtils",  
  44.             "extras/ZoneClusterLayer",  
  45.             "dojo/domReady!"  
  46.         ], function(  
  47.             parser,  
  48.             arrayUtils,  
  49.             Map,  
  50.             Tiled,  
  51.             FeatureLayer,  
  52.             Graphic,  
  53.             Color,  
  54.             SimpleMarkerSymbol,  
  55.             SimpleLineSymbol,  
  56.             SimpleFillSymbol,  
  57.             SimpleRenderer,  
  58.             ClassBreaksRenderer,  
  59.             SpatialReference,  
  60.             Point,  
  61.             webMercatorUtils,  
  62.             ZoneClusterLayer  
  63.         ){  
  64.             map = new Map("map", {logo:false,slider: true});  
  65.             var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/image/MapServer");  
  66.             map.addLayer(tiled);  
  67.             tiled.hide();  
  68.             var fch = new FeatureLayer("http://localhost:6080/arcgis/rest/services/china/MapServer/0");  
  69.             var symbol = new SimpleFillSymbol(  
  70.                     SimpleFillSymbol.STYLE_SOLID,  
  71.                     new SimpleLineSymbol(  
  72.                             SimpleLineSymbol.STYLE_SOLID,  
  73.                             new esri.Color([180,180,180,1]), //设置RGB色,0.75设置透明度  
  74.                             2  
  75.                     ),  
  76.                     new esri.Color([150,150,150,0.2])  
  77.             );  
  78.             //简单渲染  
  79.             var simpleRender=new SimpleRenderer(symbol);  
  80.             fch.setRenderer(simpleRender);  
  81.             map.addLayer(fch);  
  82.             map.centerAndZoom(new Point(103.847, 36.0473, map.spatialReference),4);  
  83.   
  84.             map.on("load", function() {  
  85.                 addClusters(county.items);  
  86.             });  
  87.   
  88.             function addClusters(items) {  
  89.                 var countyInfo = {};  
  90.                 countyInfo.data = arrayUtils.map(items, function(item) {  
  91.                     var latlng = new  Point(parseFloat(item.x), parseFloat(item.y), map.spatialReference);  
  92.                     var webMercator = webMercatorUtils.geographicToWebMercator(latlng);  
  93.                     var attributes = {  
  94.                         "proName": item.attributes.proname,  
  95.                         "proCode":item.procode,  
  96.                         "countyName": item.attributes.countyname,  
  97.                         "lng": item.x,  
  98.                         "lat": item.y  
  99.                     };  
  100.                     return {  
  101.                         "x": webMercator.x,  
  102.                         "y": webMercator.y,  
  103.                         "attributes": attributes  
  104.                     };  
  105.                 });  
  106.                 clusterLayer = new ZoneClusterLayer({  
  107.                     "data": countyInfo.data,  
  108.                     "id": "clusters",  
  109.                     "labelColor": "#fff",  
  110.                     "labelOffset": -4,  
  111.                     "singleColor": "#0ff",  
  112.                     "field":"proCode"  
  113.                 });  
  114.                 var defaultSym = new SimpleMarkerSymbol().setSize(4);  
  115.                 var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");  
  116.   
  117.                 /*var picBaseUrl = "images/";  
  118.                  var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);  
  119.                  var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);  
  120.                  var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 80, 80).setOffset(0, 15);*/  
  121.                 var style1 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,  
  122.                         new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  123.                                 new Color([255,200,0]), 1),  
  124.                         new Color([255,200,0,0.8]));  
  125.                 var style2 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 20,  
  126.                         new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  127.                                 new Color([255,125,3]), 1),  
  128.                         new Color([255,125,3,0.8]));  
  129.                 var style3 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 23,  
  130.                         new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  131.                                 new Color([255,23,58]), 1),  
  132.                         new Color([255,23,58,0.8]));  
  133.                 var style4 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 28,  
  134.                         new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  135.                                 new Color([204,0,184]), 1),  
  136.                         new Color([204,0,184,0.8]));  
  137.                 var style5 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 33,  
  138.                         new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  139.                                 new Color([0,0,255]), 1),  
  140.                         new Color([0,0,255,0.8]));  
  141.                 renderer.addBreak(1, 10, style1);  
  142.                 renderer.addBreak(10, 50, style2);  
  143.                 renderer.addBreak(50, 100, style3);  
  144.                 renderer.addBreak(100, 150, style4);  
  145.                 renderer.addBreak(150, 200, style5);  
  146.   
  147.                 clusterLayer.setRenderer(renderer);  
  148.                 map.addLayer(clusterLayer);  
  149.                 // close the info window when the map is clicked  
  150.                 map.on("click", cleanUp);  
  151.                 // close the info window when esc is pressed  
  152.                 map.on("key-down", function(e) {  
  153.                     if (e.keyCode === 27) {  
  154.                         cleanUp();  
  155.                     }  
  156.                 });  
  157.             }  
  158.             function cleanUp() {  
  159.                 map.infoWindow.hide();  
  160.                 clusterLayer.clearSingles();  
  161.             }  
  162.         });  
  163.     </script>  
  164. </head>  
  165.   
  166. <body>  
  167.     <div id="map"></div>  
  168. </div>  
  169. </body>  
  170. </html>  
 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
html+css+JavaScript实现简洁的圆形时钟数字时钟+指针时钟
使用前端三件套实现一个实时跟新的时钟,其中包括电子时钟和刻度时钟
0 0
JavaScript、jQuery实现“社区便利店收银系统”
随着个性化服务发展,学校、街边、社区等都流行将水果等商品洗净、切好,并装盒,按份出售。现开发一个“社区便利店收银系统”,店中每天提供固定种类的水果,装盒后,标记每一份价格,按份进行销售。在系统中,打开收银网页(casher.html),点击“+”添加销售水果,点击“结账”进行购买水果结算,点击“完成交易”进行下一个新用户购买。
0 0
JavaScript中实现replaceAll方法
我们在Java中可以使用replaceAll()方法对字符串进行批量替换,但在JS中replaceAll()方法是undefined,JS中只存在replace()方法,因此我们可以自己封装JS中replaceAll()方法供我们便捷使用。
0 0
JavaScript中实现摸球概率统计事件
在三个不透明的盒子中分别每个盒子装了两个球,第一个盒子装2个红球,第二个盒子装1个红球和1个蓝球,第三个盒子装2个蓝球,问:随机从三个盒子中取出一个球,问这个球是红球的概率?
0 0
【Web前端】【JavaScript】实现表格隔行变色
【Web前端】【JavaScript】实现表格隔行变色
0 0
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)...
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)...
0 0
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)...
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)...
0 0
HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果
0 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
编程语言如何演化—— 以 JS 的 private 为例
立即下载
JS 语言在引擎级别的执行过程
立即下载
Python第五讲——关于爬虫如何做js逆向的思路
立即下载