單擊地圖外部的按鈕時，為所選圖層打開一個jquery ui對話框

Question

我有一個包含多個圖層的傳單地圖。 我可以繪制折線，刪除和編輯特定圖層，然后使用jquery ui對話框發送一些信息到我的postGis數據庫。

繪制和刪除我的折線沒有問題。 我單擊地圖外部的按鈕，可以繼續繪制選定圖層或從圖層中刪除折線。

但現在，如何點擊地圖外的按鈕並打開相對於我正在編輯的圖層的對話框？

我嘗試在我的圖層的“oneachfeature”上調用我的保存按鈕，然后當我選擇一個圖層並單擊我的保存按鈕時，它首先打開相對於所選圖層的對話框，但之后，它還會打開對話框我的另一層的框。

這里有一些代碼來解釋我在做什么：

 //I'm calling my first WFS layer var ajaxlayer1 = $.ajax({ url : owsrootUrlAssainissement + L.Util.getParamString(parameterslayer1), dataType : 'jsonp', jsonpCallback: 'calllayer1' }); ajaxlayer1.done(layer1); function layer1 (reseaulayer1) { conduites_layer1 = new L.geoJson(reseaulayer1, { onEachFeature: eachfeaturelayer1 }); return layer1; } function eachfeaturelayer1 (feature, layer) { layer.on('click', function(e){ if(selectedFeature) selectedFeature.disableEdit(); map.closePopup(); selectedFeature = e.target; e.target.enableEdit(); }); layer.on('editable:enable',function (e) { //do some stuff here }); $('#saveBtn').on('click',function(e){ layer.disableEdit(); //open a jquery ui dialog box with informations from my second layer //var dialog1 = ... dialog_layer1.dialog("open"); }); layer.on('editable:disable',function (e) { // Some code to recover layer's coordinates, ... }); } //I'm calling my second WFS layer var ajaxlayer2 = $.ajax({ url : owsrootUrlAssainissement + L.Util.getParamString(parameterslayer2), dataType : 'jsonp', jsonpCallback: 'calllayer2' }); ajaxlayer2.done(layer2); function layer2 (reseaulayer2) { conduites_layer2 = new L.geoJson(reseaulayer2, { onEachFeature: eachfeaturelayer2 }); return layer2; } function eachfeaturelayer2 (feature, layer) { layer.on('click', function(e){ if(selectedFeature) selectedFeature.disableEdit(); map.closePopup(); selectedFeature = e.target; e.target.enableEdit(); }); layer.on('editable:enable',function (e) { //do some stuff here }); $('#saveBtn').on('click',function(e){ layer.disableEdit(); //open a jquery ui dialog box with informations from my second layer //var dialog2 = ... dialog_layer2.dialog("open"); }); layer.on('editable:disable',function (e) { // Some code to recover layer's coordinates, ... }); } 

Answer 1

我建議這樣的事情，定義對話框，然后在需要保存操作時進行調整。

工作示例： https ： //jsfiddle.net/Twisty/f1gvo1h6/

HTML

<div>
  <div class="artwork">
  </div>
  <button id="saveBtn">
    Save
  </button>
</div>

<div id="saveDialog" title="Save Layer">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Do you wish to save the changes to this layer?</p>
</div>

jQuery的

$(function() {

  $("#saveDialog").dialog({
    autoOpen: false,
    resizable: false,
    height: "auto",
    width: 400,
    modal: true
  });
  $("#saveBtn").click(function() {
    // Gather the layer that is being edited
    // Create actions and buttons
    $("#saveDialog").dialog("option", "buttons", [{
      text: "Save",
      click: function() {
        // Do stuff for the layer save
        // layer.disableEdit();
        $(this).dialog("close");
      }
    }, {
      text: "Cancel",
      click: function() {
        $(this).dialog("close");
      }
    }]);
    // Open Save Dialog
    $("#saveDialog").dialog("open");
  });
});

其中一些來自Modal確認示例 。 基本上，我們知道在任何圖層上都可以調用保存按鈕。 我們不需要為每個創建一個唯一的對話框。 我們可以創建一個，然后根據需要修改按鈕。