OpenLayers添加右键菜单

1. 1.       首先修改 OpenLayers Events.js

定位到下面代码段，添加右键菜单事件：

View Code 

OpenLayers.Events = OpenLayers.Class({

 

    /**

     * Constant: BROWSER_EVENTS

     * {Array(String)} supported events

     */

    BROWSER_EVENTS: [

        "mouseover", "mouseout",

        "mousedown", "mouseup", "mousemove",

        "click", "dblclick", "rightclick", "dblrightclick",

        "resize", "focus", "blur",

        "touchstart", "touchmove", "touchend"

        //添加右键菜单事件2011 11 02

        , "contextmenu"

],

……

})

现在OpenLayers可以捕捉右键了，只是Handler还没有处理；

1. 2.       修改OpenLayers Handler Feature.js

修改Handler能够处理的事件：

View Code 

OpenLayers.Handler.Feature = OpenLayers.Class(OpenLayers.Handler, {

 

    /**

    * Property: EVENTMAP

    * {Object} A object mapping the browser events to objects with callback

    *     keys for in and out.

    */

    EVENTMAP: {

        'click': { 'in': 'click', 'out': 'clickout' },

        'mousemove': { 'in': 'over', 'out': 'out' },

        'dblclick': { 'in': 'dblclick', 'out': null },

        'mousedown': { 'in': null, 'out': null },

        'mouseup': { 'in': null, 'out': null },

        'touchstart': { 'in': 'click', 'out': 'clickout' },

        //添加Handler处理事件 2011 11 02

        'contextmenu': {'in';'click','out':'clickout'}

},

})

这里的in和out可以理解为选中和取消选中；到此Handler可以处理comntexmenu事件了，可是谁来处理我们的事件呢？添加contextmenu方法，将事件处理交给Handler，如下所示：

View Code 


/**


    * Method: contextmenu


    * Handle click.  Call the "contextmenu" callback if click on a feature,


    *     or the "clickout" callback if click outside any feature.


    *


    * Parameters:


    * evt - {Event}


    *


    * Returns:


    * {Boolean}


    */


    contextmenu: function (evt) {


        return this.handle(evt) ? !this.stopClick : true;


    },

OpenLayers中触发选中默认操作方式为：左键单击和双击(touchstart暂没关注是什么操作)，我们需要添加右键单击操作类型：

var click = (type == "click" || type == "dblclick" || type == "touchstart"||type=="contextmenu");

另外，我们需要在触发的事件中添加一个参数，来区分是左键还是右键

View Code 

if (this.geometryTypeMatches(this.feature)) {

                // in to a feature

                if (previouslyIn && inNew) {

                    // out of last feature and in to another

                    if (this.lastFeature) {

                        this.triggerCallback(type, 'out', [this.lastFeature]);

                    }

                    //原始：this.triggerCallback(type, 'in', [this.feature]);

                    this.triggerCallback(type, 'in', [this.feature,type]);

                } else if (!previouslyIn || click) {

                    //原始: this.triggerCallback(type, 'in', [this.feature]);

                    // in feature for the first time

                    this.triggerCallback(type, 'in', [this.feature,type]);

                }

Handler只是为Control服务的，下面我们修改Control中的操作；

1. 3.       修改OpenLayers Control SelectFeature.js

原始：

View Code 

clickFeature: function(feature) {

        if(!this.hover) {

            var selected = (OpenLayers.Util.indexOf(

                feature.layer.selectedFeatures, feature) > -1);

            if(selected) {

                if(this.toggleSelect()) {

                    this.unselect(feature);

                } else if(!this.multipleSelect()) {

                    this.unselectAll({except: feature});

                }

            } else {

                if(!this.multipleSelect()) {

                    this.unselectAll({except: feature});

                }

                this.select(feature);

            }

        }

},

修改（添加一个参数）后：

View Code 

clickFeature: function(feature,triggertype) {

        if(!this.hover) {

            var selected = (OpenLayers.Util.indexOf(

                feature.layer.selectedFeatures, feature) > -1);

            if(selected) {

                if(this.toggleSelect()) {

                    this.unselect(feature);

                } else if(!this.multipleSelect()) {

                    this.unselectAll({except: feature});

                }

            } else {

                if(!this.multipleSelect()) {

                    this.unselectAll({except: feature});

                }

                this.select(feature,triggertype);

            }

        }

    },

原始： 

View Code 

select: function(feature) {

        var cont = this.onBeforeSelect.call(this.scope, feature);

        var layer = feature.layer;

        if(cont !== false) {

            cont = layer.events.triggerEvent("beforefeatureselected", {

                feature: feature

            });

            if(cont !== false) {

                layer.selectedFeatures.push(feature);

                this.highlight(feature);

                // if the feature handler isn't involved in the feature

                // selection (because the box handler is used or the

                // feature is selected programatically) we fake the

                // feature handler to allow unselecting on click

                if(!this.handlers.feature.lastFeature) {

                    this.handlers.feature.lastFeature = layer.selectedFeatures[0];

                }

                layer.events.triggerEvent("featureselected", {feature: feature});

                this.onSelect.call(this.scope, feature);

            }

        }

},

修改后：

View Code 


select: function (feature, triggertype) {


        var cont = this.onBeforeSelect.call(this.scope, feature);


        var layer = feature.layer;


        if (cont !== false) {


            cont = layer.events.triggerEvent("beforefeatureselected", {


                feature: feature


            });


            if (cont !== false) {


                layer.selectedFeatures.push(feature);


                this.highlight(feature);


                // if the feature handler isn't involved in the feature


                // selection (because the box handler is used or the


                // feature is selected programatically) we fake the


                // feature handler to allow unselecting on click


                if (!this.handlers.feature.lastFeature) {


                    this.handlers.feature.lastFeature = layer.selectedFeatures[0];


                }


                layer.events.triggerEvent("featureselected", { feature: feature });
                //添加类型选择 2011 11 02


                switch (triggertype) {


                    case "click":


                        this.onSelect.call(this.scope, feature);


                        break;


                    case "contextmenu":


                        this.onRightSelect.call(this.scope, feature);


                        break;


                    default:


                        this.onSelect.call(this.scope, feature);


                }


            }


        }


},

提供一个调用的接口  

View Code 

/**

    * APIProperty: onRightSelect

    * {Function} Optional function to be called when a feature is selected.

    *     The function should expect to be called with a feature.

    */

onRightSelect: function () { },

示例：

selectFeatureControl=new OpenLayers.Control.SelectFeature([layer],

    {

       onSelect:onFeatureSelect,

       onUnSelect:onFeatureUnselect,

       onRightSelect:onFeatureRightSelect

}

);

map.addControl(selectFeatureControl);

selectFeatureControl.activate();

 

至此，右键扩展完成。