Move the cursor over the status bar to display the map coordinates

Task Description
When the mouse moves on the map, a series of mousemove events are generated. We can capture the coordinates of the mouse events through javascript scripts on the client, which is based on the screen coordinates of the browser window. If you want to display the map coordinates of the mouse point, you can use either of the following methods: First, you can constantly send AJAX requests to the server, convert the screen coordinates to map coordinates on the server side, and then return to the client side, displayed in the status bar. In this case, there will be a problem, that is, when you drag the mouse, it will keep sending requests, greatly increasing the burden on the server. Of course, we can set the time interval, such as updating the coordinates once in half a second, to balance the visual effect with the server load. The second method is to send an AJAX request every time the MAP status is updated to obtain the maximum and minimum values of X and Y of the current map and save them on the client. When a mousemove event is generated, calculate the map coordinates of the mouse point in real time based on the screen coordinates of the mouse and the four corners of the map (top left, bottom left, top right, and bottom right.
Obviously, the second method is more efficient.
Steps
Step 1: define two global variables to save the coordinates in the upper left corner and lower right corner of the MAP:

 

Code
Var left_top;
Var right_bottom;

Step 2: add an onload event to the page body. The processing function is as follows:

 

Function initShowMapXY (){
Left_top = new EsriPoint ();
Right_bottom = new EsriPoint ();
Var map = EsriControls. maps ["Map0"];
// Add an update listener to the map
Map. addUpdateListener ("showMapXYListener", showMapXYRequest );
ShowMapXYRequest (map );
}

 

In this function, the global variables are initialized first. Then, an update listener is added to the map. This listener is called every time the MAP status is updated. The 7th line of code calls the listener function to obtain the current map coordinates when the page is displayed for the first time. Otherwise, the coordinates are displayed abnormally when the page is displayed for the first time.
Step 3: implement the listener.

 

Code
Function showMapXYRequest (map ){
// Obtain the server URL
Var url = EsriUtils. getServerUrl (map. formId );
// Set Request Parameters
Var params = "showMapXY = showMapXY & formId =" + map. formId + "& mapId =" + map. id + "&"
+ EsriUtils. buildRequestParams (map. formId );

// Send an AJAX request and set the response Handler
Var xmlHttp = EsriUtils. sendAjaxRequest (url, params, true, function () {updateShowMapXYResponse (xmlHttp );});
}

Function updateShowMapXYResponse (xmlHttp ){
If (xmlHttp! = Null & xmlHttp. readyState = 4 & xmlHttp. status = 200 ){
// Get XML response
Var xml = xmlHttp. responseXML;
Left_top.x = xml. getElementsByTagName ("minx"). item (0). firstChild. nodeValue;
Left_top.y = xml. getElementsByTagName ("miny"). item (0). firstChild. nodeValue;
Right_bottom.x = xml. getElementsByTagName ("maxx"). item (0). firstChild. nodeValue;
Right_bottom.y = xml. getElementsByTagName ("maxy"). item (0). firstChild. nodeValue;
}
}

 

In the listener processing function, if the server sends an AJAX request, the server's request processing function is not described in detail here. The processing result is a response in xml format, which contains four pieces of data: <minx>, <miny>, <maxx>, and <maxy>, update the coordinates in the upper left and lower right corner based on the four data.
Finally, implement the processing function of mousemove.

 

Code
Function showMapXYonStatus (event ){
Var mapcell = document. getElementById ("EsriMapCell_Map0 ");
Var bounds = EsriUtils. getElementPageBounds (mapcell );
Var mousePoint = EsriUtils. getXY (event). offset (-bounds. left,-bounds. top );

Var mapx = mousePoint. x;
Var mapy = mousePoint. y;

If (mapx> 0 & mapx <mapcell. offsetWidth & mapy> 0 & mapy <mapcell. offsetHeight ){
Window. status = calculateX (mapx, mapcell. offsetWidth) + "," + calculateY (mapy, mapcell. offsetHeight );
}
}

 

In this function, you must first correct the screen coordinates of the mouse point and move the coordinates to the upper-left corner of the map (the original origin of the coordinates of the mouse point is the upper-left corner of the browser window ). Next, determine the mouse position. If the mouse moves within the MAP range, the coordinates are displayed in the status bar, where calculateX is based on the screen coordinates of the mouse point (Note: At this time, the origin is already in the upper left corner of the map), map width, and the coordinates in the upper left corner and lower right corner of the map to calculate the map coordinates of the mouse point in real time. The same is true for calculateY.

 

Code
Function calculateX (screenX, screenWidth ){
Var mapwidth = right_bottom.x-left_top.x;
Return parseFloat (screenX * mapwidth)/screenWidth) + parseFloat (left_top.x );
}

Original post address: http://bbs.esrichina-bj.cn/ESRI/thread-23832-1-1.html