Openlayers 7 向地图添加绘图和拖动框交互

Question

我想允许用户拖动或单击以便在地图上绘制一个框。此行为由按钮打开。当我在 dragBox 之前绘制一个框时，绘制会留下一个 mouseup 事件，而下一个 dragBox 从该点开始而不是它的 mousedown。在下图中，右下角的白点是 mouseup 点。

• 我已经尝试为未进行过的交互设置 setActive(false) 用 and 而不是删除交互。
• 我试过更改删除或添加交互的顺序。
• 我试过捕获鼠标点并将其删除。
• 我尝试捕获“addfeature”事件，但无法检测到

这是一个类似的问题如何向地图添加多个绘图交互.

class DrawBoxControl extends ol.control.Control {
constructor(opts) {
    const options = opts || {};
    // button code
    const s = new ol.source.Vector({wrapX: false});
    this.drawLayer = new ol.layer.Vector({source: s,});

    let draw = new ol.interaction.Draw({
        source: s,
        type: 'Circle',
        geometryFunction: ol.interaction.Draw.createBox()
    });

    let self = this;

    const dragBox = new ol.interaction.DragBox({});
    draw.on('drawend', (event) => {
        self.getMap().removeInteraction(dragBox);
        self.getMap().removeInteraction(draw);
    });

    dragBox.on('boxend', (event) => {
        let feature = new ol.Feature(ol.geom.Polygon.fromExtent(dragBox.getGeometry().getExtent()));
        s.addFeatures([feature]);
        self.getMap().removeInteraction(draw);
        self.getMap().removeInteraction(dragBox);
    });
    button.addEventListener('click', () => {
        s.clear();
        self.getMap().addInteraction(dragBox);
        self.getMap().addInteraction(draw);
    });
}
setMap(m) {
    super.setMap(m);
    this.drawLayer.setMap(m);
}

}

Answer 1

我能够解决问题的主要部分。白色“点”在绘制一个框后仍出现在屏幕上，但当我单击按钮绘制另一个框时消失了。我可能不得不忍受它。

我通过在第一次创建 dragBox 对象时查看它然后在绘制交互之后查看它来解决问题。在绘制交互之后，这些属性具有值。我在启动时重置它们以匹配 dragBox 值，这解决了问题。

            dragBox.handlingDownUpSequence = false;
            dragBox.StartPixel_ = null;
            dragBox.targetPointers = [];
            this.getMap().removeInteraction(dragBox);

这是完整的代码，以防对其他人有用：

class DrawBoxControl extends ol.control.Control {
constructor(opts) {
    const options = opts || {};
    //button code

    const s = new ol.source.Vector({
        wrapX: false
    });
    this.drawLayer = new ol.layer.Vector({source: s});
    let draw = new ol.interaction.Draw({
        source: s,
        type: 'Circle',
        geometryFunction: ol.interaction.Draw.createBox()
    });
    
    let dragBox = new ol.interaction.DragBox({});

    draw.on('drawend', (event) => {
            dragBox.handlingDownUpSequence = false;
            dragBox.startPixel_ = null;
            dragBox.targetPointers = [];
            this.getMap().removeInteraction(dragBox);
            this.getMap().removeInteraction(draw);
    });

    dragBox.on('boxend', (event) => {
            let polygon = ol.geom.Polygon.fromExtent(dragBox.getGeometry().getExtent());
            let feature = new ol.Feature(polygon);
            s.addFeatures([feature]);
            this.getMap().removeInteraction(draw);
            this.getMap().removeInteraction(dragBox);
    });
    
    button.addEventListener('click', buttonFunction.bind(this));

    function buttonFunction() {
        s.clear();
        this.getMap().addInteraction(dragBox);
        this.getMap().addInteraction(draw);
    }

}
setMap(m) {
    if (this.getMap()) this.getMap().removeLayer(this.drawLayer);
    super.setMap(m);
    this.drawLayer.setMap(m);
}

}