• (转)Arcgis for JS之Cluster聚类分析的实现


    http://blog.csdn.net/gisshixisheng/article/details/40711075

    在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来的,包含XY坐标信息的,通过graphic和graphiclayer 的方式添加到地图上,其中有一个对象的数量很多,上万了吧,通过上述的方式无法在地图上进行展示,就想到了聚类,当时由于技术和时间的关系,没有实现,最近,稍微有点先下时间,就又想起这事,继续研究,终于,皇天不负有心人,出来了,出来的第一时间写出来,以便大家使用。

    首先,看看实现后的效果:

    初始化状态

     

    点击对象显示详细对象和信息框

    放大后的效果

    效果就是上面所示的这个样子的,下面说说实现的步骤与思路:

    1、数据

    正常数据的来源是源自数据库的JSON数据,在本例子中,新建了一个变量用来模拟JSON数据,我所用的数据是全国的市县级的点状数据转换来的,如下:

    2、clusterLayer的封装

    根据需求,对GraphicsLayer进行了封装为clusterLayer,来源为Arcgis for JS官方实例,对其中个别代码做了修改,源代码如下:

    [javascript] view plain copy
     
     print?
    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导入的方式为:

    [html] view plain copy
     
     print?
    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?
    1. require([  
    2.             "extras/ClusterLayer"  
    3.         ], function(  
    4.             ClusterLayer  
    5.         ){  
    6. });  

    4、地图、图层的加载等

    完成上述操作,就能去实现聚类了,代码如下:

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

    :在创建ClusterLayer对象时有以下几个参数,

    1、distance

    distance控制的是两个点之间的距离,distance值越小,点密度越大,反之亦然;

    2、labelColor

    labelColor为个数显示的颜色;

    3、labelOffset

    labelOffset默认值为0,+为向上,-为向下;

    4、singleColor

    singleColor为单个对象出现时显示的颜色;

    5、maxSingles

    maxSingles是最多可显示多少个点。

    6、resolution

    resolution是一个变化的值,当前的地图范围/地图的范围即为resolution;

    7、对ClusterLayer进行ClassBreaksRenderer

    此处ClassBreaksRenderer的短点的值可按照数据的多少来确定。

    cluster.html的源码如下:

    [html] view plain copy
     
     print?
    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%;  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>  

    欢迎关注LZUGIS CSDN之Arcgis for JS系列文章,有疑问请联系

  • 相关阅读:
    sqlite数据库的char,varchar,text,nchar,nvarchar,ntext的区别(转)
    DELPHI XE5-8 弹出列表框供选择
    delphi弹出选择对话框选择目录|SelectDirectory 函数(转)
    php 与java安卓客户端的查询交互
    sql查询语句的拼接小技巧(高手勿喷)
    高德地图应用——与云图后台交互
    Inno Setup 通用脚本及简要说明( 一般情况够用了)
    不用SQL给打印记录编号
    DELPHI XE5/6/7 android 无线真机调试
    超级简单的例子说明JAVA PACKET CLASS 和变量之间的关系
  • 原文地址:https://www.cnblogs.com/telwanggs/p/6972435.html
Copyright © 2020-2023  润新知