OpenLayers3覆盖文本框和按钮

OpenLayers3 Overlay with textboxes and buttons

本文关键字：按钮 文本 覆盖 OpenLayers3      更新时间：2023-09-26

我的OpenLayers3地图上有一个Overlay，它在选择时显示在Feature上。当用户单击地图上的任何位置（而不是某个特征）时，取消选择某个特征时，此覆盖将被销毁。

Overlay显示了一些文本框和两个按钮：Save Changes和Delete。用户应该能够使用文本框并按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>

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

因此，解决方案（尽管可能不太好）是明确定义每个button.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');
});
相关文章：