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

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

代碼:

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

代碼:

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)更新的時候都會調(diào)用這個監(jiān)聽器。第7行代碼調(diào)用了監(jiān)聽器函數(shù)，目的就是在頁面初次顯示的時候去獲取當(dāng)前的地圖坐標，否則，頁面初次顯示的時候坐標顯示異常。
? ? 第三步，實現(xiàn)監(jiān)聽器。 復(fù)制內(nèi)容到剪貼板

代碼:

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

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

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

代碼:

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

代碼:

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

總結(jié)

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

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