隨鼠標移動在狀態(tài)欄顯示地圖坐標

任務描述
? ? 鼠標在地圖上移動時，會產生一系列mousemove事件，我們可以在客戶端通過javascript腳本捕捉到鼠標事件的坐標，這個坐標是基于瀏覽器窗口的屏幕坐標。如果要顯示鼠標點所在的地圖坐標，有兩種方法：第一，不停地向服務器發(fā)送AJAX請求，在服務器端將屏幕坐標轉換成地圖坐標，然后返回客戶端，顯示在狀態(tài)欄。這樣的話會有一個問題，就是鼠標拖動的時候會一直不停地發(fā)送請求，極大地增加了服務器的負擔。當然，我們可以通過設置時間間隔，比如半秒鐘更新一次坐標，達到視覺效果與服務器負擔之間的均衡。第二種方法就是在每次地圖狀態(tài)更新時，發(fā)送一個AJAX請求，獲取當前地圖的X，Y最大、最小值，保存在客戶端，當產生mousemove事件時，根據(jù)鼠標的屏幕坐標和地圖的四角（左上、左下、右上、右下）坐標，實時地計算鼠標點的地圖坐標。
? ? 顯而易見，第二種方法效率更高。
實現(xiàn)步驟
? ? 第一步，定義兩個全局變量，用來保存地圖的左上角和右下角坐標： 復制內容到剪貼板

代碼:

var left_top;
var right_bottom;? ?
? ? 第二步，給頁面的body添加一個onload事件，處理函數(shù)如下： 復制內容到剪貼板

代碼:

function initShowMapXY(){
? ? left_top = new EsriPoint();
? ? right_bottom = new EsriPoint();
? ? var map = EsriControls.maps["Map0"];
? ? //給地圖添加一個update監(jiān)聽器
? ? map.addUpdateListener("showMapXYListener",showMapXYRequest);
? ? showMapXYRequest(map);
}
? ? 在這個函數(shù)中，先對全局變量進行了初始化；接著，給地圖添加了一個update監(jiān)聽器，這樣，每次地圖狀態(tài)更新的時候都會調用這個監(jiān)聽器。第7行代碼調用了監(jiān)聽器函數(shù)，目的就是在頁面初次顯示的時候去獲取當前的地圖坐標，否則，頁面初次顯示的時候坐標顯示異常。
? ? 第三步，實現(xiàn)監(jiān)聽器。 復制內容到剪貼板

代碼:

function showMapXYRequest(map) {
? ???//獲取服務器URL
? ???var url = EsriUtils.getServerUrl(map.formId);
? ???//設置請求參數(shù)
? ???var params = "showMapXY=showMapXY&formId="+ map.formId + "&mapId=" + map.id + "&"
+ EsriUtils.buildRequestParams(map.formId);

? ???//發(fā)送AJAX請求并設置響應處理函數(shù)
? ???var xmlHttp = EsriUtils.sendAjaxRequest(url, params, true, function() { updateShowMapXYResponse(xmlHttp);});
}

function updateShowMapXYResponse(xmlHttp){
? ???if (xmlHttp!== null && xmlHttp.readyState == 4 && xmlHttp.status == 200) {
? ?? ???//獲取XML響應
? ?? ???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;
? ? }
}
? ? 監(jiān)聽器處理函數(shù)中想服務器發(fā)送了一個AJAX請求，服務器端的請求處理函數(shù)就不在這里詳細闡述了，處理結果是xml格式的響應，包含四個數(shù)據(jù)：<minx>,<miny>,<maxx>以及<maxy>，根據(jù)這四個數(shù)據(jù)更新左上角和右下角的坐標。
最后，實現(xiàn)mousemove的處理函數(shù)。 復制內容到剪貼板

代碼:

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);
? ? }
}
? ? 在這個函數(shù)中，先要對鼠標點的屏幕坐標進行校正，將坐標原點移到地圖的左上角（原來鼠標點坐標的原點是瀏覽器窗口的左上角）。接下來判斷鼠標位置，如果鼠標是在地圖范圍內移動，就將坐標顯示在狀態(tài)欄，其中calculateX就是根據(jù)鼠標點的屏幕坐標（注意：此時原點已經是地圖左上角）、地圖的寬度以及地圖的左上角和右下角坐標來實時地計算鼠標點的地圖坐標。calculateY也是一樣。 復制內容到剪貼板

代碼:

function calculateX(screenX,screenWidth){
? ? var mapwidth = right_bottom.x - left_top.x;
? ? return parseFloat((screenX*mapwidth)/screenWidth) + parseFloat(left_top.x);
} ? ? ? 佩服強人。

總結

以上是生活随笔為你收集整理的摘来的 esri 的 js 的 一些东西 来自ESRI中国社区 by xiaoyaohu的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。