1。定义做个MapToolAction实现点击功能。
在MapToolAction中得到要展示的点的基本信息,保存到webcontext中。
// 得到click点,并将信息存储为SimplePointInfo
_context =
event.getWebContext();
WebMap map =
_context.getWebMap();
WebPoint screenPoint = (WebPoint)
event.getWebGeometry();
WebPoint mapPoint = (WebPoint)
event.getWebGeometry().toMapGeometry(map);
SimplePointInfo
pointInfo = new
SimplePointInfo();
pointInfo.setScreenX(screenPoint.getX());
pointInfo.setScreenY(screenPoint.getY());
pointInfo.setMapX(mapPoint.getX());
pointInfo.setMapY(mapPoint.getY());
_context.setAttribute("pointInfo",
pointInfo);
2.SimplePointInfo 为保存点信息的bean类
具备下面属性
private double _screenX;
private double _screenY;
private
double _mapX;
private double _mapY;
3.
实现AJAXRenderer。
在AJAXRenderer中得到webcontext中保存的基本信息,在添加到xml中。
public void
renderAjaxResponse(FacesContext facesContext,UIComponent component, Object
state, boolean isEventSource,Element parentElement) {
try
{
WebContext context = ((MapControl)
component).getWebMap().getWebContext();
SimplePointInfo info =
(SimplePointInfo)
context.getAttribute("pointInfo");
context.setAttribute("pointInfo",
null);
System.out.println("screenX:"+info.getScreenX());
if(info!=null){
Element pointInfo= XMLUtil.createElement("pointInfo", null,
parentElement);
Element point=
XMLUtil.createElement("point", "", pointInfo);
point.setAttribute("screenX",String.valueOf(info.getScreenX()));
point.setAttribute("screenY",String.valueOf(info.getScreenY()));
point.setAttribute("mapX",String.valueOf(info.getMapX()));
point.setAttribute("mapY",String.valueOf(info.getMapY()));
}
} catch (Exception e) {
}
}
}
4.把实现的AJAXRenderer在ajax-renderers.xml注册
注册后,系统会自动调用,不需要人为调用了。
<list-entries>
.................................
<value>#{ajaxGpAsyncTaskResultsRenderer}</value>
<value>#{MyAjaxRender}</value> <---------
自己实现的AJAXRenderer,下面是bean的定义。两个名称要一样
</list-entries>
<managed-bean>
<managed-bean-name>MyAjaxRender</managed-bean-name>
<managed-bean-class>com.rasa.MyAjaxRender</managed-bean-class>
<managed-bean-scope>none</managed-bean-scope>
</managed-bean>
..............................
5.客户端设计
5.1加上回调
EsriControls.addPostBackTagHandler("pointInfo",
showPointInfo);
//注意pointInfo对应于你上面中建立在response下的pointInfo
5.2显示气泡
function showPointInfo(xml,
eventSources) {
//得到点信息
var point =
xml.getElementsByTagName("point")[0];
var screenX =
point.getAttribute("screenX");
var screenY =
point.getAttribute("screenY");
var mapX =
point.getAttribute("mapX");
var mapY = point.getAttribute("mapY");
//构造气泡div
var content = "<div id='balloontip'>
"+
"<div id='tipclose'
onclick='hideBalloonTip();'></div>"+
"<div
id='frame1'></div>"+
"<div
id='frame2'>"+
"<div
id='tiptitle'></div>"+
"<div
id='tipcontent'>"+
"<ul
id='tipcontent_ul'>"+
"screenX:"+screenX+"<br>"+
"screenY:"+screenY+"<br>"+
"mapX:"+mapX+"<br>"+
"mapY:"+mapY+
"</ul>"+
"</div>"+
"</div>"+
"<div
id='frame3'></div>"+
"</div>"
//显示气泡div
var style =
"display:block;cursor:default;position:absolute;left:"+screenX+"px;top:"+screenY+"40px;282px;z-index:100;";
var
map = EsriControls.maps['map1'];
var popUpId = 'divPopUp';
var
popUp = document.getElementById(popUpId);
if( popUp==null )
{
popUp = document.createElement('div');
popUp.id =
popUpId;
popUp.innerHTML=content;
map.divObject.appendChild(popUp); //注意:要添加到divObject下,否则关闭按钮不起作用
EsriUtils.setElementStyle(popUp,
style);
}else{
popUp.innerHTML=content;
EsriUtils.setElementStyle(popUp,
style);
}
}
6.其他tool点击时隐藏气泡内容
在esri_map.js内的EsriMap.prototype.setCurrentToolItem下添加
if("Identify"!=toolItem.id){
var
popUp = document.getElementById('divPopUp');
if(popUp!=null)
popUp.style.display='none';
}
7.透明气泡的css
#frame1{
background:transparent
url(../images/balloontip/info_frame_left.png)
no-repeat;
282px;
height:37px;
}
#frame2{
background:transparent
url(../images/balloontip/info_frame_02.png)
repeat-y;
282px;
}
#frame3{
background:transparent
url(../images/balloontip/info_frame_03.png)
no-repeat;
282px;
height:13px;
}
#tipcontent{
padding-bottom:5px;
}
#tiptitle{
font-family:
"宋体";
font-size: 9pt;
font-style: normal;
font-weight:
bold;
font-variant: normal;
color:
#2d4291;
text-indent:10px;
background:
url(../images/balloontip/info_frame_line.gif) no-repeat bottom
center;
padding-bottom:5px;
margin:0px;
}
#tipclose{
cursor:pointer;
background:
url(../images/balloontip/info_frame_close.gif) no-repeat center
center;
top:34px;
left:251px;
position:absolute;
z-index:101;
14px;
height:14px;
}
#tipclose:hover{
background:
url(../images/balloontip/info_frame_close_J.gif) no-repeat center
center;
14px;
height:14px;
}
#tipcontent_ul{
padding:5px 10px 5px
13px;
margin:0;
}
#tipcontent_ul li{
font:normal 9pt
"宋体";
margin:0px;
padding:0px;
line-height:20px;
text-align:left;
list-style-type:none;
}