Openlayer 的 drawstart 事件在 drawend 发生后多次触发

Question

我正在编辑 OpenLayers 团队提供的 measure 函数，但我遇到了一些问题。当用户在 drawstart 事件期间右键单击时，我添加了一个选项来删除最后添加的点，但是在第一次绘制完成后，这个选项被多次触发。如果我完成 3 张绘图，此选项将触发 3 次，依此类推。

我正在使用 addEventListener('contextmenu') 来触发右键单击事件，所以我尝试遵循 this suggestion and add a {once: true} option, but this didn't work. I also tried to add this option as a listener and on drawend event remove the listener using unByKey()，但这也没有用。

我只是不明白为什么 drawstart 事件被多次触发。

我的代码

let listener;
draw.on('drawstart', (evt) => {
    // set sketch
    sketch = evt.feature;

    let tooltipCoord = evt.coordinate;

    listener = sketch.getGeometry().on('change', (evt) => {
        let geom = evt.target;
        let output;
        if (geom instanceof Polygon) {
            output = formatArea(geom);
            tooltipCoord = geom.getInteriorPoint().getCoordinates();
        } else if (geom instanceof LineString) {
            output = formatLength(geom);
            tooltipCoord = geom.getLastCoordinate();
        }
        measureTooltipElement.innerHTML = output;
        measureTooltip.setPosition(tooltipCoord);
    });

    // Remove last vector with right click
    this.map.getViewport().addEventListener('contextmenu', (evt) => {
        console.log("right clicked");
        evt.preventDefault();
        draw.removeLastPoint()
    });
});

Answer 1

你是如何实现你的 unByKey() 的？应该可以做这样的事情：

function detectRightclick() {
  console.log("right clicked");
  evt.preventDefault();
  draw.removeLastPoint()
}

然后，在绘图开始时：

this.map.getViewport().addEventListener('contextmenu', detectRightclick)

并且，在开盘时：

this.map.getViewport().removeEventListener('contextmenu', detectRightclick)

这是假设 this.map 是地图，并且您总是在绘制结束时触发 drawend（考虑在不触发 drawend 的情况下取消绘图）

Openlayer 的 drawstart 事件在 drawend 发生后多次触发

Openlayer's drawstart event firing multiple times after drawend occur

javascript

openlayers

typescript