arcims开发经验总结(2) (地图放大缩小、鹰眼实现逻辑)
放大缩小：
var x1,y2; //起点 坐标
var y1 ,x2; //对角点坐标
//开始拉框。由鼠标点击触发
function startZoomBox(e) {
//把地图所在的<DIV>移动到初始位置。
moveLayer("theMap",hspc,vspc);
//得到开始的屏幕坐标（相对与地图的哦） mouseX mouseY
getImageXY(e);
//判断是否在地图中点击 地图宽度 iWidth 地图高度 iHeight
if ((mouseX<iWidth) && (mouseY<iHeight)) {
if (zooming) {//zooming表示正在放大中
stopZoomBox(e);//停止拉框
} else {
x1=mouseX;//开始点 x
y1=mouseY//停止点 y
x2=x1+1; //表示你画的框的宽度
y2=y1+1;
zleft=x1;//你画的框 左边 的位置
ztop=y1;//你画的框 上边 的位置
zbottom=y1;//你画的框 下边 的位置
zright=x1//你画的框 右边 的位置
boxIt(x1,y1,x2,y2);//画红框，dhtml实现
zooming=true; //表示正在放大中
}
}
return false;
}
//拉框中，移动鼠标
function mouseStuff() {
x2=mouseX; //得到当前鼠标坐标
y2=mouseY; //得到当前鼠标坐标
if (x1>x2) {//判断起点 终点 x坐标大小，重新给zright zleft附值
zright=x1;
zleft=x2;
} else {
zleft=x1;
zright=x2;
}
if (y1>y2) {//判断起点 终点 y zbottom ztop 附值
zbottom=y1;
ztop=y2;
} else {
ztop=y1;
zbottom=y2;
}
//如果起点 终点不是一个点时，画框
if ((x1 != x2) && (y1 != y2)) {
boxIt(zleft,ztop,zright,zbottom);
}
}
//停止拉框，鼠标释放触发事件
function stopZoomBox(e) {
zooming=false;//表示放大完成
//当我们拉框太小，小于线的宽度时，就当作点放大。
if ((zright <zleft+2) && (zbottom < ztop+2)) {
zoomin(e);
} else {//拉框放大
var tempLeft=lastLeft;
var tempRight=lastRight;
var tempTop=lastTop;
var tempBottom=lastBottom;
saveLastExtent();
//得到 横向 每个象素代表的 实际距离 xDistance 表示当前地图比例时，横向距离。
//其实是 每个象素代表的 经纬度
pixelX = xDistance / iWidth;
//拉框上边 和 地图底边的距离 屏幕距离
//为什么要定义这个呢？？
//屏幕坐标 左上角为坐标原点
//地理坐标 我们当成 左下角为坐标原点
var theY = iHeight - ztop;
//得到 纵向 每个象素代表的 实际距离 yDistance 表示当前地图比例时，纵向距离。
pixelY = yDistance / iHeight;
//大家仔细看下面代码， 得到我们操作后，上下左右 的（距离）经纬度
//结果上边经度 = 每个象素代表的经度 * /拉框上边和地图底边的距离（屏幕距离）+ 操作以前的底边经度
//在这里eTop等是地理坐标 zTop等是屏幕坐标
eTop = pixelY * theY + eBottom;
eRight = pixelX * zright + eLeft;
eLeft = pixelX * zleft + eLeft;
theY = iHeight - zbottom;
pixelY = yDistance / iHeight;
eBottom = pixelY * theY + eBottom;
//得到 eTop eRight eLeft eBottom 四个经纬度值，请求ims服务器，返回合适的地图。
sendMapXML();
}
return true;
}
鹰眼实现：
鹰眼实现方法：根据arcIMS代码说明，掌握逻辑后，mapinfo,mapx,mo等实现就容易了。
开始前，大家首先要对arcims中，如何记录地图位置熟悉。
抓一副全图,存成gif文件,作为鹰眼图底图。
var fullOVLeft = 116; //全图时，地图最左边代表的经度 当你用其他坐标体系的坐标时，这个值不同。一般，我们熟悉经纬度。
var fullOVRight = 117; //全图时，地图最右边代表的经度
var fullOVTop = 40; //全图时，地图最上边代表的经度
var fullOVBottom = 39.6; //全图时，地图最下边代表的经度
//点击鹰眼， 入口参数是 屏幕 鼠标的坐标
function ovMapClick(x,y) {
var ovWidth = 150; //我们鹰眼图的宽度 单位px,是屏幕单位
var ovHeight = 100; //鹰眼图的高度 单位px,是屏幕单位
//下面两行代码得到，为什么要两个呢。可能我们显示的时候，把服务器返回的图片压缩了。
//每 px单位的屏幕宽度 代表的 经度距离
var ovXincre = fullOVWidth / ovWidth;
//每 px单位的屏幕宽度 代表的 纬度距离
var ovYincre = fullOVHeight / ovHeight;
var ovX = x;
var ovY = ovHeight - y;//注意，屏幕 和 地理 坐标原点不同。在其他文章中提到过。
//下面两行代码我们得到了 鼠标点击位置代表的 地理位置。（经纬度）
var ovmapX = ovX * ovXincre + fullOVLeft;
var ovmapY = ovY * ovYincre + fullOVBottom;
//arcims带的，当我们想看上一操作的地图时，这些保存的东西就有用咯。
saveLastExtent();
//下面代码表示 改变地图的中心点，但是room 值不变。arcIMS中，是以下实现的。在
mapxtreme中，一个函数就OK了。
//熟悉arcIMS的，以下代码可能明白。
eLeft = ovmapX - xHalf;
eRight = ovmapX + xHalf;
eTop = ovmapY + yHalf;
eBottom = ovmapY - yHalf;
sendMapXML();
}
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=133749
var x1,y2; //起点 坐标
var y1 ,x2; //对角点坐标
//开始拉框。由鼠标点击触发
function startZoomBox(e) {
//把地图所在的<DIV>移动到初始位置。
moveLayer("theMap",hspc,vspc);
//得到开始的屏幕坐标（相对与地图的哦） mouseX mouseY
getImageXY(e);
//判断是否在地图中点击 地图宽度 iWidth 地图高度 iHeight
if ((mouseX<iWidth) && (mouseY<iHeight)) {
if (zooming) {//zooming表示正在放大中
stopZoomBox(e);//停止拉框
} else {
x1=mouseX;//开始点 x
y1=mouseY//停止点 y
x2=x1+1; //表示你画的框的宽度
y2=y1+1;
zleft=x1;//你画的框 左边 的位置
ztop=y1;//你画的框 上边 的位置
zbottom=y1;//你画的框 下边 的位置
zright=x1//你画的框 右边 的位置
boxIt(x1,y1,x2,y2);//画红框，dhtml实现
zooming=true; //表示正在放大中
}
}
return false;
}
//拉框中，移动鼠标
function mouseStuff() {
x2=mouseX; //得到当前鼠标坐标
y2=mouseY; //得到当前鼠标坐标
if (x1>x2) {//判断起点 终点 x坐标大小，重新给zright zleft附值
zright=x1;
zleft=x2;
} else {
zleft=x1;
zright=x2;
}
if (y1>y2) {//判断起点 终点 y zbottom ztop 附值
zbottom=y1;
ztop=y2;
} else {
ztop=y1;
zbottom=y2;
}
//如果起点 终点不是一个点时，画框
if ((x1 != x2) && (y1 != y2)) {
boxIt(zleft,ztop,zright,zbottom);
}
}
//停止拉框，鼠标释放触发事件
function stopZoomBox(e) {
zooming=false;//表示放大完成
//当我们拉框太小，小于线的宽度时，就当作点放大。
if ((zright <zleft+2) && (zbottom < ztop+2)) {
zoomin(e);
} else {//拉框放大
var tempLeft=lastLeft;
var tempRight=lastRight;
var tempTop=lastTop;
var tempBottom=lastBottom;
saveLastExtent();
//得到 横向 每个象素代表的 实际距离 xDistance 表示当前地图比例时，横向距离。
//其实是 每个象素代表的 经纬度
pixelX = xDistance / iWidth;
//拉框上边 和 地图底边的距离 屏幕距离
//为什么要定义这个呢？？
//屏幕坐标 左上角为坐标原点
//地理坐标 我们当成 左下角为坐标原点
var theY = iHeight - ztop;
//得到 纵向 每个象素代表的 实际距离 yDistance 表示当前地图比例时，纵向距离。
pixelY = yDistance / iHeight;
//大家仔细看下面代码， 得到我们操作后，上下左右 的（距离）经纬度
//结果上边经度 = 每个象素代表的经度 * /拉框上边和地图底边的距离（屏幕距离）+ 操作以前的底边经度
//在这里eTop等是地理坐标 zTop等是屏幕坐标
eTop = pixelY * theY + eBottom;
eRight = pixelX * zright + eLeft;
eLeft = pixelX * zleft + eLeft;
theY = iHeight - zbottom;
pixelY = yDistance / iHeight;
eBottom = pixelY * theY + eBottom;
//得到 eTop eRight eLeft eBottom 四个经纬度值，请求ims服务器，返回合适的地图。
sendMapXML();
}
return true;
}
鹰眼实现：
鹰眼实现方法：根据arcIMS代码说明，掌握逻辑后，mapinfo,mapx,mo等实现就容易了。
开始前，大家首先要对arcims中，如何记录地图位置熟悉。
抓一副全图,存成gif文件,作为鹰眼图底图。
var fullOVLeft = 116; //全图时，地图最左边代表的经度 当你用其他坐标体系的坐标时，这个值不同。一般，我们熟悉经纬度。
var fullOVRight = 117; //全图时，地图最右边代表的经度
var fullOVTop = 40; //全图时，地图最上边代表的经度
var fullOVBottom = 39.6; //全图时，地图最下边代表的经度
//点击鹰眼， 入口参数是 屏幕 鼠标的坐标
function ovMapClick(x,y) {
var ovWidth = 150; //我们鹰眼图的宽度 单位px,是屏幕单位
var ovHeight = 100; //鹰眼图的高度 单位px,是屏幕单位
//下面两行代码得到，为什么要两个呢。可能我们显示的时候，把服务器返回的图片压缩了。
//每 px单位的屏幕宽度 代表的 经度距离
var ovXincre = fullOVWidth / ovWidth;
//每 px单位的屏幕宽度 代表的 纬度距离
var ovYincre = fullOVHeight / ovHeight;
var ovX = x;
var ovY = ovHeight - y;//注意，屏幕 和 地理 坐标原点不同。在其他文章中提到过。
//下面两行代码我们得到了 鼠标点击位置代表的 地理位置。（经纬度）
var ovmapX = ovX * ovXincre + fullOVLeft;
var ovmapY = ovY * ovYincre + fullOVBottom;
//arcims带的，当我们想看上一操作的地图时，这些保存的东西就有用咯。
saveLastExtent();
//下面代码表示 改变地图的中心点，但是room 值不变。arcIMS中，是以下实现的。在
mapxtreme中，一个函数就OK了。
//熟悉arcIMS的，以下代码可能明白。
eLeft = ovmapX - xHalf;
eRight = ovmapX + xHalf;
eTop = ovmapY + yHalf;
eBottom = ovmapY - yHalf;
sendMapXML();
}
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=133749
