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

Question

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

我正在使用 addEventListener('contextmenu') 来触发右键单击事件，所以我尝试遵循 this suggestion并添加一个 {once: true} 选项，但这没有用。我还尝试将此选项添加为监听器，并在 drawend 事件上使用 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)

并且，在 drawend 上:

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

这是假设 this.map 是 map ，并且您总是在绘制结束时触发 drawend(考虑在没有触发 drawend 的情况下取消绘图)