Arcgis for JS之Cluster聚類分析的實現


在做項目的時候,碰見了這樣一個問題:給地圖上標注點對象,數據是從數據庫來 的,包含XY坐標信息的,通過graphic和graphiclayer 的方式添加到地圖上,其中有一個對象的數量很多,上萬了吧,通過上述的方式無法在地圖上進行展示,就想到了聚類,當時由於技術和時間的關系,沒有實現,最 近,稍微有點先下時間,就又想起這事,繼續研究,終於,皇天不負有心人,出來了,出來的第一時間寫出來,以便大家使用。


首先,看看實現后的效果:


初始化狀態

 

點擊對象顯示詳細對象和信息框


放大后的效果

效果就是上面所示的這個樣子的,下面說說實現的步驟與思路:

1、數據

正常數據的來源是源自數據庫的JSON數據,在本例子中,新建了一個變量用來模擬JSON數據,我所用的數據是全國的市縣級的點狀數據轉換來的,如下:


2、clusterLayer的封裝

根據需求,對GraphicsLayer進行了封裝為clusterLayer,來源為Arcgis for JS官方實例,對其中個別代碼做了修改,源代碼如下:

[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.       // 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</a>. 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的導入與引用


文件目錄

如上圖所示文件目錄,dojo導入的方式為:

  1. <script>  
  2.     // helpful for understanding dojoConfig.packages vs. dojoConfig.paths:  
  3.     // http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/  
  4.     var dojoConfig = {  
  5.         paths: {  
  6.             extras: location.pathname.replace(/\/[^/]+$/, "") + "/extras"  
  7.         }  
  8.     };  
  9. </script>  

在代碼中引用的代碼為:

[javascript] view plain copy print?在CODE上查看代碼片派生到我的代碼片
  1. require([  
  2.             "extras/ClusterLayer"  
  3.         ], function(  
  4.             ClusterLayer  
  5.         ){  
  6. });  

4、地圖、圖層的加載等

完成上述操作,就能去實現聚類了,代碼如下:

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

  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>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/Color",  
  32.             "esri/map",  
  33.             "esri/layers/ArcGISTiledMapServiceLayer",  
  34.             "esri/request",  
  35.             "esri/graphic",  
  36.             "esri/geometry/Extent",  
  37.   
  38.             "esri/symbols/SimpleMarkerSymbol",  
  39.             "esri/symbols/PictureMarkerSymbol",  
  40.             "esri/symbols/SimpleLineSymbol",  
  41.             "esri/symbols/SimpleFillSymbol",  
  42.             "esri/renderers/ClassBreaksRenderer",  
  43.   
  44.             "esri/layers/GraphicsLayer",  
  45.             "esri/SpatialReference",  
  46.             "esri/geometry/Point",  
  47.             "esri/geometry/webMercatorUtils",  
  48.             "extras/ClusterLayer",  
  49.             "dojo/domReady!"  
  50.         ], function(  
  51.             parser,  
  52.             arrayUtils,  
  53.             Color,  
  54.             Map,  
  55.             Tiled,  
  56.             esriRequest,  
  57.             Graphic,  
  58.             Extent,  
  59.             SimpleMarkerSymbol,  
  60.             PictureMarkerSymbol,  
  61.             SimpleLineSymbol,  
  62.             SimpleFillSymbol,  
  63.             ClassBreaksRenderer,  
  64.             GraphicsLayer,  
  65.             SpatialReference,  
  66.             Point,  
  67.             webMercatorUtils,  
  68.             ClusterLayer  
  69.         ){  
  70.             parser.parse();  
  71.   
  72.             map = new Map("map", {logo:false,slider: true});  
  73.             var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/image/MapServer");  
  74.             map.addLayer(tiled,0);  
  75.             map.centerAndZoom(new Point(103.847, 36.0473, map.spatialReference),4);  
  76.   
  77.             map.on("load", function() {  
  78.                 addClusters(county.items);  
  79.             });  
  80.   
  81.             function addClusters(items) {  
  82.                 console.log(items);  
  83.                 var countyInfo = {};  
  84.                 countyInfo.data = arrayUtils.map(items, function(item) {  
  85.                     var latlng = new  Point(parseFloat(item.x), parseFloat(item.y), map.spatialReference);  
  86.                     var webMercator = webMercatorUtils.geographicToWebMercator(latlng);  
  87.                     var attributes = {  
  88.                         "名稱": item.name,  
  89.                         "經度": item.x,  
  90.                         "緯度": item.y  
  91.                     };  
  92.                     return {  
  93.                         "x": webMercator.x,  
  94.                         "y": webMercator.y,  
  95.                         "attributes": attributes  
  96.                     };  
  97.                 });  
  98.                 console.log(countyInfo.data);  
  99.                 // cluster layer that uses OpenLayers style clustering  
  100.                 clusterLayer = new ClusterLayer({  
  101.                     "data": countyInfo.data,  
  102.                     "distance": 150,  
  103.                     "id": "clusters",  
  104.                     "labelColor": "#fff",  
  105.                     "labelOffset": -4,  
  106.                     "resolution": map.extent.getWidth() / map.width,  
  107.                     "singleColor": "#f00",  
  108.                     "maxSingles":3000  
  109.                 });  
  110.                 var defaultSym = new SimpleMarkerSymbol().setSize(4);  
  111.                 var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");  
  112.   
  113.                 /*var picBaseUrl = "images/";  
  114.                 var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);  
  115.                 var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);  
  116.                 var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 80, 80).setOffset(0, 15);*/  
  117.                 var style1 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,  
  118.                         new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  119.                                 new Color([255,200,0]), 1),  
  120.                         new Color([255,200,0,0.8]));  
  121.                 var style2 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 25,  
  122.                         new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  123.                                 new Color([255,125,3]), 1),  
  124.                         new Color([255,125,3,0.8]));  
  125.                 var style3 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 30,  
  126.                         new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  127.                                 new Color([255,23,58]), 1),  
  128.                         new Color([255,23,58,0.8]));  
  129.                 var style4 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 35,  
  130.                         new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  131.                                 new Color([204,0,184]), 1),  
  132.                         new Color([204,0,184,0.8]));  
  133.                 var style5 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 40,  
  134.                         new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  135.                                 new Color([0,0,255]), 1),  
  136.                         new Color([0,0,255,0.8]));  
  137.                 renderer.addBreak(0, 2, style1);  
  138.                 renderer.addBreak(2, 100, style2);  
  139.                 renderer.addBreak(100, 500, style3);  
  140.                 renderer.addBreak(500, 1000, style4);  
  141.                 renderer.addBreak(1000, 3001, style5);  
  142.   
  143.                 clusterLayer.setRenderer(renderer);  
  144.                 map.addLayer(clusterLayer);  
  145.                 // close the info window when the map is clicked  
  146.                 map.on("click", cleanUp);  
  147.                 // close the info window when esc is pressed  
  148.                 map.on("key-down", function(e) {  
  149.                     if (e.keyCode === 27) {  
  150.                         cleanUp();  
  151.                     }  
  152.                 });  
  153.             }  
  154.             function cleanUp() {  
  155.                 map.infoWindow.hide();  
  156.                 clusterLayer.clearSingles();  
  157.             }  
  158.         });  
  159.     </script>  
  160. </head>  
  161.   
  162. <body>  
  163.     <div id="map"></div>  
  164. </div>  
  165. </body>  
  166. </html>  



免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM