ArcGIS Server Java ADF case 12

Esrimap details

Tip: The content involved in this section is mainly completed by the ADF itself. The analysis is only to better understand the principle and prepare for future extensions.

Esrimap is defined in "/webcontent/JS/esri_map.js". Let's output JavaScript from the map component.CodeStart to understand the work of the ADF in the browser.

The following code is a javascript code output by a simple map (I made some equivalent modifications to some code for ease of reading). "agstest" is the name of my project:





Now let's start to look at the JavaScript code that the Browser executes step by step. In addition to introducing some JavaScript scripts of the ADF, some variable statements at the top and esriinititems at the bottom will be executed first. push ("esrimapinitmap ()") code. Here, the esrimapinitmap () function is added to the esriinititems initialization array. Then, the window is triggered after the page is loaded. the onload event calls the esriinitapp (e) function. At this time, because esrimapinitmap () has been added to esriinititems, this function will be called. Next let's take a closer look at what happened in esrimapinitmap.

First, the first thing is to instantiate an esrimap object. This step has many meanings and will be explained in detail immediately. Second, the ADF will configure the most important data source in the map, as shown in the code above, since we use dynamic map service, the ADF creates an esrimapsourcedynamic (inherited from esrimapsource) object and uses the addmapsource () of esrimap () the method is added to the map. Then, the addimage () method adds the image address of the esrimapsource object. You can see that the image address is a relative path, the following address indicates that the image format used in esrimapsource is MIME data, and the JSESSIONID parameter indicates the ID of the current session:
/Agstest/mimedata; JSESSIONID = 5e13f6727caa0433934a85efa1ab8d49? Wname = esriwebsession & id = map28171097 & uniqueid = 24691856-0

Next, let's go back and take a look at what happened when esrimap was instantiated. All the related operations are encapsulated in the file "esri_map.js, you can open this file to view the details of esrimap instantiation.

First, esrimap is inherited from esricontrol. If you are interested in esricontrol and its related content, you can continue to study it in the ADF JavaScript library. In fact, we should be interested in esrimap mainly in two aspects: first, the placement relationship of Map Images in esrimap; second, esrimap communicates with ArcGIS Server during map operations.

Let's first look at the placement relationship of Map Images in esrimap. The DIV at the outermost layer of esrimap is container, and the default ID is "esrimapcell_map" (in "map. (defined in XSL), which is a container for storing maps. It is generally not used. There are several layers of DIV in the iner: divobject, controldiv, imagegrid, their relationship with container 9 is shown. The map image is placed in imagegrid.

Figure 9 Div of an image placed in esrimap

The following uses a dynamic map as an example to show how esrimap communicates with ArcGIS Server and updates images when a map is dragged. We first find that esrimap contains the following code:
Esricontrols. addpostbacktaghandler ("map", esricontrols. Maps [self. ID]. updateasync );

Esricontrols is defined in "/webcontent/JS/esri_core.js". It is responsible for managing all the DHTML components of the ADF on the current page. The above Code adds a callback function updateasync to the esrimap object, which will be called when the page receives an Ajax response and the response contains a "map" tag.

When we drag a map, the client's JavaScript will send the desired MAP range to the server (For details, refer to the esrimappan and esrimapcontinuouspan functions). After the server completes processing, it will return the following response:



The updateasync function is called to update the map view by updating the attributes of a series of divs and other objects related to esrimap on the page. For details about the update, you can study the updateasync function in detail. I will not go into details here.

from the server object and client object of the map component, we have basically understood the working principle of map. The remaining common components of the ADF are TOC, toolbar, and overview. Although each component has its own characteristics, the general idea and principle are also like this, if you are interested, you can do more in-depth research.