gpt4 book ai didi

javascript - 右键单击开放层中的特征向量(Javascript)

转载 作者:行者123 更新时间:2023-11-29 15:38:06 25 4
gpt4 key购买 nike

我需要在 javascript 语言中右键单击矢量特征(开放层)创建上下文菜单。 我在论坛上搜索过,但解决方案只涉及在 map 上右键点击打开警报或弹出窗口的方式。 感谢您的帮助。

最佳答案

这个答案真的很有帮助: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
}

关于javascript - 右键单击开放层中的特征向量(Javascript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24682024/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com