Question

我的OpenLayers3地图上有一个叠加层，在选择时显示在一个要素上。在取消选择要素时会破坏此叠加层，当用户单击地图上的任何位置（而不是在要素上）时，会发生此叠加。

叠加显示一些文本框和两个按钮：保存更改和删除。用户应该能够使用文本框并按Save Changes来编辑功能，或者按Delete将在删除前显示模式窗口以进行确认。

但是，事件传播的性质会造成一些麻烦。将Overlay的stopEvent选项设置为true后，文本框可以单击并编辑，但按钮的事件不会触发。设置为false时，文本框会单击到地图，导致取消选择和销毁叠加，但现在可以单击按钮。

有关如何在保持按钮的事件功能的同时使文本框既可输入又可编辑的任何建议？

我无法让jsFiddle工作，但下面是一些示例代码：

在地图上选择工具

var interaction = new ol.interaction.Select({
    condition: ol.events.condition.click
});
var refreshView = function () {
    refreshPopup();
};
interaction.getFeatures().on('add', refreshView);
interaction.getFeatures().on('remove', refreshView);
map.addInteraction(interaction);

弹出窗口的HTML

<div class="popover">
    <div class="arrow"></div>
    <h3 class="popover-title" style="display: none;"></h3>
    <div class="popover-content">
        <table class="popupTable table table-bordered table-hover">
            <tbody>
                <tr><td>ID: </td><td>id</td></tr>
                <tr><td>value1/td><td><input type="text"></td></tr>
                <tr><td>value2</td><td><input type="text"></td></tr>
            </tbody>
        </table>
        <button class="btn save-feature">Save</button>
        <button class="btn delete-feature">Delete</button>
    </div>
</div>

Answer 1

经过一些测试，我发现虽然stopEvent：true;已设置，按钮的.click（）函数仍在调用，但默认行为已被停止。

因此，解决方案（尽管可能不太漂亮）是在每个按钮.click（）事件中明确定义行为。例如，在点击时显示模态而不是使用Bootstrap的数据属性来处理它。

例如：

$(".save-feature").click(function (event) {
    // Do Save stuff here
});
$(".delete-feature").click(function (    
    // Explicitly show modal because OpenLayers Overlay with stopEvent: true 
    // suppresses stuff
    $("#delete-modal").modal('show');
});

OpenLayers3覆盖文本框和按钮

1 个答案: