ArcGIS Server Java ADF case 13

[Case] Add a pop-up bubble to the map

In this section, we will add a bubble to the map. In many cases, you need to bring some brief information to the map to meet these requirements.

First, let's recall the main content of this chapter. Previously we talked about some common map components of the ADF, and then analyzed in detail the implementation of the map component on the server side and the browser side. Now our bubble function is mainly to expand the map function on the browser side. The first thing we should think of is the Javascript class esrimap. We will pop up a DIV in esrimap, can I simply put the information I need?

Wait, it is very easy to pop up a div on the page, but the user will also operate the map, such as dragging or something, so how can this Div move with the map? Think about 9 again. Should you get the answer? Put this DIV in imagegrid.

Let's implement this function in detail. Let's take a look at the effect first, 10.

Figure 10 bubble effect displayed on the map

On this simple page, we place two buttons. When you click "show Bubbles", a prompt box will pop up on the map, showing the information we want to display to users. When you click "Hide Bubbles, this prompt box will be hidden. In addition, when we drag the map, the bubble will move along with the map.

Here, two JavaScript Functions are encapsulated and bound to The onclick event of the "show Bubbles" and "Hide Bubbles" Buttons respectively.
Let's take a look at the event of the "show Bubbles" button, which will trigger the showpopup function. The operation executed by this function is as follows:
Function showpopup ()

{

VaR popupid = 'divpopup ';

VaR popup = Document. getelementbyid (popupid );

If (popup = NULL)

{

Popup = Document. createelement ('div ');

Popup. ID = popupid;

Popup. innerhtml = "this is the information I want to bring up ";

VaR map = esricontrols. Maps ['map'];

Map. imagegrid. appendchild (popup );

}

VaR style = 'display: block; position: absolute; Z-index: 2 ;';

Style + = 'left: 100; top: 100 ;';

Style + = 'background-image: URL (images/wuyf/popup.png); width: 400px; Height: 200px ;';

Style + = 'background-repeat: No-Repeat ;';

Style + = 'padding: 10px ;';

Esriutils. setelementstyle (popup, style );

}


First, we try to use the getelementbyid () method to obtain whether the bubble Div already exists. If it does not exist, create the DIV and add it to the map. We can see that the process of adding the bubble Div (ID: divpopup) to the map is actually to add this Div to the imagegrid of esrimap, which is mainly through appendchild (popup) this method is implemented.

After adding this Div to imagegrid, you cannot see it. There are other settings below. Otherwise, our bubble Div will be blocked by the map. The main concept here is the Z-index attribute in CSS. This attribute is used to control the stacked order of each sub-element in imagegrid. The Z-index value of the map image in imagegrid is 1, therefore, we need to set a value greater than 1 for the bubble Div. In addition, in the style of the bubble Div, we must also set the DIV visibility through "display: block;", and then set the positioning mode of the DIV through "position: absolute, these are required.

By the way, the setelementstyle () method of esriutils is used to set CSS attributes for the bubble Div. You can directly use obj. style. attributes = value.

Let's take a look at the event of the "Hide Bubbles" button, which is much simpler:
Function hidepopup ()

{

VaR popupid = 'divpopup ';

VaR popup = Document. getelementbyid (popupid );

If (popup! = NULL)

{

Esriutils. setelementstyle (popup, "display: none ;");

}

}

In fact, only one thing is actually done here. It is to set the display style of the bubble Div to "NONE", and the browser will not render the bubble.

In this small case, do you have a deeper understanding of the map component in the ADF, especially the esrimap component in the Javascript script library?