[转] ArcGIS自定义工具完全教程 1/2
一、Client -- 页面上的Tag ：
<ags:tool
clientAction="EsriMapRectangle"
serverAction="com.esri.adf.web.faces.event.ZoomInToolAction"
clientPostBack="true"
/>
二、Client -- clientAction
clientAction是指一个 javascript 类，这个类必须继承 EsriMapToolItem，并要重载几个函数：
附件1
1. 首先是：Object.inheritsFrom(Object parent)，这是Esri添加到所有 js 对象上的函数扩展，用于继承父类
2. EsriMapToolItem的函数包括：
EsriMapToolItem 的构造函数：
EsriMapToolItem(String id, //<a:tool 的id属性
String toolName, //工具名称
EsriAction action, //工具应进行的操作
boolean isMarker) //
其中 EsriAction 指定工具按钮按下后应进行的客户端地图操作类 (Action)：如点选（EsriDrawPointAction）、框选（ EsriDrawRectangleAction）等。
EsriAction有函数：
void activate() 用来注册鼠标、键盘事件引发的函数，参数随EsriAction子类不同而不同
void deactivate() 取消事件注册
以下的继承函数可能要重写：
void activate() 指工具按钮按下后引发的事件处理；
这个函数已由EsriMapToolItem实现，除非定制，一般不重写。
void deactivate() 指选中别的按钮时，本按钮非活动时引发的事件处理 ；
这个函数已由EsriMapToolItem实现，除非定制，一般不重写。
void postAction() 地图操作进行完后激发，一般在这里向服务器端提交地图操作参数；
这个函数一般被注册在实现类自带的EsriAction.activate参数中（由EsriMapToolItem实现）；
3. 从EsriMapToolItem 的继承的属性：
EsriAction action 本MapToolItem所定义的EsriAction
bool isActive 本MapToolItem是否处于活动状态
EsriControl control 本MapToolItem所作用的控件，如地图（map）
4. 可以在页面添加如下代码：
</head>
<script type="text/javascript">
function MyClientAction(id,toolName,isMarker){
this.inheritsFrom(new EsriMapToolItem(id,toolName,new EsriDrawPointAction(),isMarker));
this.activate=function(){
if(this.action){ //如果action存在，注册this.postAction作为点击地图后的回调函数
this.action.activate(this.element,this.postAction);
}
this.isActive=true;
alert("activated");
}
this.deactivate=function(){
if(this.action){
this.action.deactivate();
}
this.isActive=false;
alert("deactivated");
}
this.postAction=function(point){
alert("postAction x="+point.x+";"+point.y);
}
}
</script>
<body ...
。。。
<a:tool id="mytool" defaultImage="images/tasks/maptools/point.gif"
clientAction="MyClientAction"
serverAction="com.brsc.MyServerAction"
clientPostBack="false"
/>
-------------------------------------------------------
编译后的 javascript 大致如下：
....
var mytool = new MyClientAction("mytool", "", false);
mytool.clientPostBack = true;
mytool.defaultImage = "images/tasks/maptools/point.gif";
mytool.isDisabled = false;
mytool.showLoading = true;
Toolbar.addToolItem(mytool);
....
三、client -- postAction中发送请求与回调函数处理返回参数
函数 void postAction()中提交获得参数，首先要将参数写入<h:form id="frmMap">：
void addFormElement(String formId, String name, String value)
然后提交到服务器端：
void EsriUtils.submitForm(String formId //
[, boolean async, //<a:tool 中的clientPostBack属性，
//如果是 false整个form将提交，整个页面刷新；
//如果为true则使用Ajax传输数据方法，整个页面不刷新
function callback]) //接受Servlet返回值的callback函数（注意此处仅写回调函数名称）
<a:tool 中的clientPostBack属性设为 false 会刷新整个页面，即地图也会跟着刷新，否则只是传回数据，地图不动
要想服务器端有响应，postAction中必须添加下列格式数据：
var map=self.control;
EsriUtils.addFormElement(map.formId,map.id,map.id);
EsriUtils.addFormElement(map.formId,map.id+"_mode",self.id);
...//加入自定义数据
EsriUtils.submitForm(...)
实例如下：
function MyClientAction(id,toolName,isMarker){
var self=this;
this.inheritsFrom(new EsriMapToolItem(id,toolName,new EsriDrawPointAction(),isMarker));
this.activate=function(){
if(this.action){
this.action.activate(this.element,this.postAction);
}
this.isActive=true;
}
this.deactivate=function(){
if(this.action){
this.action.deactivate();
}
this.isActive=false;
}
this.update=function(){self=this;}
this.postAction=function(point){
self.update();
var map=self.control;
EsriUtils.addFormElement(map.formId,map.id,map.id);
EsriUtils.addFormElement(map.formId,map.id+"_mode",self.id);
EsriUtils.addFormElement(map.formId,"x",point.x);
EsriUtils.addFormElement(map.formId,"y",point.y);
EsriUtils.submitForm(map.formId,self.clientPostBack,mycallback);
}
}
function mycallback(xh){
if(xh.readyState==4){
alert(xh.responseText);
}
}
</script>
在发出请求的同时，如果想在界面上画图，postAction中得到map后，EsriMap含有一个属性
EsriGraphicsElement graphics
可用来做图。
