![](/img/trans.png)
[英]How to get the name of a feature (point) of a vector layer in Open Layers?
[英]Right Click on Feature Vector (Javascript) in Open Layer
我需要在javascript語言中右鍵單擊Vector Feature(Open Layer)創建一個contextmenu。 我在論壇上搜索過,但解決方案只考慮在地圖上打開警報或彈出窗口的方法。 謝謝你的幫助。
這個答案非常有用: 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
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.