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

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

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

聚类效果

点击显示信息

显示单个聚类点

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

1、数据组织

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

2、聚类思路

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

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. // 参数:
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. //   field:  string?
24. //     The field of cluster.
25. //   showSingles:  Boolean?
26. //     Optional. Whether or graphics should be displayed when a cluster graphic is clicked. Default is true.
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. //   singleSymbol:  MarkerSymbol?
32. //     Marker Symbol (picture or simple). Optional. Symbol to use for graphics that represent single points. Default is a small gray SimpleMarkerSymbol.
33. //   spatialReference:  SpatialReference?
34. //     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.
35. //   singleTemplate:  PopupTemplate?
36. //     PopupTemplate</a>. Optional. Popup template used to format attributes for graphics that represent single points. Default shows all attributes as "attribute = value" (not recommended).
37. //聚类的字段
38. this._clusterField = options.field || "";
39. //聚类数据
40. this._clusterData = options.data || [];
41. this._clusters = [];
42. //标注颜色，默认为白色
43. this._clusterLabelColor = options.labelColor || "#000";
44. //标注偏移，默认为-5
45. this._clusterLabelOffset = (options.hasOwnProperty("labelOffset")) ? options.labelOffset : -5;
46. this._showSingles = options.hasOwnProperty("showSingles") ? options.showSingles : true;
47. //单个对象
48. this._singles = []; //点击时出现
49. // 单个的样式
50. var SMS = SimpleMarkerSymbol;
51. this._singleSym = options.singleSymbol || new SMS("circle", 6, null, new Color(options.singleColor,0.6));
52. //空间参考
53. this._sr = options.spatialReference || new SpatialReference({ "wkid": 102100 });
54. //地图缩放
55. this._zoomEnd = null;
56. this._singleTemplate = options.singleTemplate || new PopupTemplate({ "title": "", "description": "{*}" });
57. },
58. // 重构esri/layers/GraphicsLayer方法
59. _setMap: function(map, surface) {
60. this._clusterGraphics();
61. /*// 地图缩放重新聚类
62. this._zoomEnd = connect.connect(map, "onZoomEnd", this, function() {
63. this.clear();
64. this._clusterGraphics();
65. });*/
66. // GraphicsLayer will add its own listener here
67. var div = this.inherited(arguments);
68. return div;
69. },
70. _unsetMap: function() {
71. this.inherited(arguments);
72. connect.disconnect(this._zoomEnd);
73. },
74. // public ClusterLayer methods
75. add: function(p) {
76. // 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.
77. //
78. // if passed a graphic, use the GraphicsLayer's add method
79. if ( p.declaredClass ) {
80. this.inherited(arguments);
81. return;
82. }
83. // add the new data to _clusterData so that it's included in clusters
84. // when the map level changes
85. this._clusterData.push(this._clusters);
86. var clustered = false;
87. // look for an existing cluster for the new point
88. for ( var i = 0; i < this._clusters.length; i++ ) {
89. var c = this._clusters[i];
90. if ( this._clusterTest(p, c) ) {
91. // add the point to an existing cluster
92. this._clusterAddPoint(p, c);
93. // update the cluster's geometry
94. this._updateClusterGeometry(c);
95. // update the label
96. this._updateLabel(c);
97. clustered = true;
98. break;
99. }
100. }
101. if ( ! clustered ) {
102. this._clusterCreate(p);
103. p.attributes.clusterCount = 1;
104. this._showCluster(p);
105. }
106. },
107. clear: function() {
108. // Summary:  Remove all clusters and data points.
109. this.inherited(arguments);
110. this._clusters.length = 0;
111. },
112. clearSingles: function(singles) {
113. // Summary:  Remove graphics that represent individual data points.
114. var s = singles || this._singles;
115. arrayUtils.forEach(s, function(g) {
116. this.remove(g);
117. }, this);
118. this._singles.length = 0;
119. map.graphics.clear();
120. },
121. onClick: function(e) {
122. // remove any previously showing single features
123. this.clearSingles(this._singles);
124. // find single graphics that make up the cluster that was clicked
125. // would be nice to use filter but performance tanks with large arrays in IE
126. var singles = [];
127. for ( var i = 0, il = this._clusterData.length; i < il; i++) {
128. if ( e.graphic.attributes.clusterId == this._clusterData[i].attributes.clusterId ) {
129. singles.push(this._clusterData[i]);
130. }
131. }
132. if ( singles.length > this._maxSingles ) {
133. alert("Sorry, that cluster contains more than " + this._maxSingles + " points. Zoom in for more detail.");
134. return;
135. } else {
136. // stop the click from bubbling to the map
137. e.stopPropagation();
138. this._map.infoWindow.show(e.graphic.geometry);
139. this._addSingles(singles);
140. }
141. },
142. // 图形聚类
143. _clusterGraphics: function() {
144. // first time through, loop through the points
145. for ( var j = 0, jl = this._clusterData.length; j < jl; j++ ) {
146. // see if the current feature should be added to a cluster
147. var point = this._clusterData[j];
148. var clustered = false;
149. for ( var i = 0, numClusters = this._clusters.length; i < numClusters; i++ ) {
150. var c = this._clusters[i];
151. if ( this._clusterTest(point, c) ) {
152. var pt = new esri.geometry.Point(point.x,point.y);
153. this._clusterAddPoint(point, c);
154. clustered = true;
155. break;
156. }
157. }
158. if ( ! clustered ) {
159. this._clusterCreate(point);
160. }
161. }
162. this._showAllClusters();
163. },
164. _clusterTest: function(p, cluster) {
165. if(p.attributes.proCode === cluster.field){
166. //                console.log("true");
167. return true;
168. }
169. else{
170. //                console.log("false");
171. return false;
172. }
173. },
174. // points passed to clusterAddPoint should be included
175. // in an existing cluster
176. // also give the point an attribute called clusterId
177. // that corresponds to its cluster
178. _clusterAddPoint: function(p, cluster) {
179. // average in the new point to the cluster geometry
180. var count, field;
181. count = cluster.attributes.clusterCount;
182. field = p.attributes.proCode;
183. cluster.field = field;
184. // increment the count
185. cluster.attributes.clusterCount++;
186. // attributes might not exist
187. if ( ! p.hasOwnProperty("attributes") ) {
188. p.attributes = {};
189. }
190. // give the graphic a cluster id
191. p.attributes.clusterId = cluster.attributes.clusterId;
192. },
193. // point passed to clusterCreate isn't within the
194. // clustering distance specified for the layer so
195. // create a new cluster for it
196. _clusterCreate: function(p) {
197. var clusterId = this._clusters.length + 1;
198. // console.log("cluster create, id is: ", clusterId);
199. // p.attributes might be undefined
200. if ( ! p.attributes ) {
201. p.attributes = {};
202. }
203. p.attributes.clusterId = clusterId;
204. // create the cluster
205. var cluster = {
206. "x": p.x,
207. "y": p.y,
208. "field": p.attributes.proCode,
209. "attributes" : {
210. "clusterCount": 1,
211. "clusterId": clusterId
212. }
213. };
214. this._clusters.push(cluster);
215. },
216. _showAllClusters: function() {
217. for ( var i = 0, il = this._clusters.length; i < il; i++ ) {
218. var c = this._clusters[i];
219. this._showCluster(c);
220. }
221. },
222. _showCluster: function(c) {
223. var point = new Point(c.x, c.y, this._sr);
224. this.add(
225. new Graphic(
226. point,
227. null,
228. c.attributes
229. )
230. );
231. // code below is used to not label clusters with a single point
232. if ( c.attributes.clusterCount == 1 ) {
233. return;
234. }
235. // show number of points in the cluster
236. var font  = new esri.symbol.Font()
237. .setSize("10pt")
238. .setWeight(esri.symbol.Font.WEIGHT_BOLD);
239. var label = new TextSymbol(c.attributes.clusterCount)
240. .setColor(new Color(this._clusterLabelColor))
241. .setOffset(0, this._clusterLabelOffset)
242. .setFont(font);
243. this.add(
244. new Graphic(
245. point,
246. label,
247. c.attributes
248. )
249. );
250. },
251. _addSingles: function(singles) {
252. var mlPoint = new esri.geometry.Multipoint(this._sr);
253. // add single graphics to the map
254. arrayUtils.forEach(singles, function(p) {
255. var pt = new Point(p.x, p.y, this._sr);
256. mlPoint.addPoint(pt);
257. var g = new Graphic(
258. pt,
259. this._singleSym,
260. p.attributes,
261. this._singleTemplate
262. );
263. this._singles.push(g);
264. if ( this._showSingles ) {
265. this.add(g);
266. }
267. }, this);
268. map.setExtent(mlPoint.getExtent().expand(2.5));
269. var singleCenter = mlPoint.getExtent().getCenter();
270. var font  = new esri.symbol.Font();
271. font.setSize("15pt");
272. font.setFamily("微软雅黑");
273. font.setWeight("bold");
274. var text = new esri.symbol.TextSymbol(singles[0].attributes.proName);
275. text.setFont(font);
276. text.setColor(new Color([0,0,0]));
277. var labelGraphic = new esri.Graphic(singleCenter,text);
278. map.graphics.add(labelGraphic);
279. this._map.infoWindow.setFeatures(this._singles);
280. },
281. _updateClusterGeometry: function(c) {
282. // find the cluster graphic
283. var cg = arrayUtils.filter(this.graphics, function(g) {
284. return ! g.symbol &&
285. g.attributes.clusterId == c.attributes.clusterId;
286. });
287. if ( cg.length == 1 ) {
288. cg[0].geometry.update(c.x, c.y);
289. } else {
290. console.log("didn't find exactly one cluster geometry to update: ", cg);
291. }
292. },
293. _updateLabel: function(c) {
294. // find the existing label
295. var label = arrayUtils.filter(this.graphics, function(g) {
296. return g.symbol &&
297. g.symbol.declaredClass == "esri.symbol.TextSymbol" &&
298. g.attributes.clusterId == c.attributes.clusterId;
299. });
300. if ( label.length == 1 ) {
301. // console.log("update label...found: ", label);
302. this.remove(label[0]);
303. var newLabel = new TextSymbol(c.attributes.clusterCount)
304. .setColor(new Color(this._clusterLabelColor))
305. .setOffset(0, this._clusterLabelOffset);
306. this.add(
307. new Graphic(
308. new Point(c.x, c.y, this._sr),
309. newLabel,
310. c.attributes
311. )
312. );
313. // console.log("updated the label");
314. } else {
315. console.log("didn't find exactly one label: ", label);
316. }
317. },
318. // debug only...never called by the layer
319. _clusterMeta: function() {
320. // print total number of features
321. console.log("Total:  ", this._clusterData.length);
322. // add up counts and print it
323. var count = 0;
324. arrayUtils.forEach(this._clusters, function(c) {
325. count += c.attributes.clusterCount;
326. });
327. console.log("In clusters:  ", count);
328. }
329. });
330. });

接着将之导入，并调用：

1. var dojoConfig = {
2. paths: {
3. extras: location.pathname.replace(/\/[^/]+$/, "") + "/extras"
4. }
5. };

1. require([......
2. "extras/ZoneClusterLayer",
3. "dojo/domReady!"
4. ], function(
5. ......,
6. ZoneClusterLayer
7. ){

新建clusterlayer对象，并将之添加到map：

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. /*var picBaseUrl = "images/";
30. var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
31. var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
32. var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 80, 80).setOffset(0, 15);*/
33. var style1 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,
34. new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
35. new Color([255,200,0]), 1),
36. new Color([255,200,0,0.8]));
37. var style2 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 20,
38. new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
39. new Color([255,125,3]), 1),
40. new Color([255,125,3,0.8]));
41. var style3 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 23,
42. new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
43. new Color([255,23,58]), 1),
44. new Color([255,23,58,0.8]));
45. var style4 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 28,
46. new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
47. new Color([204,0,184]), 1),
48. new Color([204,0,184,0.8]));
49. var style5 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 33,
50. new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
51. new Color([0,0,255]), 1),
52. new Color([0,0,255,0.8]));
53. renderer.addBreak(1, 10, style1);
54. renderer.addBreak(10, 50, style2);
55. renderer.addBreak(50, 100, style3);
56. renderer.addBreak(100, 150, style4);
57. renderer.addBreak(150, 200, style5);
58. clusterLayer.setRenderer(renderer);
59. map.addLayer(clusterLayer);
60. // close the info window when the map is clicked
61. map.on("click", cleanUp);
62. // close the info window when esc is pressed
63. map.on("key-down", function(e) {
64. if (e.keyCode === 27) {
65. cleanUp();
66. }
67. });
68. }
69. function cleanUp() {
70. map.infoWindow.hide();
71. clusterLayer.clearSingles();
72. }

调用的html的全代码如下：

1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
6. <title>Zone Cluster</title>
7. <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css">
8. <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
9. <style>
10. html, body, #map{ height: 100%; width: 100%; margin: 0; padding: 0; }
11. #map{ margin: 0; padding: 0; }
12. </style>
13. <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/map",
31. "esri/layers/ArcGISTiledMapServiceLayer",
32. "esri/layers/FeatureLayer",
33. "esri/graphic",
34. "esri/Color",
35. "esri/symbols/SimpleMarkerSymbol",
36. "esri/symbols/SimpleLineSymbol",
37. "esri/symbols/SimpleFillSymbol",
38. "esri/renderers/SimpleRenderer",
39. "esri/renderers/ClassBreaksRenderer",
40. "esri/SpatialReference",
41. "esri/geometry/Point",
42. "esri/geometry/webMercatorUtils",
43. "extras/ZoneClusterLayer",
44. "dojo/domReady!"
45. ], function(
46. parser,
47. arrayUtils,
48. Map,
49. Tiled,
50. FeatureLayer,
51. Graphic,
52. Color,
53. SimpleMarkerSymbol,
54. SimpleLineSymbol,
55. SimpleFillSymbol,
56. SimpleRenderer,
57. ClassBreaksRenderer,
58. SpatialReference,
59. Point,
60. webMercatorUtils,
61. ZoneClusterLayer
62. ){
63. map = new Map("map", {logo:false,slider: true});
64. var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/image/MapServer");
65. map.addLayer(tiled);
66. tiled.hide();
67. var fch = new FeatureLayer("http://localhost:6080/arcgis/rest/services/china/MapServer/0");
68. var symbol = new SimpleFillSymbol(
69. SimpleFillSymbol.STYLE_SOLID,
70. new SimpleLineSymbol(
71. SimpleLineSymbol.STYLE_SOLID,
72. new esri.Color([180,180,180,1]), //设置RGB色，0.75设置透明度
73. 2
74. ),
75. new esri.Color([150,150,150,0.2])
76. );
77. //简单渲染
78. var simpleRender=new SimpleRenderer(symbol);
79. fch.setRenderer(simpleRender);
80. map.addLayer(fch);
81. map.centerAndZoom(new Point(103.847, 36.0473, map.spatialReference),4);
82. map.on("load", function() {
83. addClusters(county.items);
84. });
85. function addClusters(items) {
86. var countyInfo = {};
87. countyInfo.data = arrayUtils.map(items, function(item) {
88. var latlng = new  Point(parseFloat(item.x), parseFloat(item.y), map.spatialReference);
89. var webMercator = webMercatorUtils.geographicToWebMercator(latlng);
90. var attributes = {
91. "proName": item.attributes.proname,
92. "proCode":item.procode,
93. "countyName": item.attributes.countyname,
94. "lng": item.x,
95. "lat": item.y
96. };
97. return {
98. "x": webMercator.x,
99. "y": webMercator.y,
100. "attributes": attributes
101. };
102. });
103. clusterLayer = new ZoneClusterLayer({
104. "data": countyInfo.data,
105. "id": "clusters",
106. "labelColor": "#fff",
107. "labelOffset": -4,
108. "singleColor": "#0ff",
109. "field":"proCode"
110. });
111. var defaultSym = new SimpleMarkerSymbol().setSize(4);
112. var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
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, 20,
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, 23,
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, 28,
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, 33,
134. new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
135. new Color([0,0,255]), 1),
136. new Color([0,0,255,0.8]));
137. renderer.addBreak(1, 10, style1);
138. renderer.addBreak(10, 50, style2);
139. renderer.addBreak(50, 100, style3);
140. renderer.addBreak(100, 150, style4);
141. renderer.addBreak(150, 200, style5);
142. clusterLayer.setRenderer(renderer);
143. map.addLayer(clusterLayer);
144. // close the info window when the map is clicked
145. map.on("click", cleanUp);
146. // close the info window when esc is pressed
147. map.on("key-down", function(e) {
148. if (e.keyCode === 27) {
149. cleanUp();
150. }
151. });
152. }
153. function cleanUp() {
154. map.infoWindow.hide();
155. clusterLayer.clearSingles();
156. }
157. });
158. </script>
159. </head>
160. <body>
161. <div id="map"></div>
162. </div>
163. </body>
164. </html>