由于项目中要实现一个动态轨迹的绘制，所以就先做类了一个简单的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();
}