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(); }