（转）Arcgis for Js之Graphiclayer扩展详解

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

[javascript] view plain copy

print?

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

[html] view plain copy

print?

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

c、_draw

[javascript] view plain copy

print?

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

此外，还有一些地图控制的，如：_onPanStartHandler，_onZoomStartHandler，_onExtentChangeHandler等。扩展GraphicLayer的大概框架代码如下：

[javascript] view plain copy

print?

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实现，代码如下：

[javascript] view plain copy

print?

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;
61. for (i = 0; i < gs.length; i++) {
62. _draw(gs[i], redraw);
63. }
64. this.show();
65. },
66. _draw:function(graphic, redraw){
67. if (!this._map) {
68. return;
69. }
70. if(graphic instanceof Graphic)//判断graphic是否为MapChartGraphic类型
71. {
72. this._drawChart(graphic,redraw);
73. }
74. },
75. _drawChart:function(graphic,redraw){
76. var showMapPt = graphic.geometry,
77. attribute = graphic.attributes;
78. var showPt = map.toScreen(showMapPt);
79. var id=attribute.code,
80. series = [attribute.male, attribute.female];
81. if(redraw){
82. dojo.byId(this._divId).removeChild(dojo.byId("div"+id));
83. }
84. if(attribute){
85. var _chartDiv = dojo.doc.createElement("div");
86. _chartDiv.id ="div"+id;
87. dojo.style(_chartDiv, {
88. "left": (showPt.x-this._chartSize/4) + "px",
89. "top": (showPt.y-this._chartSize/2) + "px",
90. "position": "absolute",
91. "width": this._chartSize + "px",
92. "height": this._chartSize + "px"
93. });
94. dojo.byId(this._divId).appendChild(_chartDiv);
95. var _chart = new Chart2D(_chartDiv);
96. var _themes = dojox.charting.themes.PlotKit.blue;
97. _themes.chart.fill = "transparent";
98. _themes.chart.stroke = "transparent";
99. _themes.plotarea.fill = "transparent";
100. _chart.setTheme(_themes);
101. switch(this._charttype){
102. case "Pie":{//饼状图
103. _chart.addPlot("default", {
104. type: this._charttype,
105. labels:false
106. });
107. break;
108. }
109. case "StackedColumns":{//柱状堆积图
110. _chart.addPlot("default", {
111. type: this._charttype,
112. labels:false,
113. markers: true,
114. gap: 2
115. });
116. break;
117. }
118. case "Lines":{//柱状堆积图
119. _chart.addPlot("default", {
120. type: this._charttype,
121. labels:false,
122. markers: true,
123. radius: 1,
124. tension:"X"
125. });
126. break;
127. }
128. default:{//柱状图
129. _chart.addPlot("default", {
130. type: this._charttype,
131. labels:false,
132. gap: 3
133. });
134. chart.addAxis("y", { vertical:true, fixLower: "major", fixUpper: "major" });
135. break;
136. }
137. }
138. _chart.addSeries(id, series,{stroke: {width:1}});
139. //效果
140. new Highlight(_chart, "default", {highlight: "lightskyblue"});
141. new Tooltip(_chart, "default");
142. _chart.render();
143. }
144. }
145. });
146. });

实现后的效果如下：

源码下载地址：

链接：http://pan.baidu.com/s/1i3EbnF3 密码：cvbf