openlayer右键菜单_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能处理contextmenu事件了。可是谁来处理我们的event呢？添加contextmenu方法将event处理交给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软件中，默认情况下选择区域时会使用以下几种方法：按下鼠标左键进行单击（以及在Shift+状态下进行双按），而触控模式中的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();
至此，右键扩展完成。
转载自：