在Open Layer中右键单击Feature Vector (Javascript)

Right Click on Feature Vector (Javascript) in Open Layer

本文关键字：Vector Javascript Feature 单击 Open Layer 右键      更新时间：2023-09-26

我需要在javascript语言中右键单击矢量功能(开放层)创建一个上下文菜单。我在论坛上搜索过，但解决方案只考虑在地图上右键单击打开警报或弹出窗口的方式。谢谢你的帮助。

这个答案真的很有帮助:https://gis.stackexchange.com/questions/24999/showing-menu-based-on-right-click-on-point-geometry-in-javascript

对于我的工作示例，我从这个OpenLayers示例开始:http://openlayers.org/dev/examples/feature-events.html。然后，我将feature-events.js文件修改为下面的代码。关键部分是在最底部添加的map.div.oncontextmenu部分。我捕获了使用鼠标右键点击的功能，然后构建了一个非常简单的弹出式菜单。在这里，你可以获取特性ID并做你想做的事情，就像建立弹出窗口一样。它似乎也只在一个矢量层上工作，所以我从例子中去掉了layer2。使用http://openlayers.org/dev/examples/select-feature-multilayer.html中的代码可以解决这个问题。

var layerListeners = {
featureclick: function(e) {
    log(e.object.name + " says: " + e.feature.id + " clicked.");
    return false;
},
nofeatureclick: function(e) {
    log(e.object.name + " says: No feature clicked.");
}
};
var style = new OpenLayers.StyleMap({
'default': OpenLayers.Util.applyDefaults(
    {label: "${l}", pointRadius: 10},
    OpenLayers.Feature.Vector.style["default"]
),
'select': OpenLayers.Util.applyDefaults(
    {pointRadius: 10},
    OpenLayers.Feature.Vector.style.select
)
});
var layer1 = new OpenLayers.Layer.Vector("Layer 1", {
styleMap: style,
eventListeners: layerListeners
});
layer1.addFeatures([
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-1 -1)"), {l:1}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(1 1)"), {l:1}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-1 1)"), {l:2}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(1 -1)"), {l:2})
]);
/*var layer2 = new OpenLayers.Layer.Vector("Layer 2", {
styleMap: style,
eventListeners: layerListeners
});
layer2.addFeatures([
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-1 1)"), {l:2}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(1 -1)"), {l:2})
]);*/
var map = new OpenLayers.Map({
div: "map",
allOverlays: true,
layers: [layer1],
zoom: 6,
center: [0, 0],
eventListeners: {
    featureover: function(e) {
        e.feature.renderIntent = "select";
        e.feature.layer.drawFeature(e.feature);
        log("Map says: Pointer entered " + e.feature.id + " on " +     e.feature.layer.name);
    },
    featureout: function(e) {
        e.feature.renderIntent = "default";
        e.feature.layer.drawFeature(e.feature);
        log("Map says: Pointer left " + e.feature.id + " on " + e.feature.layer.name);
    },
    featureclick: function(e) {
        log("Map says: " + e.feature.id + " clicked on " + e.feature.layer.name);
    }
}
});
function log(msg) {
if (!log.timer) {
    result.innerHTML = "";
    log.timer = window.setTimeout(function() {delete log.timer;}, 100);
}
result.innerHTML += msg + "<br>";
}
map.div.oncontextmenu = function noContextMenu(e) {
if(!e){ //dear IE...
    var e = window.event;
    e.returnValue = false;
}
console.log(e);
var f = layer1.getFeatureFromEvent(e);
console.log(f);
var popup = new OpenLayers.Popup("My Popup", 
        new OpenLayers.LonLat(f.geometry.x,f.geometry.y), 
        new OpenLayers.Size(200,200),true);
popup.closeOnMove = true;
map.addPopup(popup);
return false; //Prevent display of browser context menu
}
相关文章：