openlyers实现的简单轨迹的绘制

由于项目中要实现一个动态轨迹的绘制，所以就先做类了一个简单的demo，绘制轨迹时候没有动画效果。主要代码：

 OpenLayers.DOTS_PER_INCH = 90.71428571428572;
OpenLayers.Util.onImageLoadErrorColor = 'transparent';

var map;
var vectors;
var v_array =[];
var intervalID;var intervalID1;
 function init(){
  var mapOptions = { 
    resolutions: [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7, 1.6763806343078613E-7, 8.381903171539307E-8, 4.190951585769653E-8, 2.0954757928848267E-8, 1.0477378964424133E-8, 5.238689482212067E-9, 2.6193447411060333E-9, 1.3096723705530167E-9, 6.548361852765083E-10],
    projection: new OpenLayers.Projection('EPSG:4326'),
    maxExtent: new OpenLayers.Bounds(-180.0,-90.0,180.0,90.0),
    units: "degrees",
    controls: []
    };
    map = new OpenLayers.Map('map', mapOptions );
    map.addControl(new OpenLayers.Control.PanZoomBar({
      position: new OpenLayers.Pixel(2, 15)
    }));
    map.addControl(new OpenLayers.Control.Navigation());
    map.addControl(new OpenLayers.Control.Scale($('scale')));
    map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
    var wms = new OpenLayers.Layer.WMS(
    "gz","http://127.0.0.1:8000/geowebcache/service/wms",
    {layers: 'gz', format: 'image/png' },
    { tileSize: new OpenLayers.Size(256,256) }
    );
    map.addLayers([wms]);
    map.setCenter(new OpenLayers.LonLat(113.24733, 23.10518), 13);
    map.addControl(new OpenLayers.Control.LayerSwitcher());
};
///===
// Needed only for interaction, not for the display.
function onPopupClose(evt) {
  // 'this' is the popup.
  selectControl.unselect(this.feature);
}
function onFeatureSelect(evt) {
  feature = evt.feature;
if(feature.attributes.sd){
  popup = new OpenLayers.Popup.FramedCloud("featurePopup", feature.geometry.getBounds().getCenterLonLat(), new OpenLayers.Size(100, 100), "<h2>" +        feature.attributes.colors + "dscdcsdcdscds</h2>"
          + feature.attributes.color, null, true, onPopupClose);
  feature.popup = popup;
  popup.feature = feature;
  map.addPopup(popup);
}
}
function onFeatureUnselect(evt) {
  feature = evt.feature;
  if (feature.popup&&feature.attributes.sd) {
    popup.feature = null;
    map.removePopup(feature.popup);
    feature.popup.destroy();
    feature.popup = null;
  }
}
//===

//同时绘制多个演习要素
function drawBatchGPS(){
    //是否完成所有要素轨迹
    //每次都得运行所有要素轨迹
    for(i in v_array){
      drawGPS(i);
    }
    //end for
  }
  //加载点
function loadGPS(){
    window.clearInterval(intervalID);   
     var interval = document.getElementById("mins").value;
    intervalID = window.setInterval("drawBatchGPS()",interval*1000);  
  }
var stemppoint = [];//临时点
var sfeat = [];//绘制要素的临时数组
var colors =[];
  //开始
function startGPS(){
removeGPS();
  var v_style = new OpenLayers.StyleMap({
        "default" : {
          externalGraphic : "${image}",
          strokeColor : "${color}",
          fillColor : "${color}",
          strokeOpacity : 1,
          strokeWidth : 1,
          pointRadius : "${radius}",
          rotation : "${angle}",
          fillOpacity : "${opacity}"
        },
        "select" : {
          cursor : "pointer",
          strokeColor : "blue",
          fillColor : "blue"
        }
      });
  vectors = new OpenLayers.Layer.Vector("要1", {
        styleMap : v_style
      });
      map.addLayer(vectors);
      v_array[0]={'vector':vectors,'bh':'1212'};
            var vectors1 = new OpenLayers.Layer.Vector(
                "要2",
                {
                   styleMap:v_style
                }
            );
            map.addLayer(vectors1);
       v_array[1]={'vector':vectors1,'bh':'1212'};
       vectors.events.on({
          'featureselected' : onFeatureSelect,
          'featureunselected' : onFeatureUnselect
        });
     vectors1.events.on({
          'featureselected' : onFeatureSelect,
          'featureunselected' : onFeatureUnselect
        });
        
      selectControl= new OpenLayers.Control.SelectFeature(
                [vectors,vectors1], {clickout: true, toggle: false,
                    multiple: false, hover: true});
     map.addControl(selectControl);
    selectControl.activate();
    //初始化
    for (i in v_array){
      stemppoint[i] = new OpenLayers.Geometry.Point(113.24733+0.0001*i, 23.10518+0.0001*i);//随机产生
      colors[i] = "#"+rd()+rd()+rd()+rd()+rd()+rd();
    }
    
    loadGPS();
  };

//颜色
var hexword="0123456789abcdef".split("");
var rd=function(){return hexword[Math.floor(Math.random()*16)];}

  //清空屏幕
function removeGPS(){
    window.clearInterval(intervalID);   
    for (i in v_array){
      v_array[i].vector.removeAllFeatures();
      v_array[i].vector.destroy();
    }
   v_array = [];
   sfeat = [];
   colors = [];
   stemppoint = [];

  }
  
var style_1 = {
    strokeColor: "#FF0000",
    fillColor: '#FF0000',
    strokeOpacity: 1,
    strokeWidth: 2,
    pointRadius: 3,
    pointerEvents: "visiblePainted"
  };
  //绘制点   
  function drawGPS(i){
  var features = [];
   var off = Math.random()*0.01
  
  features.push(stemppoint[i]);

  var cpoint = new OpenLayers.Geometry.Point(113.24733+off*(i+1), 23.10518+off*i)//随机产生
    //绘直线
    features.push(cpoint);
        var lineFeature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.LineString(features),null,{
    strokeColor: colors[i],
    strokeOpacity: 1,
    strokeWidth: 2,
    pointRadius: 3,
    pointerEvents: "visiblePainted"
  });
    v_array[i].vector.addFeatures(lineFeature);
     //绘制点
    var pointFeature = new OpenLayers.Feature.Vector(
             new OpenLayers.Geometry.Point(stemppoint[i].x, stemppoint[i].y),{color:colors[i],opacity:1,image:'',radius:3,sd:'true',sj:dd.s?dd.s:''});//image一定的要即使没有就用''
    v_array[i].vector.addFeatures(pointFeature);
    stemppoint[i] = cpoint;
  //绘制最新点
  v_array[i].vector.destroyFeatures(sfeat[i]);
  sfeat[i] =[];
  var r = Math.random()*360;
  sfeat[i].push(
       new OpenLayers.Feature.Vector(
             cpoint, {angle: 0, opacity:1,image:'../img/e.jpg',radius:(map.getZoom() >15) ? 20 : map.getZoom(),sd:'true'}
        ));//绘制要素标识
  sfeat[i].push(
       new OpenLayers.Feature.Vector(
             new OpenLayers.Geometry.Point(cpoint.x, cpoint.y), null,{externalGraphic: "../img/angle.png",
                            pointRadius: (map.getZoom() >15) ? 7 : map.getZoom()-8,
                            graphicYOffset: -29,
                            rotation: r}
        ));//绘制要素方向图标
    v_array[i].vector.addFeatures(sfeat[i]);

  } ;
  //刷新点
  function refreshGPS(){
    loadGPS();
    //contiuneG();
  }