碼上歡樂
相關內容    簡體    繁體

Arcgis for JS之Cluster聚類分析的實現(基於區域范圍的)

本文轉載自   查看原文   2016-07-18 15:25   1589    ArcGIS

咱們書接上文，在上文，實現了基於距離的空間聚類的算法實現，在本文，將繼續介紹空間聚類之基於區域范圍的實現方式，好了，閑言少敘，先看看具體的效果：


聚類效果


點擊顯示信息


顯示單個聚類點

下面說說具體的實現思路。

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的全代碼如下：

[html] view plain copy print?在CODE上查看代碼片派生到我的代碼片
  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>  
 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Arcgis for JS之Cluster聚類分析的實現 python數據分析：聚類分析（cluster analysis） [SAS] 聚類分析CLUSTER程序代碼和輸出結果 ArcGIS溫泉數據聚類分析、核密度分析 聚類分析經典算法講解及實現 聚類分析算法及SAS實現 SPSS聚類分析 聚類分析詳解 聚類分析案例 Mahout聚類分析
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM