OL4停止传播

Question

我在我的项目中使用 OL4，我有一个 feature layer，我可以在其中单击并出现一个弹出窗口，我还使用 draw layer，我可以在其中绘制一个标记（在示例中这只是一个点）

我的问题是，如果我在 feature layer 上方绘制标记，点击会传播到 draw layer 直到 feature layer 并且出现弹出窗口，我知道它存在 stopPropagation() 事件，但我真的找不到插入它的正确位置。

我尝试在 marklayer 和 map on(click...) 上插入事件，但没有成功。

这是我的代码：

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);
    });
}

这是我的 CodePen：https://codepen.io/sebalaini/pen/gvPLBJ

在实时系统上，我有一个 map layer feature layer drawing layer 所以并不是所有的地图都是可点击的，但是为了显示我的问题，这个例子是可以的，你可以看到，如果你画一个圆圈，你也会打开弹出窗口

Answer 1

据我所知，您不能在此上下文中使用 stopPropagation。

一个快速（非常）肮脏的解决方案可能是在 drawend 回调（例如 skipCoordinatesPopup）中设置一个（全局）变量并在单击回调中检查它。

修改后的codepenhttps://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;

相反，在处理依赖于相同手势的控件时（在您的示例中单击），我建议您使用 "activate" 和 "deactivate"（使用 setActive 函数或 add/removeInteraction ) 他们使用 "toggling system"，例如单选按钮或组合框。

你可以在这个例子中找到类似的东西 https://openlayers.org/en/latest/examples/draw-freehand.html

OL4停止传播

OL4 stopPropagation

javascript

openlayers