openlayers中利用vector实现marker的方式

项目需要一个小型的gis。openlayers，geoserver，postgres组合是比较好的选择。
openlayers的marker层好像不支持拖动操作。通过研究api发现，可以利用vector层
达到这个目的，作出标注的效果。可以定位，搜索，拖动等效果，选中的时候可以
通过修改style达到动画效果。
基本做法如下：
1：定义marker显示的样式
2：扩展vector层，利用在扩展层上添加point与style，图片显示point就出现标注的
   效果
基本代码如下:
定义样式：

Java代码

1. $package("com.bct.map");   
2. com.bct.map.EncoderMarkerStyle = {   
3.     'bigEncoder':{   
4.         graphicWidth:24,   
5.         graphicHeight : 24,   
6.         graphicXOffset : -12,   
7.         graphicYOffset : -24,   
8.         externalGraphic : "scripts/map/img/channel2.png"  
9.     },   
10.     'smallEncoder':{   
11.         graphicWidth:16,   
12.         graphicHeight : 16,   
13.         graphicXOffset : -8,   
14.         graphicYOffset : -16,   
15.         externalGraphic : "scripts/map/img/channel.gif"  
16.     },   
17.     'selectStyle':{   
18.         pointerEvents: "visiblePainted",   
19.         border:"border:25 outset #ff88ff",   
20.         cursor: "pointer",   
21.         graphicWidth:24,   
22.         graphicHeight : 24,   
23.         graphicXOffset : -12,   
24.         graphicYOffset : -24,   
25.         externalGraphic : "scripts/map/img/channel2.png"       
26.     },   
27.     styleMap: new OpenLayers.StyleMap({   
28.                     "select": new OpenLayers.Style({pointRadius: 24})   
29.     })   
30. }  

$package("com.bct.map");
com.bct.map.EncoderMarkerStyle = {
	'bigEncoder':{
    	graphicWidth:24,
        graphicHeight : 24,
        graphicXOffset : -12,
        graphicYOffset : -24,
        externalGraphic : "scripts/map/img/channel2.png"
    },
    'smallEncoder':{
        graphicWidth:16,
        graphicHeight : 16,
        graphicXOffset : -8,
        graphicYOffset : -16,
        externalGraphic : "scripts/map/img/channel.gif"
    },
    'selectStyle':{
        pointerEvents: "visiblePainted",
        border:"border:25 outset #ff88ff",
        cursor: "pointer",
        graphicWidth:24,
        graphicHeight : 24,
        graphicXOffset : -12,
        graphicYOffset : -24,
        externalGraphic : "scripts/map/img/channel2.png"    
    },
    styleMap: new OpenLayers.StyleMap({
                    "select": new OpenLayers.Style({pointRadius: 24})
    })
}

2:扩展向量层

Java代码

1. $package("com.bct.map");   
2. $import("com.bct.map.EncoderMarkerStyle");   
3. com.bct.map.MarkerVectorLayer = OpenLayers.Class(OpenLayers.Layer.Vector,{   
4.     /**  
5.      * parameters  
6.      * attribute filer对象  
7.      */  
8.     getFeatureByAttribute :function(attributes){   
9.         var feature = null;   
10.         for(var i=0;i<this.features.length; ++i){   
11.             var attri = this.features[i].attributes;   
12.             var find = false;   
13.             for(var j in attributes){   
14.                 if(attributes[j] == attri[j]){   
15.                     find = true;   
16.                 }   
17.             }   
18.             if(find){   
19.                 return this.features[i];    
20.             }              
21.         }   
22.        
23.     },   
24.     //添加Feature，是point显示为图片   
25.     addEncorderFeature:function(encNode,location){   
26.         if(encNode&&this.repetitiveCheck(encNode.id)){   
27.             return;   
28.         }   
29.         var attributes = OpenLayers.Util.extend({}, encNode.attributes);   
30.         var enc_point = new OpenLayers.Geometry.Point(location.lon,location.lat);   
31.         var enc_Feature = new OpenLayers.Feature.Vector(enc_point,attributes,com.bct.map.EncoderMarkerStyle['smallEncoder']);   
32.         this.addFeatures([enc_Feature]);   
33.         if(encNode.attributes['lon']&&encNode.attributes['lat']&&encNode.attributes['lon'].length>0){   
34.             return;   
35.         }   
36.         this.updateChannel(encNode.id,location.lon,location.lat);   
37.     },   
38.     repetitiveCheck:function(entity_id){   
39.         if(this.getFeatureByAttribute({id:entity_id})){   
40.             return true;   
41.         }   
42.         return false;   
43.     },   
44.     updateChannel:function(channel_id,lon,lat){   
45.         Ext.Ajax.request({   
46.              url: 'deviceVideoEncoder.do?method=updateLonlat&id='+channel_id+"&lon="+lon+"&lat="+lat   
47.         });   
48.     },   
49.     channelMarkerClick:function() {   
50.         var features = this.selectedFeatures;   
51.         if(features.length >=0&&features[0]) {   
52.             feature = features[0];               
53.             var treeNodeAttribute = feature.attributes;   
54.             //显示信息         
55.         }   
56.     },   
57.     cartoonFeature :function(feature){   
58.         this.drawFeature(feature,com.bct.map.EncoderMarkerStyle['bigEncoder']);   
59.         var runner = new Ext.util.TaskRunner(1000);   
60.         var task = {   
61.             run:this.drawFeature,   
62.             scope:this,   
63.             args:[feature,com.bct.map.EncoderMarkerStyle['smallEncoder']],   
64.             interval: 1000  
65.         }   
66.         runner.start(task);   
67.     },   
68.     removeSelectFeature:function(){   
69.         var features = this.selectedFeatures;   
70.         for(var i=features.length-1; i>=0; i--) {   
71.             feature = features[i];   
72.             this.updateChannel(feature.attributes['id'],"","");   
73.         }   
74.         this.destroyFeatures(this.selectedFeatures);   
75.     },   
76.     monitorSelectFeature:function(){           
77.         var features = this.selectedFeatures;   
78.         if(features.length >=0&&features[0]) {   
79.             feature = features[0];               
80.             var treeNodeAttribute = feature.attributes;   
81.             var objId="mapAVShow"+treeNodeAttribute['id'];   
82.             //弹出窗口   
83.         }   
84.     }   
85. });  

$package("com.bct.map");
$import("com.bct.map.EncoderMarkerStyle");
com.bct.map.MarkerVectorLayer = OpenLayers.Class(OpenLayers.Layer.Vector,{
    /**
	 * parameters
	 * attribute filer对象
	 */
	getFeatureByAttribute :function(attributes){
		var feature = null;
		for(var i=0;i<this.features.length; ++i){
			var attri = this.features[i].attributes;
			var find = false;
			for(var j in attributes){
				if(attributes[j] == attri[j]){
					find = true;
				}
			}
			if(find){
				return this.features[i]; 
			}			
		}
	
	},
	//添加Feature，是point显示为图片
	addEncorderFeature:function(encNode,location){
		if(encNode&&this.repetitiveCheck(encNode.id)){
			return;
		}
        var attributes = OpenLayers.Util.extend({}, encNode.attributes);
        var enc_point = new OpenLayers.Geometry.Point(location.lon,location.lat);
        var enc_Feature = new OpenLayers.Feature.Vector(enc_point,attributes,com.bct.map.EncoderMarkerStyle['smallEncoder']);
        this.addFeatures([enc_Feature]);
        if(encNode.attributes['lon']&&encNode.attributes['lat']&&encNode.attributes['lon'].length>0){
        	return;
        }
        this.updateChannel(encNode.id,location.lon,location.lat);
	},
	repetitiveCheck:function(entity_id){
	    if(this.getFeatureByAttribute({id:entity_id})){
	    	return true;
	    }
		return false;
	},
	updateChannel:function(channel_id,lon,lat){
		Ext.Ajax.request({
  			 url: 'deviceVideoEncoder.do?method=updateLonlat&id='+channel_id+"&lon="+lon+"&lat="+lat
		});
	},
	channelMarkerClick:function() {
	    var features = this.selectedFeatures;
    	if(features.length >=0&&features[0]) {
    		feature = features[0];            
            var treeNodeAttribute = feature.attributes;
			//显示信息   	
    	}
    },
    cartoonFeature :function(feature){
    	this.drawFeature(feature,com.bct.map.EncoderMarkerStyle['bigEncoder']);
        var runner = new Ext.util.TaskRunner(1000);
        var task = {
	    	run:this.drawFeature,
	    	scope:this,
	    	args:[feature,com.bct.map.EncoderMarkerStyle['smallEncoder']],
	    	interval: 1000
		}
    	runner.start(task);
    },
    removeSelectFeature:function(){
    	var features = this.selectedFeatures;
    	for(var i=features.length-1; i>=0; i--) {
            feature = features[i];
            this.updateChannel(feature.attributes['id'],"","");
        }
        this.destroyFeatures(this.selectedFeatures);
    },
    monitorSelectFeature:function(){		
    	var features = this.selectedFeatures;
    	if(features.length >=0&&features[0]) {
            feature = features[0];            
            var treeNodeAttribute = feature.attributes;
			var objId="mapAVShow"+treeNodeAttribute['id'];
			//弹出窗口
        }
    }
});

addEncorderFeature是添加一个标注的地方。
利用这种方式，比原有的marker层拥有更多的功能