1. Define a maptoolaction to implement the click function.
Obtain the basic information of the vertex to be displayed in maptoolaction and save it to webcontext.
// Obtain the click point and save the information as 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 is the Bean class for saving vertex information.
Has the following attributes
Private double _ screenx;
Private double _ screeny;
Private
Double _ MapX;
Private double _ mapy;
3.
Implement ajaxrenderer.
Obtain the basic information saved in webcontext in ajaxrenderer and add it to XML.
Public void
Renderajaxresponse (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. register the implemented ajaxrenderer in the ajax-renderers.xml
After registration, the system automatically calls the API.
<List-entries>
.................................
<Value >#{ ajaxgpasynctaskresultsrenderer} </value>
<Value >#{ myajaxrender} </value> <---------
The self-implemented ajaxrenderer is defined as bean below. The two names must be the same
</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. Client Design
5.1 plus callback
Esricontrols. addpostbacktaghandler ("pointinfo ",
Showpointinfo );
// Note that pointinfo corresponds to the pointinfo created in response
5.2 displayBubble
Function showpointinfo (XML,
Eventsources ){
// Obtain the vertex information.
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 ");
// Construct a bubble Div
VaR content = "<Div id = 'balontip '>
"+
"<Div id = 'tipclose'
Onclick = 'hideballoontip (); '> </div> "+
"<Div
Id = 'frame1'> </div> "+
"<Div
Id = 'frame2'> "+
"<Div
Id = 'tidtitle'> </div> "+
"<Div
Id = 'tidcontent'> "+
"<Ul
Id = 'tipcontent _ ul'> "+
"Screenx:" + screenx + "<br>" +
"Screeny:" + screeny + "<br>" +
"MapX:" + MapX + "<br>" +
"Mapy:" + mapy +
"</Ul>" +
"</Div>" +
"</Div>" +
"<Div
Id = 'frame3'> </div> "+
"</Div>"
// Display the bubble Div
VaR style =
"Display: block; cursor: default; position: absolute; left:" + screenx + "PX; top:" + screeny + "40px; width: 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); // Note: add it to divobject; otherwise, the close button does not work.
Esriutils. setelementstyle (popup,
Style );
} Else {
Popup. innerhtml = content;
Esriutils. setelementstyle (popup,
Style );
}
}
6. Hide the bubble content when other tools click
Add the following content under esrimap. Prototype. setcurrenttoolitem in esri_map.js:
If ("identify "! = Toolitem. ID ){
VaR
Popup = Document. getelementbyid ('divpopup ');
If (popup! = NULL)
Popup. style. Display = 'none ';
}
7. transparent bubble CSS
# Frame1 {
Background: transparent
URL (../images/balloontip/info_frame_left.png)
No-Repeat;
Width: 282px;
Height: 37px;
}
# Frame2 {
Background: transparent
URL (../images/balloontip/info_frame_02.png)
Repeat-y;
Width: 282px;
}
# Frame3 {
Background: transparent
URL (../images/balloontip/info_frame_03.png)
No-Repeat;
Width: 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;
Width: 14px;
Height: 14px;
}
# Tipclose: hover {
Background:
URL (../images/balloontip/info_frame_close_j.gif) No-repeat Center
Center;
Width: 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;
}