打开用于点击按钮时在地图
问题描述：
外我有一个小叶地图具有多个层中选择的一个层jQuery用户界面对话框。我可以绘制多段线，删除并编辑它们的特定图层，然后使用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, ...
});
}
答
我建议这样的事情，在该对话框中定义和需要保存操作时，后调整。
工作实施例：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 Confirmation Example。基本上，我们知道在任何层上，保存按钮都可能被调用。我们不需要为每个对话创建一个独特的对话框。我们可以创建一个，然后根据需要修改按钮。
这是没有看到HTML或层和按钮之间的关系太混乱。按钮如何知道正在编辑的图层？ – Twisty