Arcgis for Js之Graphiclayer扩展详解
2014-11-17 17:02
211 查看
在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的。在本节,就详细的讲讲esri/layers/GraphicsLayer方法的扩展。
首先,在讲解扩展之前,先看看API中esri/layers/GraphicsLayer的一些参数和方法等。
1、创建一个GraphicLayer
在ESRI官方的API中,创建GraphicLayer有两种方式:
![](http://img.blog.csdn.net/20141117135141868?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
例如:
![](http://img.blog.csdn.net/20141117135257092?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
或者:
![](http://img.blog.csdn.net/20141117135338915?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
在第二种方式的options的参数包括:
![](http://img.blog.csdn.net/20141117135533435?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
2、GraphicLayer的属性
GraphicLayer的属性包括:
![](http://img.blog.csdn.net/20141117135746207?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
其中,有几个比较常见和重要的属性为:
a、graphics:数组,返回的参数是一个数组,为GraphicLayer中包含的Graphic对象。
b、visiable:布尔型,Graphiclayer是否可见。
c、visiableAtMapScale:布尔型,在特定比例尺下的可见性。
3、Graphiclayer的方法
![](http://img.blog.csdn.net/20141117140606437?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
图中,红框标出的是Graphiclayer最常用的方法,详细的介绍很清楚,在此不再做赘述了。
接下来,扩展Graphiclayer。
GraphicLayer藏得很深,位于library\3.9\3.9\js\esri\layers\GraphicsLayer.js,虽然对参数变量代码做了混淆,但是有些东西还是没做变化。在做GraphicLayer扩展时,有几个是比较常用的:
a、_setMap
b、_unsetMap
c、_draw
例子:添加统计图
统计图通过dojo chart实现,代码如下:
实现后的效果如下:
![](http://img.blog.csdn.net/20141117170032995?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
源码下载地址:
链接:http://pan.baidu.com/s/1i3EbnF3 密码:cvbf
如有疑问,请联系:
QQ:1004740957
E-Mail:niujp08@qq.com
首先,在讲解扩展之前,先看看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
// 重构esri/layers/GraphicsLayer方法 _setMap: function(map, surface) { // GraphicsLayer will add its own listener here var div = this.inherited(arguments); return div; }
b、_unsetMap
_unsetMap: function() { this.inherited(arguments); }
c、_draw
_draw:function(graphic, redrawFlag, zoomFlag){ if (!this._map) { return; } }此外,还有一些地图控制的,如:_onPanStartHandler,_onZoomStartHandler,_onExtentChangeHandler等。扩展GraphicLayer的大概框架代码如下:
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";
},
// 重构esri/layers/GraphicsLayer方法 _setMap: function(map, surface) { // GraphicsLayer will add its own listener here 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实现,代码如下:
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;
},
// 重构esri/layers/GraphicsLayer方法 _setMap: function(map, surface) { // GraphicsLayer will add its own listener here 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)//判断graphic是否为MapChartGraphic类型
{
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
如有疑问,请联系:
QQ:1004740957
E-Mail:niujp08@qq.com
相关文章推荐
- Arcgis for Js之Graphiclayer扩展详解(饼图)
- Arcgis for Js之Graphiclayer扩展详解
- (转)Arcgis for Js之Graphiclayer扩展详解
- Arcgis for JS扩展GraphicLayer实现区域对象的聚类统计与展示
- Arcgis for JS扩展GraphicLayer实现区域对象的聚类统计与展示
- Arcgis for Js实现graphiclayer的空间查询(续)
- Arcgis for Js实现graphiclayer的空间查询
- Arcgis for Js之Graphiclayer扩展具体解释
- Arcgis for Js实现graphiclayer的空间查询(续)
- Arcgis for Js实现graphiclayer的空间查询
- Arcgis for Js实现graphiclayer的空间查询(续)
- Arcgis for Js实现graphiclayer的空间查询
- arcgis for js 从入门到放弃一:初识和配置详解
- ArcGIS API for Silverlight 扩展测距功能-保留测距结果
- ArcGIS API For JS 中由Esri提供的公共服务
- ArcGIS for JS 离线部署
- arcgis for js开发, 根据给定的经纬度在地图上进行标注
- arcgis api for flex之五、flex对java自定义对象转换详解
- 扩展ArcGIS API for Silverlight/WPF 中的TextSymbol支持角度标注
- ArcGIS Api for Js基础