原文:Arcgis for JS之Cluster聚类分析的实现

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

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

初始化状态

 

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

放大后的效果

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

1、数据

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

2、clusterLayer的封装

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

  1. define([
  2. "dojo/_base/declare",
  3. "dojo/_base/array",
  4. "esri/Color",
  5. "dojo/_base/connect",
  6. "esri/SpatialReference",
  7. "esri/geometry/Point",
  8. "esri/graphic",
  9. "esri/symbols/SimpleMarkerSymbol",
  10. "esri/symbols/TextSymbol",
  11. "esri/dijit/PopupTemplate",
  12. "esri/layers/GraphicsLayer"
  13. ], function (
  14. declare, arrayUtils, Color, connect,
  15. SpatialReference, Point, Graphic, SimpleMarkerSymbol, TextSymbol,
  16. PopupTemplate, GraphicsLayer
  17. ) {
  18. return declare([GraphicsLayer], {
  19. constructor: function(options) {
  20. // options:
  21. //   data:  Object[]
  22. //     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.
  23. //   distance:  Number?
  24. //     Optional. The max number of pixels between points to group points in the same cluster. Default value is 50.
  25. //   labelColor:  String?
  26. //     Optional. Hex string or array of rgba values used as the color for cluster labels. Default value is #fff (white).
  27. //   labelOffset:  String?
  28. //     Optional. Number of pixels to shift a cluster label vertically. Defaults to -5 to align labels with circle symbols. Does not work in IE.
  29. //   resolution:  Number
  30. //     Required. Width of a pixel in map coordinates. Example of how to calculate:
  31. //     map.extent.getWidth() / map.width
  32. //   showSingles:  Boolean?
  33. //     Optional. Whether or graphics should be displayed when a cluster graphic is clicked. Default is true.
  34. //   singleSymbol:  MarkerSymbol?
  35. //     Marker Symbol (picture or simple). Optional. Symbol to use for graphics that represent single points. Default is a small gray SimpleMarkerSymbol.
  36. //   singleTemplate:  PopupTemplate?
  37. //     PopupTemplate</a>. Optional. Popup template used to format attributes for graphics that represent single points. Default shows all attributes as "attribute = value" (not recommended).
  38. //   maxSingles:  Number?
  39. //     Optional. Threshold for whether or not to show graphics for points in a cluster. Default is 1000.
  40. //   webmap:  Boolean?
  41. //     Optional. Whether or not the map is from an ArcGIS.com webmap. Default is false.
  42. //   spatialReference:  SpatialReference?
  43. //     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.
  44. this._clusterTolerance = options.distance || 50;
  45. this._clusterData = options.data || [];
  46. this._clusters = [];
  47. this._clusterLabelColor = options.labelColor || "#000";
  48. // labelOffset can be zero so handle it differently
  49. this._clusterLabelOffset = (options.hasOwnProperty("labelOffset")) ? options.labelOffset : -5;
  50. // graphics that represent a single point
  51. this._singles = []; // populated when a graphic is clicked
  52. this._showSingles = options.hasOwnProperty("showSingles") ? options.showSingles : true;
  53. // symbol for single graphics
  54. var SMS = SimpleMarkerSymbol;
  55. this._singleSym = options.singleSymbol || new SMS("circle", 6, null, new Color(options.singleColor));
  56. this._singleTemplate = options.singleTemplate || new PopupTemplate({ "title": "", "description": "{*}" });
  57. this._maxSingles = options.maxSingles || 1000;
  58. this._webmap = options.hasOwnProperty("webmap") ? options.webmap : false;
  59. this._sr = options.spatialReference || new SpatialReference({ "wkid": 102100 });
  60. this._zoomEnd = null;
  61. },
  62. // override esri/layers/GraphicsLayer methods
  63. _setMap: function(map, surface) {
  64. // calculate and set the initial resolution
  65. this._clusterResolution = map.extent.getWidth() / map.width; // probably a bad default...
  66. this._clusterGraphics();
  67. // connect to onZoomEnd so data is re-clustered when zoom level changes
  68. this._zoomEnd = connect.connect(map, "onZoomEnd", this, function() {
  69. // update resolution
  70. this._clusterResolution = this._map.extent.getWidth() / this._map.width;
  71. this.clear();
  72. this._clusterGraphics();
  73. });
  74. // GraphicsLayer will add its own listener here
  75. var div = this.inherited(arguments);
  76. return div;
  77. },
  78. _unsetMap: function() {
  79. this.inherited(arguments);
  80. connect.disconnect(this._zoomEnd);
  81. },
  82. // public ClusterLayer methods
  83. add: function(p) {
  84. // 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.
  85. //
  86. // if passed a graphic, use the GraphicsLayer's add method
  87. if ( p.declaredClass ) {
  88. this.inherited(arguments);
  89. return;
  90. }
  91. // add the new data to _clusterData so that it's included in clusters
  92. // when the map level changes
  93. this._clusterData.push(p);
  94. var clustered = false;
  95. // look for an existing cluster for the new point
  96. for ( var i = 0; i < this._clusters.length; i++ ) {
  97. var c = this._clusters[i];
  98. if ( this._clusterTest(p, c) ) {
  99. // add the point to an existing cluster
  100. this._clusterAddPoint(p, c);
  101. // update the cluster's geometry
  102. this._updateClusterGeometry(c);
  103. // update the label
  104. this._updateLabel(c);
  105. clustered = true;
  106. break;
  107. }
  108. }
  109. if ( ! clustered ) {
  110. this._clusterCreate(p);
  111. p.attributes.clusterCount = 1;
  112. this._showCluster(p);
  113. }
  114. },
  115. clear: function() {
  116. // Summary:  Remove all clusters and data points.
  117. this.inherited(arguments);
  118. this._clusters.length = 0;
  119. },
  120. clearSingles: function(singles) {
  121. // Summary:  Remove graphics that represent individual data points.
  122. var s = singles || this._singles;
  123. arrayUtils.forEach(s, function(g) {
  124. this.remove(g);
  125. }, this);
  126. this._singles.length = 0;
  127. },
  128. onClick: function(e) {
  129. // remove any previously showing single features
  130. this.clearSingles(this._singles);
  131. // find single graphics that make up the cluster that was clicked
  132. // would be nice to use filter but performance tanks with large arrays in IE
  133. var singles = [];
  134. for ( var i = 0, il = this._clusterData.length; i < il; i++) {
  135. if ( e.graphic.attributes.clusterId == this._clusterData[i].attributes.clusterId ) {
  136. singles.push(this._clusterData[i]);
  137. }
  138. }
  139. if ( singles.length > this._maxSingles ) {
  140. alert("Sorry, that cluster contains more than " + this._maxSingles + " points. Zoom in for more detail.");
  141. return;
  142. } else {
  143. // stop the click from bubbling to the map
  144. e.stopPropagation();
  145. this._map.infoWindow.show(e.graphic.geometry);
  146. this._addSingles(singles);
  147. }
  148. },
  149. // internal methods
  150. _clusterGraphics: function() {
  151. // first time through, loop through the points
  152. for ( var j = 0, jl = this._clusterData.length; j < jl; j++ ) {
  153. // see if the current feature should be added to a cluster
  154. var point = this._clusterData[j];
  155. var clustered = false;
  156. var numClusters = this._clusters.length;
  157. for ( var i = 0; i < this._clusters.length; i++ ) {
  158. var c = this._clusters[i];
  159. if ( this._clusterTest(point, c) ) {
  160. this._clusterAddPoint(point, c);
  161. clustered = true;
  162. break;
  163. }
  164. }
  165. if ( ! clustered ) {
  166. this._clusterCreate(point);
  167. }
  168. }
  169. this._showAllClusters();
  170. },
  171. _clusterTest: function(p, cluster) {
  172. var distance = (
  173. Math.sqrt(
  174. Math.pow((cluster.x - p.x), 2) + Math.pow((cluster.y - p.y), 2)
  175. ) / this._clusterResolution
  176. );
  177. return (distance <= this._clusterTolerance);
  178. },
  179. // points passed to clusterAddPoint should be included
  180. // in an existing cluster
  181. // also give the point an attribute called clusterId
  182. // that corresponds to its cluster
  183. _clusterAddPoint: function(p, cluster) {
  184. // average in the new point to the cluster geometry
  185. var count, x, y;
  186. count = cluster.attributes.clusterCount;
  187. x = (p.x + (cluster.x * count)) / (count + 1);
  188. y = (p.y + (cluster.y * count)) / (count + 1);
  189. cluster.x = x;
  190. cluster.y = y;
  191. // build an extent that includes all points in a cluster
  192. // extents are for debug/testing only...not used by the layer
  193. if ( p.x < cluster.attributes.extent[0] ) {
  194. cluster.attributes.extent[0] = p.x;
  195. } else if ( p.x > cluster.attributes.extent[2] ) {
  196. cluster.attributes.extent[2] = p.x;
  197. }
  198. if ( p.y < cluster.attributes.extent[1] ) {
  199. cluster.attributes.extent[1] = p.y;
  200. } else if ( p.y > cluster.attributes.extent[3] ) {
  201. cluster.attributes.extent[3] = p.y;
  202. }
  203. // increment the count
  204. cluster.attributes.clusterCount++;
  205. // attributes might not exist
  206. if ( ! p.hasOwnProperty("attributes") ) {
  207. p.attributes = {};
  208. }
  209. // give the graphic a cluster id
  210. p.attributes.clusterId = cluster.attributes.clusterId;
  211. },
  212. // point passed to clusterCreate isn't within the
  213. // clustering distance specified for the layer so
  214. // create a new cluster for it
  215. _clusterCreate: function(p) {
  216. var clusterId = this._clusters.length + 1;
  217. // console.log("cluster create, id is: ", clusterId);
  218. // p.attributes might be undefined
  219. if ( ! p.attributes ) {
  220. p.attributes = {};
  221. }
  222. p.attributes.clusterId = clusterId;
  223. // create the cluster
  224. var cluster = {
  225. "x": p.x,
  226. "y": p.y,
  227. "attributes" : {
  228. "clusterCount": 1,
  229. "clusterId": clusterId,
  230. "extent": [ p.x, p.y, p.x, p.y ]
  231. }
  232. };
  233. this._clusters.push(cluster);
  234. },
  235. _showAllClusters: function() {
  236. for ( var i = 0, il = this._clusters.length; i < il; i++ ) {
  237. var c = this._clusters[i];
  238. this._showCluster(c);
  239. }
  240. },
  241. _showCluster: function(c) {
  242. var point = new Point(c.x, c.y, this._sr);
  243. this.add(
  244. new Graphic(
  245. point,
  246. null,
  247. c.attributes
  248. )
  249. );
  250. // code below is used to not label clusters with a single point
  251. if ( c.attributes.clusterCount == 1 ) {
  252. return;
  253. }
  254. // show number of points in the cluster
  255. var font  = new esri.symbol.Font()
  256. .setSize("10pt")
  257. .setWeight(esri.symbol.Font.WEIGHT_BOLD);
  258. var label = new TextSymbol(c.attributes.clusterCount)
  259. .setColor(new Color(this._clusterLabelColor))
  260. .setOffset(0, this._clusterLabelOffset)
  261. .setFont(font);
  262. this.add(
  263. new Graphic(
  264. point,
  265. label,
  266. c.attributes
  267. )
  268. );
  269. },
  270. _addSingles: function(singles) {
  271. // add single graphics to the map
  272. arrayUtils.forEach(singles, function(p) {
  273. var g = new Graphic(
  274. new Point(p.x, p.y, this._sr),
  275. this._singleSym,
  276. p.attributes,
  277. this._singleTemplate
  278. );
  279. this._singles.push(g);
  280. if ( this._showSingles ) {
  281. this.add(g);
  282. }
  283. }, this);
  284. this._map.infoWindow.setFeatures(this._singles);
  285. },
  286. _updateClusterGeometry: function(c) {
  287. // find the cluster graphic
  288. var cg = arrayUtils.filter(this.graphics, function(g) {
  289. return ! g.symbol &&
  290. g.attributes.clusterId == c.attributes.clusterId;
  291. });
  292. if ( cg.length == 1 ) {
  293. cg[0].geometry.update(c.x, c.y);
  294. } else {
  295. console.log("didn't find exactly one cluster geometry to update: ", cg);
  296. }
  297. },
  298. _updateLabel: function(c) {
  299. // find the existing label
  300. var label = arrayUtils.filter(this.graphics, function(g) {
  301. return g.symbol &&
  302. g.symbol.declaredClass == "esri.symbol.TextSymbol" &&
  303. g.attributes.clusterId == c.attributes.clusterId;
  304. });
  305. if ( label.length == 1 ) {
  306. // console.log("update label...found: ", label);
  307. this.remove(label[0]);
  308. var newLabel = new TextSymbol(c.attributes.clusterCount)
  309. .setColor(new Color(this._clusterLabelColor))
  310. .setOffset(0, this._clusterLabelOffset);
  311. this.add(
  312. new Graphic(
  313. new Point(c.x, c.y, this._sr),
  314. newLabel,
  315. c.attributes
  316. )
  317. );
  318. // console.log("updated the label");
  319. } else {
  320. console.log("didn't find exactly one label: ", label);
  321. }
  322. },
  323. // debug only...never called by the layer
  324. _clusterMeta: function() {
  325. // print total number of features
  326. console.log("Total:  ", this._clusterData.length);
  327. // add up counts and print it
  328. var count = 0;
  329. arrayUtils.forEach(this._clusters, function(c) {
  330. count += c.attributes.clusterCount;
  331. });
  332. console.log("In clusters:  ", count);
  333. }
  334. });
  335. });

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>

在代码中引用的代码为:

  1. require([
  2. "extras/ClusterLayer"
  3. ], function(
  4. ClusterLayer
  5. ){
  6. });

4、地图、图层的加载等

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

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

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

Arcgis for JS之Cluster聚类分析的实现的更多相关文章

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

    原文:Arcgis for JS之Cluster聚类分析的实现(基于区域范围的) 咱们书接上文,在上文,实现了基于距离的空间聚类的算法实现,在本文,将继续介绍空间聚类之基于区域范围的实现方式,好了,闲 ...

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

    http://blog.csdn.net/gisshixisheng/article/details/40711075 在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来的,包含 ...

  3. Arcgis for js载入天地图

    综述:本节讲述的是用Arcgis for js载入天地图的切片资源. 天地图的切片地图能够通过esri.layers.TiledMapServiceLayer来载入.在此将之进行了一定的封装,例如以下 ...

  4. arcgis for js开发之路径分析

    arcgis for js开发之路径分析 //方法封装 function routeplan(x1, x2, y1, y2, barrierPathArray, isDraw, callback) { ...

  5. Arcgis for js开发之直线、圆、箭头、多边形、集结地等绘制方法

    p{ text-align:center; } blockquote > p > span{ text-align:center; font-size: 18px; color: #ff0 ...

  6. arcgis for js学习之Draw类

    arcgis for js学习之Draw类 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  7. arcgis for js学习之Graphic类

    arcgis for js学习之Graphic类 <title>Graphic类</title> <meta charset="utf-8" /> ...

  8. ArcGIS for JS 离线部署

    本文以arcgis_js_v36_api为例,且安装的是IIS Web服务器 1.下载最新的ArcGIS for JS api 包,可在Esri中国社区或者Esri官网下载 2.下载后解压 3.将解压 ...

  9. Arcgis for Js之加载wms服务

    概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...

随机推荐

  1. kmp 和boyer-moore

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...

  2. (centos)linux下访问双系统windows7文件系统

    fdisk -l 无法挂载 NTFS格式的分区:mount: unknown filesystem type ‘ntfs’.   问题:       # mount –t ntfs /dev/sdb1 ...

  3. 编程中i++与++i的区别

  4. [插头DP自我总结]

    [HNOI 2007]神奇游乐园 #include <bits/stdc++.h> #define maxn 110 using namespace std; typedef long l ...

  5. Android 并行自动化测试系统 实现总结

    一:    总体架构 系统工程架构源码:https://github.com/UDLD/UIAUTOMATORTEST 整个系统基于: UiAutomator + 自编Python交互库 + Robo ...

  6. winform学习之----打开文件对话框并将文件内容放入文本框

    OpenFileDialog ofg = new OpenFileDialog(); ofg.Title = "ddd";//设置对话框标题 ofg.Multiselect = t ...

  7. JBPM4.4与SSH2之整合

    JBPM4.4与SSH2之整合(附完整源码) 这是我来到这世上二十多年来,第二次写博客啊.哈哈  这些天,想着把jbpm4.4与ssh2整合一下,由于之前从来没用过jbpm,也不知道各版本之间会有什么 ...

  8. OpenCV Show Image cvShowImage() 使用方法

    新版的OpenCV在所有的函数和类前都加上了cv或Cv,这样很好的避免了区域污染(namespace pollution),而且不用在前面加‘cv::’,非常的使用.像之前的imshow()函数被现在 ...

  9. [转] - linux下socket编程实例

    一.基本socket函数Linux系统是通过提供套接字(socket)来进行网络编程的.网络的socket数据传输是一种特殊的I/O,socket也是一种文件描述符.socket也有一个类似于打开文件 ...

  10. Phaser提供了Button对象简单的实现一个按钮

    Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...