0

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

Overlay 显示了一些文本框和两个按钮：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>
4

1 回答 1

0

经过一些测试，我发现 while 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');
});
于 2014-09-26T09:37:08.287 回答