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();
至此,右键扩展完成。
转载自:https://blog.csdn.net/atgwwx/article/details/7768091