我在我的项目中使用OL4并且我有feature layer我可以点击并弹出一个弹出窗口，我还使用draw layer我可以在其中绘制标记（在示例中）它只是一个点）
我的问题是，如果我将标记绘制在feature layer上方，点击会在draw layer内传播，直到feature layer并显示弹出窗口，我知道它存在{{1}事件，但我真的找不到插入它的正确位置。
我尝试在stopPropagation()和marklayer map上插入活动，但不起作用。
这是我的代码：
on(click...)这里是我的CodePen：https://codepen.io/sebalaini/pen/gvPLBJ
在实时系统上，我有一个var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
// DRAW Layer
var Msource = new ol.source.Vector();
var markLayer = new ol.layer.Vector({
source: Msource,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#328cc1',
width: 4
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#328cc1'
})
})
})
});
// DRAW Layer
var Msource = new ol.source.Vector();
var markLayer = new ol.layer.Vector({
source: Msource,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#328cc1',
width: 4
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#328cc1'
})
})
})
});
// MAP
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'https://api.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy.json?secure',
crossOrigin: 'anonymous'
})
})
],
overlays: [overlay,markLayer],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
// POPUP INTERACTION
map.on('singleclick', function(evt) {
var coordinate = evt.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326'));
content.innerHTML = '<p>You clicked here:</p><code>' + hdms + '</code>';
overlay.setPosition(coordinate);
});
// MARKER INTERACTION
$("#marker").click(function(e) {
addMark("Point");
});
var mark;
function addMark(Type) {
mark = new ol.interaction.Draw({
source: Msource,
type: Type
});
map.addInteraction(mark);
mark.on("drawend", function(){
//to do stuff
});
markLayer.on("change", function(){
// remove the interaction after you have plotted a marker
map.removeInteraction(mark);
});
}
map layer feature layer所以并非所有地图都可以点击，但为了显示我的问题，示例是正常的，你可以看看如果画一个圆圈你也打开了弹出窗口
答案 0 :(得分：0)
AFAIK，你不能在这种情况下使用stopPropagation。
一个快速且（非常）脏的解决方案可能是在drawend回调中设置一个（全局）变量（例如skipCoordinatesPopup）并在singleclick回调中检查它。
这里的codepen已修改https://codepen.io/anon/pen/NyrKBm
map.on('singleclick', function(evt) {
if(skipCoordinatesPopup) {
console.log('skip popup while drawing marker');
return;
}
var coordinate = evt.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326'));
content.innerHTML = '<p>You clicked here:</p><code>' + hdms + '</code>';
overlay.setPosition(coordinate);
});
...
map.addInteraction(mark);
skipCoordinatesPopup = true;
相反，在处理依赖于相同手势的控件时（在您的示例中单击），我建议您激活＆＃34;和＃34;停用＆＃34; （使用setActive函数或add / removeInteraction）使用＆＃34;切换系统＆＃34;，如单选按钮或组合框。
您可以在此示例中找到类似的内容 https://openlayers.org/en/latest/examples/draw-freehand.html