(1)相应鼠标的onMouseDown,onMouseMove,onMouseUp三个事件，分别对应handleMouseDown，handleMouseMove，handleMouseUp三个函数。
(2)在onMouseDown中设置状态值，保存开始点坐标：
function handleMouseDown() {
switch(m_tool) {
case "zoomin": // zoom in mode
startX=window.event.clientX;
startY=window.event.clientY;
zooming=true;
break;
}
//记得一定要返回事件的状态
window.event.returnValue=false
}
(3)在onMouseMove中划框
function handleMouseMove(){
switch(m_tool) {
case "zoomin": // zoom in mode
if(zooming==true&&(Math.abs(event.clientX-startX)>drawStockWidth&&Math.abs(event.clientY-startY)>drawStockWidth)){
ZoomBox()
}
break;
case "zoomout": // zoom out mode
parent.postFrame.requestMapForm.action="requestMap.do?tool=zoomout";
parent.postFrame.requestMapForm.submit();
break;
}
window.event.returnValue=false
}
(4)在onMouseUp中取消画框状态
function handleMouseUp(){
switch(m_tool) {
case "zoomin": // zoom in mode
setDownLoadState("");
parent.postFrame.requestMapForm.action="requestMap.do?tool=zoomin";
parent.postFrame.requestMapForm.submit();
stopZoomBox();
break;
case "zoomout": // zoom out mode
setDownLoadState("");
parent.postFrame.requestMapForm.action="requestMap.do?tool=zoomout";
parent.postFrame.requestMapForm.submit();
break;
}
window.event.returnValue=false
}
画框函数
//draw the zoom box
function ZoomBox() {
var newx;
var newy;
if(startX
moveLayer("alphaLayer",startX,startY);
}else if(startXwindow.event.clientY){
moveLayer("alphaLayer",startX,window.event.clientY);
}else if(startX>window.event.clientX&&startY
moveLayer("alphaLayer",window.event.clientX,startY);
}else if(startX>window.event.clientX&&startY>window.event.clientY){
moveLayer("alphaLayer",window.event.clientX,window.event.clientY);
}
setLayerExtent("alphaLayer",Math.abs(window.event.clientX-startX),Math.abs(window.event.clientY-startY))
showLayer("alphaLayer");
}
function stopZoomBox(){
hideLayer("alphaLayer");
zooming=false;
}