扩展OpenLayers右键菜单
- 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还没有处理；
- 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中的操作；
- 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();
至此，右键扩展完成。
