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

在前兩節，講到了兩種不同方式的聚類，一種是基於距離的，一種是基於區域範圍的，兩種不同的聚類都是通過擴展esri/layers/GraphicsLayer方法來實現的。在本節，就詳細的講講esri/layers/GraphicsLayer方法的擴展。

首先，在講解擴展之前，先看看API中esri/layers/GraphicsLayer的一些參數和方法等。

1、創建一個GraphicLayer

在ESRI官方的API中，創建GraphicLayer有兩種方式：

例如：

或者：

在第二種方式的options的參數包括：

2、GraphicLayer的屬性

GraphicLayer的屬性包括：

其中，有幾個比較常見和重要的屬性為：

a、graphics：數組，返回的參數是一個數組，為GraphicLayer中包含的Graphic對象。

b、visiable：布爾型，Graphiclayer是否可見。

c、visiableAtMapScale：布爾型，在特定比例尺下的可見性。

3、Graphiclayer的方法

圖中，紅框標出的是Graphiclayer最常用的方法，詳細的介紹很清楚，在此不再做贅述了。

接下來，擴展Graphiclayer。

GraphicLayer藏得很深，位於library\3.9\3.9\js\esri\layers\GraphicsLayer.js，雖然對參數變量代碼做了混淆，但是有些東西還是沒做變化。在做GraphicLayer擴展時，有幾個是比較常用的：

a、_setMap

1. // 重構esri/layers/GraphicsLayer方法
2. _setMap: function(map, surface) {
3. // GraphicsLayer will add its own listener here
4. var div = this.inherited(arguments);
5. return div;
6. }

b、_unsetMap

1. _unsetMap: function() {
2. this.inherited(arguments);
3. }

c、_draw

1. _draw:function(graphic, redrawFlag, zoomFlag){
2. if (!this._map) {
3. return;
4. }
5. }

此外，還有一些地圖控制的，如：_onPanStartHandler，_onZoomStartHandler，_onExtentChangeHandler等。擴展GraphicLayer的大概框架代碼如下：

1. define([
2. "dojo/_base/declare",
3. "esri/layers/GraphicsLayer"
4. ], function (
5. declare,
6. GraphicsLayer
7. ) {
8. return declare([GraphicsLayer], {
9. constructor: function(options) {
10. //參數設置
11. this._id = options.id || "";
12. this._divId = options.chartDiv || "chart";
13. },
14. // 重構esri/layers/GraphicsLayer方法
15. _setMap: function(map, surface) {
16. // GraphicsLayer will add its own listener here
17. var div = this.inherited(arguments);
18. return div;
19. },
20. _unsetMap: function() {
21. this.inherited(arguments);
22. },
23. //拖拽
24. _onPanStartHandler: function() {
25. //
26. },
27. //縮放
28. _onZoomStartHandler:function(){
29. //
30. },
31. _onExtentChangeHandler: function(delta, extent, levelChange, lod) {
32. //
33. },
34. _draw:function(graphic){
35. if (!this._map) {
36. return;
37. }
38. //
39. }
40. });
41. });

例子：添加統計圖

統計圖通過dojo chart實現，代碼如下：

1. define([
2. "dojo/_base/declare",
3. "esri/layers/GraphicsLayer",
4. "esri/geometry/Point",
5. "esri/graphic",
6. "dojox/charting/Chart2D",
7. "dojox/charting/themes/PlotKit/blue",
8. "dojox/charting/action2d/Highlight",
9. "dojox/charting/action2d/Tooltip"
10. ], function (
11. declare,
12. GraphicsLayer,
13. Point,
14. Graphic,
15. Chart2D,
16. theme,
17. Highlight,
18. Tooltip
19. ) {
20. return declare([GraphicsLayer], {
21. constructor: function(options) {
22. this._id = options.id || "";
23. this._divId = options.chartDiv || "chart";
24. this._charttype = options.chartType || "Pie";
25. this._chartSize = options.size || 50;
26. },
27. // 重構esri/layers/GraphicsLayer方法
28. _setMap: function(map, surface) {
29. // GraphicsLayer will add its own listener here
30. var div = this.inherited(arguments);
31. return div;
32. },
33. _unsetMap: function() {
34. this.inherited(arguments);
35. },
36. hide: function() {
37. dojo.style(dojo.byId(this._divId),{
38. "display": "none"
39. });
40. },
41. show: function() {
42. dojo.style(dojo.byId(this._divId),{
43. "display": ""
44. });
45. },
46. //拖拽
47. _onPanStartHandler: function() {
48. this.hide();
49. },
50. //縮放
51. _onZoomStartHandler:function(){
52. this.hide();
53. },
54. _onExtentChangeHandler: function() {
55. this._refresh(true);
56. },
57. _refresh: function(redraw) {
58. var that=this;
59. var gs = this.graphics,
60. _draw = this._draw;
62. for (i = 0; i < gs.length; i++) {
63. _draw(gs[i], redraw);
64. }
65. this.show();
66. },
67. _draw:function(graphic, redraw){
68. if (!this._map) {
69. return;
70. }
71. if(graphic instanceof Graphic)//判斷graphic是否為MapChartGraphic類型
72. {
73. this._drawChart(graphic,redraw);
74. }
75. },
76. _drawChart:function(graphic,redraw){
77. var showMapPt = graphic.geometry,
78. attribute = graphic.attributes;
79. var showPt = map.toScreen(showMapPt);
80. var id=attribute.code,
81. series = [attribute.male, attribute.female];
82. if(redraw){
83. dojo.byId(this._divId).removeChild(dojo.byId("div"+id));
84. }
85. if(attribute){
86. var _chartDiv = dojo.doc.createElement("div");
87. _chartDiv.id ="div"+id;
88. dojo.style(_chartDiv, {
89. "left": (showPt.x-this._chartSize/4) + "px",
90. "top": (showPt.y-this._chartSize/2) + "px",
91. "position": "absolute",
92. "width": this._chartSize + "px",
93. "height": this._chartSize + "px"
94. });
95. dojo.byId(this._divId).appendChild(_chartDiv);
97. var _chart = new Chart2D(_chartDiv);
98. var _themes = dojox.charting.themes.PlotKit.blue;
99. _themes.chart.fill = "transparent";
100. _themes.chart.stroke = "transparent";
101. _themes.plotarea.fill = "transparent";
102. _chart.setTheme(_themes);
103. switch(this._charttype){
104. case "Pie":{//餅狀圖
105. _chart.addPlot("default", {
106. type: this._charttype,
107. labels:false
108. });
109. break;
110. }
111. case "StackedColumns":{//柱狀堆積圖
112. _chart.addPlot("default", {
113. type: this._charttype,
114. labels:false,
115. markers: true,
116. gap: 2
117. });
118. break;
119. }
120. case "Lines":{//柱狀堆積圖
121. _chart.addPlot("default", {
122. type: this._charttype,
123. labels:false,
124. markers: true,
125. radius: 1,
126. tension:"X"
127. });
128. break;
129. }
130. default:{//柱狀圖
131. _chart.addPlot("default", {
132. type: this._charttype,
133. labels:false,
134. gap: 3
135. });
136. chart.addAxis("y", { vertical:true, fixLower: "major", fixUpper: "major" });
137. break;
138. }
139. }
140. _chart.addSeries(id, series,{stroke: {width:1}});
141. //效果
142. new Highlight(_chart, "default", {highlight: "lightskyblue"});
143. new Tooltip(_chart, "default");
144. _chart.render();
145. }
146. }
147. });
148. });

實現後的效果如下：

源碼下載地址：

鏈接：http://pan.baidu.com/s/1i3EbnF3 密碼：cvbf

（轉）Arcgis for Js之Graphiclayer擴展詳解