首页 > 代码库 > (转)Arcgis for Js之Graphiclayer扩展详解

(转)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.   
  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);  
  96.                   
  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扩展详解