使用VML在地图上绘制轨迹

在WebGIS项目中，我们可能经常碰到一些需要在地图上进行动态绘制一些轨迹路线，如GPS轨迹,公交线路路线,流量走向等。而VML是最简单的实现方式，VML的全称是Vector Markup Language(矢量可标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量，这在制作地图上有很大用途。

    实际应用中我们经常会是这样实施，先获得轨迹的地理坐标，然后通过接口转换成屏幕坐标(如AGS里面的ToScreenPoint) ，将屏幕坐标数组传到js中进行绘制。这里通过js动态添加vml线的步长，实现动态绘制轨迹路线。大家还可以对其进行扩展，比如到某个节点时进行Tips提示等。

Code
 1line=document.getElementById("pLine");//VML线
 2line.style.position="absolute";
 3with(line.stroke)
 4{
 5Color="red";
 6Weight="2px";
 7EndArrow="Classic";
 8DashStyle="Solid";
 9}
10var html="10,10";//起始点的字符串
11var prePoint=[10,10];//起始点
12var pointArray=new Array();//轨迹点坐标
13pointArray[0]=[10,10];
14pointArray[1]=[155,366];
15pointArray[2]=[250,450];
16pointArray[3]=[44,150];
17var currentIndex=0;//当前轨迹段
18var step=5;//步长
19function Move()
20{
21var p=prePoint;
22var firstPoint=pointArray[currentIndex];
23var nextPoint=pointArray[currentIndex+1];
24if(!nextPoint) 
25{
26clearInterval(donghua);
27return;
28}
29cosdirection=(nextPoint[0]-firstPoint[0])/Math.sqrt(Math.pow((-nextPoint[1]+firstPoint[1]),2)+Math.pow((nextPoint[0]-firstPoint[0]),2));
30
31sindirection=(-nextPoint[1]+firstPoint[1])/Math.sqrt(Math.pow((-nextPoint[1]+firstPoint[1]),2)+Math.pow((nextPoint[0]-firstPoint[0]),2));
32
33var x=step*cosdirection;//步长step的x增量
34var y=step*sindirection;//步长step的y增量
35if(Math.abs(p[0]-nextPoint[0])<step || Math.abs(p[1]-nextPoint[1])<step)//如果接近下一个节点，但不足一个步长，直接跳到下一个节点，并开始下一段的绘制。
36{
37    currentIndex++;
38    if(Math.abs(p[0]-nextPoint[0])<step)
39    {
40        x=Math.abs(p[0]-nextPoint[0])*cosdirection;
41        y=Math.abs(p[0]-nextPoint[0])*sindirection;
42    }
43    else if(Math.abs(p[1]-nextPoint[1])<step)
44    {
45        x=Math.abs(p[1]-nextPoint[1])*cosdirection;
46        y=Math.abs(p[1]-nextPoint[1])*sindirection;
47    }
48
49}
50p[0]+=x;
51p[1]-=y;
52p[0]=Math.round(p[0]);
53p[1]=Math.round(p[1]);
54if(p[0]>=0&&p[1]>=0&&step>0)
55{
56  prePoint=p;
57  html+=" "+prePoint[0]+","+prePoint[1];//绘制vml线
58  line.Points.value=html;
59}
60}
61var donghua=window.setInterval(Move,100);
62document.body.focus();
63

 

 

(转载请注明出处)

Blog:http://www.cnblogs.com/hjcook/