openlayers2地圖控件擴展：要素刪除DeleteFeature

實現要素刪除控件，擴展OpenLayers.Control類，實現效果：選擇DeleteFeature工具后，選擇要素，按delete鍵刪除要素（這里的刪除只是將feature設置成delete狀態，需提交到遠程服務器才能刪除數據源中的要素），具體代碼如下：

 

OpenLayers.Control.DeleteFeature = OpenLayers.Class(OpenLayers.Control.SelectFeature, {
    deleteCodes: null,
    
    /*
     * layers--Array[]
     * options--Object{}
     * */
    initialize: function(layers, options) {
        var me = this;
        me.deleteCodes = [46, 68];
        OpenLayers.Control.SelectFeature.prototype.initialize.apply(this, arguments);
        me.keyboard = new OpenLayers.Handler.Keyboard(this,{
            keydown: me.handleKeypress,
            scope: me
        });
    },
    handleKeypress: function(evt){
        var code = evt.keyCode;
        // check for delete key
        if(OpenLayers.Util.indexOf(this.deleteCodes, code) != -1){
            var feature = this.handlers.feature.feature;
            if(!feature)
                return;
            
            // if feature doesn't have a fid, destroy it
            if(feature.fid == undefined) {
                this.layers[0].destroyFeatures([feature]);
            } else {
                feature.state = OpenLayers.State.DELETE;
                this.layers[0].events.triggerEvent("afterfeaturemodified", 
                        {feature: feature});
                this.layers[0].drawFeature(feature);
            }
        }
    },
    setMap: function(map) {
        this.keyboard.setMap(map);
        OpenLayers.Control.SelectFeature.prototype.setMap.apply(this, arguments);
    },
    activate: function() {
        return (this.keyboard.activate() &&
                OpenLayers.Control.SelectFeature.prototype.activate.apply(this, arguments));
    },
    deactivate: function() {
        this.keyboard.deactivate();
        OpenLayers.Control.SelectFeature.prototype.deactivate.apply(this, arguments);
    },
    CLASS_NAME: "OpenLayers.Control.DeleteFeature"
});

 

效果