0

選択時にフィーチャーの上に表示される OpenLayers3 マップにオーバーレイがあります。このオーバーレイは、ユーザーが (フィーチャではなく) マップ上の任意の場所をクリックしたときに発生する、フィーチャの選択解除時に破棄されます。

オーバーレイには、いくつかのテキスト ボックスと、[変更を保存] と [削除] の 2 つのボタンが表示されます。ユーザーは、テキスト ボックスを使用して [変更の保存] を押して機能を編集するか、[削除] を押して削除前に確認用のモーダル ウィンドウを表示できる必要があります。

ただし、イベント伝播の性質上、問題が発生しています。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 に答える