java前端vml_在Web中使用JavaScript和VML实现WebGIS中的测距

javascript鼠标画线的VML实现:http://www.blogjava.net/zhyiwww/archive/2007/04/05/108774.html

v\:*   {behavior:url(#default#VML);}

onmousedown = 'down(event)'

οnmοuseup='up(event)'

οnmοusemοve='move(event)'

style='top:30px;left:30px;width:800px;height:600px;visibility:visible;border:solid

1px blue;background-color: #FF99FF'

>

/**

* 定义点对象，也就是鼠标的位置的封装

*/

function Point(){

return this;

}

Point.prototype.setX = function(screenX){

};

Point.prototype.setY = function(screenY){

}

/**

* 定义的屏幕点对象

*/

function ScreenPoint(screenX,screenY){

this.screenX = screenX;

this.screenY = screenY;

return this;

}

ScreenPoint.prototype = new Point();

ScreenPoint.prototype.setX = function (screenX){

this.screenX = screenX;

};

ScreenPoint.prototype.setY = function (screenY){

this.screenY = screenY;

};

/**

* 重载toString方法

*/

ScreenPoint.prototype.toString = function(){

return this.screenX.toString() + " ---  " + this.screenY.toString();

//return "-----------";

};

// 你所点过的鼠标位置的数组，是点对象数组

var disPoints = new Array();

// 是否处于鼠标按下状态

var  select = false;

// 记录鼠标按下点的位置 ，默认是(0,0)

var  downX = 0;

var  downY = 0;

// 当前用于画线的层

var lineDiv = document.getElementById("lineDiv");

// 当前你鼠标画的线，在鼠标抬起前的那一条

var line = null;

/**

* 处理鼠标按下事件

*/

function down(event){

//alert(event);

// 取得你选取的最后一个点

var lastPoint = disPoints[disPoints.length - 1];

//alert(lastPoint);

// 判断是否是第一个点

if(lastPoint == null){

// 鼠标按下点屏幕坐标

var mouseX1 = event.clientX -  getDivOffsetLeft();

var mouseY1 = event.clientY -  getDivOffsetTop();

// 记录鼠标按下点的屏幕坐标

downX = mouseX1;

downY = mouseY1;

// 记录第一个点

lastPoint = new ScreenPoint(downX,downY);

disPoints[0] = lastPoint;

//return;

}

// 如果不是第一个点

// 取得当前鼠标点的位置

var mouseX2 = event.clientX -  getDivOffsetLeft();

var mouseY2 = event.clientY -  getDivOffsetTop();

// 定义当前点

var tmpPoint = new ScreenPoint(mouseX2,mouseY2);

// 定义线的ID,用于，取得线的对象

var lineID = "the_line_" + (disPoints.length-1);

// 在当前点，和最后一个点，两点画线

line = drawLine(lineID,lastPoint,tmpPoint);

// 鼠标按下，记录按下的状态

select = true;

}

/**

* 处理鼠标抬起事件

*/

function up(event){

//alert("up");

// 取得鼠标抬起点的坐标，也就是确定点的坐标

var mouseX3 = event.clientX -  getDivOffsetLeft();

var mouseY3 = event.clientY -  getDivOffsetTop();

// 最终确定的点的对象

var currentPoint = new ScreenPoint(mouseX3,mouseY3);

// 把此点放入到线的端点数组里面，这个点，相对于下一次的操作来说，就是最后一个点

disPoints[disPoints.length] = currentPoint;

select = false;

}

/**

* 处理鼠标移动事件

*/

function move(event){

// 是否鼠标按下

if(select){

// 取得当前鼠标的位置坐标

var mouseX2 = event.clientX -  getDivOffsetLeft();

var mouseY2 = event.clientY -  getDivOffsetTop();

// 把线，从最后一个点画到当前位置

line.to = mouseX2 + "," + mouseY2;

}

/*

* 取消事件冒泡，否则不能响应鼠标的抬起事件

*/

window.event.cancelBubble = true;

window.event.returnValue = false;

}

function getDivOffsetLeft(){

var lay1 = document.getElementById("lineDiv");

//var rect = document.getElementById("rect");

return lay1.offsetLeft;

}

function getDivOffsetTop(){

var lay1 = document.getElementById("lineDiv");

//var rect = document.getElementById("rect");

return lay1.offsetTop;

}

/**

* 画线操作

* 用VML 实现

*/

function drawLine(id,startPoint,endPoint){

//alert("start -- ");

var   s="

+     "id="

+     id

+    "   from="

+    "'"

+     startPoint.screenX

+    ","

+     startPoint.screenY

+    "'"

+     "   to="

+     "'"

+     endPoint.screenX

+    ","

+     endPoint.screenY

+    "'"

+    "  style='position:absolute;left:0px;top:0px;'>

";

var  o = document.createElement(s);

// 这个方法，使在特定的位置添加对象，具体使用，请参考其它的资料

document.body.insertAdjacentElement('BeforeEnd',o);

return o;

}