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

时间：2022-12-20 19:41:39

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

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

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

聚类效果

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

点击显示信息

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

显示单个聚类点

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

1、数据组织

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

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

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>
 

Arcgis for JS之Cluster聚类分析的实现(基于区域范围的)的更多相关文章

  1. Arcgis for JS之Cluster聚类分析的实现

    原文:Arcgis for JS之Cluster聚类分析的实现 在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来 的,包含XY坐标信息的,通过graphic和graphicla ...

  2. &lpar;转）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" /&gt ...

  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. Web报表工具FineReport填报界面键盘操作

    对于一张填报数据较多的报表,需要用户频繁地操作鼠标.而FineReport填报界面除去按钮类型的控件,其余可以完全使用键盘而不需要用鼠标操作,对于用户而言,这将极大的节省信息录入的时间. 这里我们对填 ...

  2. 【leetcode❤python】 36&period; Valid Sudoku

    #-*- coding: UTF-8 -*-#特定的九个格内1-9的个数至多为1#依次检查每行,每列,每个子九宫格是否出现重复元素,如果出现返回false,否则返回true.class Solutio ...

  3. 初涉JavaScript模式 &lpar;11&rpar; &colon; 模块模式

    引子 这篇算是对第9篇中内容的发散和补充,当时我只是把模块模式中的一些内容简单的归为函数篇中去,在北川的提醒下,我才发觉这是非常不严谨的,于是我把这些内容拎出来,这就是这篇的由来. 什么是模块模式 在 ...

  4. &lbrack;置顶&rsqb; Linux协议栈代码阅读笔记（一）

    Linux协议栈代码阅读笔记(一) (基于linux-2.6.21.7) (一)用户态通过诸如下面的C库函数访问协议栈服务 int socket(int domain, int type, int p ...

  5. mysql的四种隔离级别

    一.READ UNCOMMITTED(未提交读) 在READ UNCOMMITTED级别,事务中的修改,即使未提交,对其他事务也都是可见的.事务可以读取未提交的数据,这也被称为脏读( Dirty RE ...

  6. robot framework环境搭建&lpar;转&rpar;

    一. robot framework环境搭建: 官网:http://robotframework.org/ 序号 安装包名 安装方法 下载地址 备注 1 python exe文件,直接双击安装 htt ...

  7. STL --&gt&semi; 高效使用STL

    高效使用STL 仅仅是个选择的问题,都是STL,可能写出来的效率相差几倍:
熟悉以下条款,高效的使用STL:   一.当对象很大时,建立指针的容器而不是对象的容器 1)STL基于拷贝的方式的来工作,任 ...

  8. Linux使用踩坑记

    Ubuntu安装坑: 1.对于新手第一次安装ubuntu,特殊情况会出现因为分辨率问题导致安装界面不全,无法进行下一步操作. 解决方案:使用alt+鼠标左键拖动屏幕Linux文件名乱码问题: 2.因为 ...

  9. 基于FPGA视频时序生成中的库文件

    上一篇分享了一个视频时序生成代码,下面我根据之前项目中用到的时序,对各个参数做了库文件,方便调用. -- -- Package File Template -- -- Purpose: This pa ...

  10. Codeforces Round &num;534 &lpar;Div&period; 2&rpar;D&period; Game with modulo-1104-D（交互&plus;二分&plus;构造）

    D. Game with modulo time limit per test 1 second memory limit per test 256 megabytes input standard ...

相关文章