生活随笔
收集整理的這篇文章主要介紹了
（转）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 plaincopy print?
_setMap:?function(map,?surface)?{??????????var?div?=?this.inherited(arguments);??????return?div;??}??
b、_unsetMap
?
?
[html]?view plaincopy print?
_unsetMap:?function()?{??????this.inherited(arguments);??}?? ?
c、_draw
?
[javascript]?view plaincopy print?
_draw:function(graphic,?redrawFlag,?zoomFlag){??????if?(!this._map)?{??????????return;??????}??}?? 此外，還有一些地圖控制的，如：_onPanStartHandler，_onZoomStartHandler，_onExtentChangeHandler等。擴展GraphicLayer的大概框架代碼如下：
?
?
[javascript]?view plaincopy print?
define([??????"dojo/_base/declare",??????"esri/layers/GraphicsLayer"??],?function?(??????declare,??????GraphicsLayer??????)?{??????return?declare([GraphicsLayer],?{??????????constructor:?function(options)?{??????????????????????this._id?=?options.id?||?"";??????????????this._divId?=?options.chartDiv?||?"chart";??????????},??????????????????_setMap:?function(map,?surface)?{??????????????????????????var?div?=?this.inherited(arguments);??????????????return?div;??????????},??????????_unsetMap:?function()?{??????????????this.inherited(arguments);??????????},??????????????????_onPanStartHandler:?function()?{??????????????????????},??????????????????_onZoomStartHandler:function(){??????????????????????},??????????_onExtentChangeHandler:?function(delta,?extent,?levelChange,?lod)?{??????????????????????},??????????_draw:function(graphic){??????????????if?(!this._map)?{??????????????????return;??????????????}??????????????????????}??????});??});??
例子：添加統計圖
?
統計圖通過dojo chart實現，代碼如下：
?
[javascript]?view plaincopy print?
define([??????"dojo/_base/declare",??????"esri/layers/GraphicsLayer",??????"esri/geometry/Point",??????"esri/graphic",??????"dojox/charting/Chart2D",??????"dojox/charting/themes/PlotKit/blue",??????"dojox/charting/action2d/Highlight",??????"dojox/charting/action2d/Tooltip"??],?function?(??????declare,??????GraphicsLayer,??????Point,??????Graphic,??????Chart2D,??????theme,??????Highlight,??????Tooltip??????)?{??????return?declare([GraphicsLayer],?{??????????constructor:?function(options)?{??????????????this._id?=?options.id?||?"";??????????????this._divId?=?options.chartDiv?||?"chart";??????????????this._charttype?=?options.chartType?||?"Pie";??????????????this._chartSize?=?options.size?||?50;??????????},??????????????????_setMap:?function(map,?surface)?{??????????????????????????var?div?=?this.inherited(arguments);??????????????return?div;??????????},??????????_unsetMap:?function()?{??????????????this.inherited(arguments);??????????},??????????hide:?function()?{??????????????dojo.style(dojo.byId(this._divId),{??????????????????"display":?"none"??????????????});??????????},??????????show:?function()?{??????????????dojo.style(dojo.byId(this._divId),{??????????????????"display":?""??????????????});??????????},??????????????????_onPanStartHandler:?function()?{??????????????this.hide();??????????},??????????????????_onZoomStartHandler:function(){??????????????this.hide();??????????},??????????_onExtentChangeHandler:?function()?{??????????????this._refresh(true);??????????},??????????_refresh:?function(redraw)?{??????????????var?that=this;??????????????var?gs?=?this.graphics,??????????????????_draw?=?this._draw;????????????????for?(i?=?0;?i?<?gs.length;?i++)?{??????????????????_draw(gs[i],?redraw);??????????????}??????????????this.show();??????????},??????????_draw:function(graphic,?redraw){??????????????if?(!this._map)?{??????????????????return;??????????????}??????????????if(graphic?instanceof?Graphic)????????????{??????????????????this._drawChart(graphic,redraw);??????????????}??????????},??????????_drawChart:function(graphic,redraw){??????????????var?showMapPt?=?graphic.geometry,??????????????????attribute?=?graphic.attributes;??????????????var?showPt?=?map.toScreen(showMapPt);??????????????var?id=attribute.code,??????????????????series?=?[attribute.male,?attribute.female];??????????????if(redraw){??????????????????dojo.byId(this._divId).removeChild(dojo.byId("div"+id));??????????????}??????????????if(attribute){??????????????????var?_chartDiv?=?dojo.doc.createElement("div");??????????????????_chartDiv.id?="div"+id;??????????????????dojo.style(_chartDiv,?{??????????????????????"left":?(showPt.x-this._chartSize/4)?+?"px",??????????????????????"top":?(showPt.y-this._chartSize/2)?+?"px",??????????????????????"position":?"absolute",??????????????????????"width":?this._chartSize?+?"px",??????????????????????"height":?this._chartSize?+?"px"??????????????????});??????????????????dojo.byId(this._divId).appendChild(_chartDiv);????????????????????????????????????var?_chart?=?new?Chart2D(_chartDiv);??????????????????var?_themes?=?dojox.charting.themes.PlotKit.blue;??????????????????_themes.chart.fill?=?"transparent";??????????????????_themes.chart.stroke?=?"transparent";??????????????????_themes.plotarea.fill?=?"transparent";??????????????????_chart.setTheme(_themes);??????????????????switch(this._charttype){??????????????????????case?"Pie":{????????????????????????_chart.addPlot("default",?{??????????????????????????????type:?this._charttype,??????????????????????????????labels:false??????????????????????????});??????????????????????????break;??????????????????????}??????????????????????case?"StackedColumns":{????????????????????????_chart.addPlot("default",?{??????????????????????????????type:?this._charttype,??????????????????????????????labels:false,??????????????????????????????markers:?true,??????????????????????????????gap:?2??????????????????????????});??????????????????????????break;??????????????????????}??????????????????????case?"Lines":{????????????????????????_chart.addPlot("default",?{??????????????????????????????type:?this._charttype,??????????????????????????????labels:false,??????????????????????????????markers:?true,??????????????????????????????radius:?1,??????????????????????????????tension:"X"??????????????????????????});??????????????????????????break;??????????????????????}??????????????????????default:{????????????????????????_chart.addPlot("default",?{??????????????????????????????type:?this._charttype,??????????????????????????????labels:false,??????????????????????????????gap:?3??????????????????????????});??????????????????????????chart.addAxis("y",?{?vertical:true,?fixLower:?"major",?fixUpper:?"major"?});??????????????????????????break;??????????????????????}??????????????????}??????????????????_chart.addSeries(id,?series,{stroke:?{width:1}});??????????????????????????????????new?Highlight(_chart,?"default",?{highlight:?"lightskyblue"});??????????????????new?Tooltip(_chart,?"default");??????????????????_chart.render();??????????????}??????????}??????});??});?? ?
實現后的效果如下：
源碼下載地址：
鏈接：http://pan.baidu.com/s/1i3EbnF3 密碼：cvbf
總結
以上是生活随笔為你收集整理的（转）Arcgis for Js之Graphiclayer扩展详解的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
