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;
}
java前端vml_在Web中使用JavaScript和VML实现WebGIS中的测距相关推荐
- 解决了java+matlab混编+web(jsp)调用Matlab,网页中显示Figure,详细实例
例子简介 网上java+matlab混编的挺多,大多数实例也都能实现出来,但是将matlab生成出来Figure显示在jsp页面中并配合WebFigure实现的例子却很少,所以我将自己的尝试结果详细的 ...
- [转] ASP.NET中使用javascript
1.使用Page.ClientScript.RegisterClientScriptBlock 使用 Page.ClientScript.RegisterClientScriptBlock可以防止ja ...
- 在Chrome 中调试Javascript
在前面的两篇文章中我们讲了如何在IE中调试Javascript和在Visual Studio中调试Javascript,在本篇内容中,我们讲一下如何在谷歌 Chrome中调试Javascript. C ...
- 如何在appweb中使用javascript
在appweb中使用javascript和在其它服务器中使用时类似,这里简单记录,方便以后查看 这里的工程是基于博客http://blog.csdn.net/xiaominthere/article/ ...
- CAD网页Web端显示开发为什么要以WebGIS的思路来开发?
背景 在之前的博文CAD图DWG解析WebGIS可视化技术分析总结中讲解了如何把CAD的DWG格式的图纸Web可视化的方案.博文发布后,受到不少同行们的关注,也有不少咨询一些专业问题,其中大家可能疑惑 ...
- Web前端中的JavaScript语言基础
文章目录 JavaScript主要特点 JavaScript使用形式 行内JavaScript脚本 内部JavaScript脚本的使用 外部JavaScript脚本 基本语法 标识符 关键字 数据类型 ...
- 《单页Web应用:JavaScript从前端到后端》——1.4 小结
本节书摘来自异步社区<单页Web应用:JavaScript从前端到后端>一书中的第1章,第1.4节,作者:[美]Michael S. Mikowski , Josh C. Powell著, ...
- web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 (绿色植物网站设计)
HTML5期末大作业:绿色植物网站设计--绿色多肉盆栽植物养殖网页(6页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 1.临近 ...
- HTML5期末大作业:汽车主题网页设计——21 汽车租赁(47页) HTML+CSS+JavaScript web前端期末大作业 html+css+javascript网页设计实例 企业网站制作
HTML5期末大作业:汽车主题网页设计--21 汽车租赁(47页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 大学生毕设网页设 ...
- web期末网站设计大作业:鲜花网站设计——鲜花礼品在线购物网站设计(21页) HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作
HTML5期末大作业:鲜花网站设计--鲜花礼品在线购物网站设计(21页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设 ...
最新文章
- nagios监控+pnp4出图
- linux makefile 只能使用Tab键进行文本缩进
- 40.公约数和公倍数
- python可选参数位置_每个位置参数的可选参数
- linux命令拉取windows的文件,find命令、文件名后缀以及Linux和Windows互传文件(示例代码)...
- html链接外部css样式表,CSS外部样式表是什么?
- 银河麒麟V10共享文件夹内无法创建wps文件的解决方法
- 常用符号计算机输入法,九种常用输入法特殊符号功能揭密输入法 -电脑资料
- 2022全新二开影视源码app源码完整版
- matlab小波分解图像,MATLAB小波图像分解
- NJUPT【电工电子基础实验】
- excel熵值法计算权重_Pointer分享:评价得分计算—确立权重的方法
- Linux Debian10 如何安装jemalloc 以及 Newer version of jemalloc required 问题
- 数学分析 - 多元函数的微分学
- python卡方拟合性检验_卡方检验
- Android多语言支持二
- mysql的索引缺点_Sqlite数据库中索引的使用、索引的优缺点
- 豪斯曼检验matlab,豪斯曼检验、空间面板模型选择等问题
- SSIS - Excel Destination无法接受大于255个字符长度的字符字段(转载)
- 蓝桥杯-填空题Ctrl+F