状态栏动态显示坐标 [adf]

状态栏动态显示坐标

程序说明：
本程序通过html的部分方法，来实现在window.status显示坐标，不用总是返回服务器。
通过这个例子说明还可以有很多 html 的功能移植过来，总返回服务器 毕竟不是一件好事。
使用时需要手工设置MapResourceManager1控件内容。
本程序兼容server和arcims的adf

实现方式：
在ExtentChanged中添加事件，填充网页的四面坐标，填充脚本参数meLeft等，之所以不用html原来的eLeft是因为在adf在客户端生成的axd中包括了这个参数。郁闷！



修改方法：
1.在ExtentChanged中添加填充和参数。

[Copy to clipboard] [ - ]

CODE:

ESRI.ArcGIS.ADF.Web.Geometry.Envelope env = args.NewExtent;
        //起始位置
        Label1.Text = env.YMax.ToString("N") + "|";
        Label1.Text += env.XMax.ToString("N") + "|";
        Label1.Text += env.YMin.ToString("N") + "|";
        Label1.Text += env.XMin.ToString("N") + "|";
        SortedList<string, string> slist = new SortedList<string, string>();
        slist.Add("n", env.YMax.ToString("N"));
        slist.Add("e", env.XMax.ToString("N"));
        slist.Add("s", env.YMin.ToString("N"));
        slist.Add("w", env.XMin.ToString("N"));  
        IEnumerator ide = slist.GetEnumerator();
        //每次范围变化后，填充控件
        foreach (KeyValuePair<string, string> key in slist)
        {
            object[] o = new object[1];
            o[0] = key.Value.ToString();
            ESRI.ArcGIS.ADF.Web.UI.WebControls.CallbackResult crn = new ESRI.ArcGIS.ADF.Web.UI.WebControls.CallbackResult("div", "Label" + key.Key.ToString(), "innercontent", o);
            Map1.CallbackResults.Add(crn);
        }

2.在页面添加脚本引用

[Copy to clipboard] [ - ]

CODE:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="javascript/map.js"></SCRIPT>

3.在页面添加5个div，保存坐标。

[Copy to clipboard] [ - ]

CODE:

<div id="LabelW" style="left: 429px; position: absolute; top: 190px; width: 50px;"></div>
    <div id="LabelS" style="left: 510px; position: absolute; top: 237px; width: 50px;"></div>
    <div id="LabelE" style="left: 587px; position: absolute; top: 187px; width: 50px;"></div>
    <div id="LabelN" style="left: 510px; position: absolute; top: 139px; width: 50px;"></div>
<div style="visibility: hidden">
        <asp:Label ID="Label1" runat="server" Text="Label" Width="414px"></asp:Label>
        </div>

4.在网页结束位置添加脚本参数初始化

[Copy to clipboard] [ - ]

CODE:

    <script language="javascript">
        Init();
    </script>

6.运行

附件

2007-7-31 11:29

1.gif (46.17 KB)
  adf和html对比

2007-7-31 11:29

2.gif (51.88 KB)
  adf和html对比

2007-7-31 11:29

3.gif (15.2 KB)
  运行图
 

2007-7-31 11:35

4.gif (7.61 KB)
 

2007-7-31 11:35
  下载次数: 0

状态栏.rar (5.85 KB)

map.js

[Copy to clipboard] [ - ]

CODE:

var startLeft = -180.0;
var startRight = 180.0;
var startTop = 90.0;
var startBottom = -90.0;
var meLeft = -180.0;
var meRight = 180.0;
var meTop = 90.0;
var meBottom = -90.0;
var xDistance = Math.abs(meRight-meLeft);
var yDistance = Math.abs(meTop-meBottom);
var panX = xDistance * panFactor;
var panY = yDistance * panFactor;
var pixelX = xDistance/iWidth;
var pixelY = yDistance/iHeight;
var mapX = meLeft;
var mapY = meTop;
var mouseX;
var mouseY;
var hspc = 0;
var vspc = 0;
var panFactor = 85/100;
var iWidth = 0;
var iHeight = 0;
var ScaleBarPrecision = 2;
var numDecimals = ScaleBarPrecision;
var mapScaleFactor = xDistance / iWidth;
  
function getXYs() {
var tempStr = "";
var smallStr = "";
var startpos = 0;
var endpos = 0;

xDistance = Math.abs(meRight-meLeft);
yDistance = Math.abs(meTop-meBottom);
xHalf = xDistance / 2;
yHalf = yDistance / 2;
panX = xDistance * panFactor;
panY = yDistance * panFactor;
var sFactor = xDistance / iWidth
    var aspectRatio = iWidth / iHeight;
    var extentRatio = (meRight-meLeft) / (meTop-meBottom);
    if (extentRatio < aspectRatio) sFactor = (meTop-meBottom) / iHeight;
    mapScaleFactor = sFactor;

}
function setEnvelope(){

var _objl = document.getElementById('LabelW');
var _objb = document.getElementById('LabelS');
var _objr = document.getElementById('LabelE');
var _objt = document.getElementById('LabelN');
if (_objl.innerHTML!=""){
  getEnvelope(_objl.innerHTML,_objb.innerHTML,_objr.innerHTML,_objt.innerHTML);
}
}
function getEnvelope(L,B,R,T){
    meLeft = parseFloat(L);
    meRight = parseFloat(R);
    meTop = parseFloat(T);
    meBottom = parseFloat(B);
    //alert(meLeft+'\n'+meBottom+'\n'+meRight+'\n'+meTop);
}
function Init(){
    var _ex = new Array();
    var _obj = document.getElementById('Label1');
    var _str = _obj.innerText;
    _ex = _str.split('|');
    startLeft = parseFloat(_ex[3]);
    startRight = parseFloat(_ex[1]);
    startTop = parseFloat(_ex[0]);
    startBottom = parseFloat(_ex[2]);
    //alert(startLeft+','+startBottom+','+startRight+','+startTop);
    getEnvelope(startLeft,startBottom,startRight,startTop);
    //alert(meLeft+'\n'+meBottom+'\n'+meRight+'\n'+meTop);
    var _objMap = document.getElementById('Map1');
   
    iWidth = _objMap.style.width;
    iHeight = _objMap.style.height;
    iWidth = parseInt(iWidth.replace(/px/g, ""));
    iHeight = parseInt(iHeight.replace(/px/g, ""));
   
    hspc = _objMap.style.left;
    vspc = _objMap.style.top;
    hspc = hspc.replace(/px/g, "");
    vspc = vspc.replace(/px/g, "");
    if (hspc=="") hspc=16;
    if (vspc=="") vspc=70;
   
    getXYs();
    document.onmousemove = getMouse;
   
    //alert(meLeft+'\n'+meBottom+'\n'+meRight+'\n'+meTop+'\n\n'+iWidth+'\n'+iHeight+'\n'+hspc+'\n'+vspc);
}
//=============================================================
function getMapXY(xIn,yIn) {
  mouseX = xIn;
  pixelX = xDistance / iWidth;
  mapX = pixelX * mouseX + meLeft;
  mouseY = iHeight - yIn;
  pixelY = yDistance / iHeight;
  mapY = pixelY * mouseY + meBottom;
  //window.status = meLeft+'|'+meBottom+'|'+meRight+'|'+meTop+'|'+iWidth+'|'+iHeight;
}
function getImageXY(e) {
if (isNav) {
  mouseX=e.pageX;
  mouseY=e.pageY;
} else {
  mouseX=event.clientX + document.body.scrollLeft;
  mouseY=event.clientY + document.body.scrollTop;
}
// subtract offsets from page left and top
// window.status = mouseX+','+mouseY;   
mouseX = mouseX-hspc;
mouseY = mouseY-vspc;
}
function getMouse(e) {
window.status="";
setEnvelope();
getXYs();
getImageXY(e);
mouseStuff();
return false;
}
function mouseStuff() {
getMapXY(mouseX,mouseY);
//window.status = meLeft+'|'+meBottom+'|'+meRight+'|'+meTop+'|'+iWidth+'|'+iHeight;
//window.status = mapX+','+mapY;
var u = Math.pow(10,numDecimals);

var uX = Math.round(mapX * u) / u;
var uY= Math.round(mapY * u) / u;
var mouseString = "Map:" + uX + " , " + uY + " -- " + "   Image:" + mouseX + " , " + mouseY;
mouseString = mouseString + " -- ScaleFactor:" + mapScaleFactor;
window.status = mouseString;
}