openlayers中利用vector實現marker的方式

項目需要一個小型的gis。openlayers，geoserver，postgres組合是比較好的選擇。
openlayers的marker層好像不支持拖動操作。通過研究api發現，可以利用vector層
達到這個目的，作出標注的效果。可以定位，搜索，拖動等效果，選中的時候可以
通過修改style達到動畫效果。
基本做法如下：
1：定義marker顯示的樣式
2：擴展vector層，利用在擴展層上添加point與style，圖片顯示point就出現標注的
   效果
基本代碼如下:
定義樣式：

$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})
    })
}

$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:擴展向量層

$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'];
            //彈出窗口
        }
    }
});

$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層擁有更多的功能