OpenLayers 画点、线、及删除点、线 封装的js工具类

OpenLayers.MapUtils = OpenLayers.Class({ div_map : null, div_coords : null, lon : null, lat : null, zoom : null, map : null, markers : null, marker : null, gsat : null, controls : null, vectors : null, pgoogle : null, pdis : null, initialize:function(div_map,div_coords,lon,lat,zoom,pgoogle,pdis) { this.div_map=div_map; this.div_coords=div_coords; this.lon = (lon != null) ? lon : 120.14743 ; this.lat = (lat != null) ? lat : 30.26081 ; this.zoom = (zoom != null) ? zoom : 5 ; this.pgoogle = (pgoogle != null) ? pgoogle : new OpenLayers.Projection("EPSG:900913") ; this.pdis = (pdis != null) ? pdis : new OpenLayers.Projection("EPSG:4326") ; var mapOptions = { controls:[], projection: this.pgoogle, displayProjection: this.pdis, units: "m", maxExtent: new OpenLayers.Bounds(-20037700,-20037700,20037700,20037700) }; this.map = new OpenLayers.Map(this.div_map, mapOptions); try{ this.gsat = new OpenLayers.Layer.Google("Google",{'sphericalMercator': true,type:G_HYBRID_MAP, numZoomLevels: 19} ); this.map.addLayer(this.gsat); } catch(e){ alert("error"); } this.markers = new OpenLayers.Layer.Markers( "Markers" ); this.map.addLayer(this.markers); this.map.addControl(new OpenLayers.Control.Navigation()); this.map.addControl(new OpenLayers.Control.ScaleLine()); this.map.addControl(new OpenLayers.Control.PanZoomBar()); this.map.setCenter(new OpenLayers.LonLat(this.lon,this.lat).transform(this.pdis, this.pgoogle),this.zoom); this.vectors = new OpenLayers.Layer.Vector("Vector Layer"); this.map.addLayers([this.gsat, this.vectors]); this.map.addControl(new OpenLayers.Control.LayerSwitcher()); this.map.addControl(new OpenLayers.Control.MousePosition()); this.controls = { point: new OpenLayers.Control.DrawFeature(this.vectors, OpenLayers.Handler.Point), line: new OpenLayers.Control.DrawFeature(this.vectors,OpenLayers.Handler.Path), polygon: new OpenLayers.Control.DrawFeature(this.vectors,OpenLayers.Handler.Polygon), drag: new OpenLayers.Control.DragFeature(this.vectors) }; for(var key in this.controls) { this.map.addControl(this.controls[key]); } this.map.addControl(new OpenLayers.Control.MousePosition({'div': document.getElementById(this.div_coords)})); var popup = new OpenLayers.Popup("Example", new OpenLayers.LonLat(this.lon,this.lat).transform(this.pdis, this.pgoogle), new OpenLayers.Size(200,100),"Welcome to China",true); this.map.addPopup(popup); popup.hide(); var point = new OpenLayers.LonLat(this.lon, this.lat); var size = new OpenLayers.Size(21,25); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); var icon = new OpenLayers.Icon('img/marker.png',size,offset); this.marker = new OpenLayers.Marker(point.transform(this.pdis, this.pgoogle),icon); this.markers.addMarker(this.marker); this.marker.events.register( "click", this.marker,function (){ popup.toggle(); }); }, addPoint:function(_lon,_lat,_id,_icon,_detail,_width,_height){ var popup; var point= new OpenLayers.LonLat(_lon,_lat); var size = new OpenLayers.Size(21,25); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); var icon = new OpenLayers.Icon(_icon,size,offset); this.marker = new OpenLayers.Marker.MarkerId(point.transform(this.pdis, this.pgoogle),icon,_id); this.markers.addMarker(this.marker); if(_detail!=null&&_width!=null&&_height!=null){ popup = new OpenLayers.Popup("Example", new OpenLayers.LonLat(_lon,_lat).transform(this.pdis, this.pgoogle), new OpenLayers.Size(_width,_height),_detail,true); this.map.addPopup(popup); popup.hide(); this.marker.events.register( "click", this.marker,function (){ popup.toggle(); }); } }, addLine:function(lonlat,_id,_icon,_detail,_width,_height){ var lonlats=new Array(); var _arr=new Array(); lonlats=lonlat.split(";"); for(var i=0;i<lonlats.length;i++){ var _lonlat=new Array(); _lonlat=lonlats[i].split(","); this.addPoint(_lonlat[0], _lonlat[1],_id,_icon,_detail,_width,_height); } if(this.markers.markers.length>0){ for(var i=0;i<this.markers.markers.length;i++){ var lon=this.markers.markers[i].lonlat.lon; var lat=this.markers.markers[i].lonlat.lat; _arr.push(new OpenLayers.Geometry.Point(lon, lat)); } } var line=null; for(var i=1;i<_arr.length;i++){ if(i>1){ var arr=new Array(); arr.push(_arr[i-1]); arr.push(_arr[i]); line = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.LineString(arr) ); line.id=_id; this.vectors.addFeatures([line], {silent: true}); } } }, deletePoint:function (id){ for(var i=1;i<this.markers.markers.length;i++){ var _id=this.markers.markers[i].id; if(id==_id){ this.markers.removeMarker(this.markers.markers[i]); i=i-1; } } }, deleteLine:function (id){ var _lineArr=new Array(); for(var i=0;i<this.vectors.features.length;i++){ if(this.vectors.features[i].id==id){ _lineArr.push(this.vectors.features[i]); } } this.vectors.removeFeatures(_lineArr); this.deletePoint(id); }, CLASS_NAME: "OpenLayers.MapUtils" }); OpenLayers.Marker.MarkerId = OpenLayers.Class(OpenLayers.Marker, { id: null, initialize: function(lonlat, icon,id) { var newArguments = [ lonlat, icon ]; OpenLayers.Marker.prototype.initialize.apply(this, newArguments); this.id = (id != null) ? id : "_markId" ; }, CLASS_NAME: "OpenLayers.Marker.MarkerId" });