diff --git a/examples/leaflet/drawAndEditFeatures.html b/examples/leaflet/drawAndEditFeatures.html
index b9f04a2d1..7cf90bf8a 100644
--- a/examples/leaflet/drawAndEditFeatures.html
+++ b/examples/leaflet/drawAndEditFeatures.html
@@ -42,21 +42,14 @@
color: #a09595;
}
- .add-feature-info {
+ .add-feature-info,
+ .delete-feature-info,
+ .edit-feature-info {
padding: 10px;
- max-height: 820px;
- overflow-y: scroll;
- }
- .delete-feature-info {
- padding: 10px;
- max-height: 820px;
- overflow-y: scroll;
- }
- .edit-feature-info {
- padding: 10px;
- max-height: 820px;
+ max-height: 745px;
overflow-y: scroll;
}
+
.btn-group-xs {
margin-right: 6px;
}
@@ -182,6 +175,24 @@
.button-group, .info-panel, .edit-tips {
box-shadow: 0px 0px 5px 0 rgba(0,0,0,0.3);
}
+ .add-tips {
+ display: none;
+ color: red;
+ margin-right: 16px;
+ }
+ .message {
+ width: 300px;
+ height: 50px;
+ position: absolute;
+ top: 15px;
+ font-size: 16px;
+ left: 50%;
+ padding-top: 15px;
+ display: none;
+ margin-left: -150px;
+ background: #fff;
+ z-index: 9999;
+ }
@@ -200,6 +211,10 @@
@@ -258,6 +274,7 @@
@@ -323,6 +340,7 @@
:
var curEditOriginLayers = [];
var curEditOriginFeatures = [];
var currentEditingLayer = null;
+ var isChanged = false;
var typeMap = {
REGION: 'Polygon',
LINE: 'Line',
@@ -582,7 +600,7 @@
:
// 系统字段
inputEle.disabled = filterFields[currentFeature.dataset][key];
item.appendChild(inputEle);
- if (key === 'VIDEO') {
+ if (key === 'VIDEO' && properties[key]) {
var videoPlayIcon = document.createElement('div');
videoPlayIcon.className = 'playIcon';
var video = document.createElement('video');
@@ -630,9 +648,30 @@
:
});
// 切换状态
- document.querySelector('.button-group').addEventListener('click', function(e) {
- var className = e.target.className;
- switchPanel(className);
+ document.querySelector('#addFeature').addEventListener('click', function() {
+ console.log(isChanged);
+ if (isChanged) {
+ document.querySelector('.message').style.display = 'block';
+ document.querySelector('.add-tips').style.display = 'inline-block';
+ return;
+ }
+ switchPanel('add');
+ });
+ document.querySelector('#editFeature').addEventListener('click', function() {
+ if (isChanged) {
+ document.querySelector('.message').style.display = 'block';
+ document.querySelector('.add-tips').style.display = 'inline-block';
+ return;
+ }
+ switchPanel('edit');
+ });
+ document.querySelector('#deleteFeature').addEventListener('click', function() {
+ if (isChanged) {
+ document.querySelector('.message').style.display = 'block';
+ document.querySelector('.add-tips').style.display = 'inline-block';
+ return;
+ }
+ switchPanel('delete');
});
document.querySelector('.add-attribute-info').addEventListener('change', checkInput);
@@ -659,6 +698,9 @@
:
if (currentShowPanel) {
document.querySelector('.' + currentShowPanel).style.display = 'none';
}
+ document.querySelector('.message').style.display = 'none';
+ document.querySelector('.add-tips').style.display = 'none';
+ isChanged = false;
}
});
@@ -673,6 +715,9 @@
:
})
curEditOriginLayers = [];
curEditOriginFeatures = [];
+ document.querySelector('.message').style.display = 'none';
+ document.querySelector('.add-tips').style.display = 'none';
+ isChanged = false;
if (currentShowPanel) {
document.querySelector('.' + currentShowPanel).style.display = 'none';
}
@@ -683,6 +728,7 @@
:
var deleteEle = document.querySelector('.delete-feature-list');
deleteEle.innerHTML = '';
deleteList = {};
+ isChanged = false;
if (currentShowPanel) {
document.querySelector('.' + currentShowPanel).style.display = 'none';
}
@@ -698,7 +744,7 @@
:
}
map.pm.disableGlobalEditMode();
currentEditingLayer = null;
- if (className.indexOf('plus') > -1) {
+ if (className === 'add') {
curEditOriginLayers = [];
curEditOriginFeatures = [];
var type = datasetInfoList[currentDataset].type;
@@ -707,7 +753,7 @@
:
document.querySelector('.add-feature-info').style.display = 'block';
currentShowPanel = 'add-feature-info';
status = 'ADD';
- } else if (className.indexOf('edit') > -1) {
+ } else if (className === 'edit') {
getDomains(currentDataset);
endDraw();
if (fromAdd) {
@@ -719,7 +765,7 @@
:
currentShowPanel = 'edit-feature-info';
status = 'EDIT';
startSelect();
- } else if (className.indexOf('trash') > -1) {
+ } else if (className === 'delete') {
curEditOriginLayers = [];
curEditOriginFeatures = [];
document.querySelector('.edit-tips').style.display = 'none';
@@ -742,9 +788,15 @@
:
var saveBtn = document.querySelector('.addSave');
var editBtn = document.querySelector('.editSave');
saveBtn.addEventListener('click', function () {
+ document.querySelector('.message').style.display = 'none';
+ document.querySelector('.add-tips').style.display = 'none';
+ isChanged = false;
save('add');
});
editBtn.addEventListener('click', function () {
+ document.querySelector('.message').style.display = 'none';
+ document.querySelector('.add-tips').style.display = 'none';
+ isChanged = false;
save('edit');
});
var deleteBtn = document.querySelector('.delete');
@@ -857,6 +909,7 @@
:
deleteLayerList = [];
var deleteEle = document.querySelector('.delete-feature-list');
deleteEle.innerHTML = '';
+ isChanged = false;
}
});
});
@@ -872,6 +925,7 @@
:
allAvailableLayers.forEach(function(layer) {
layer.off('click');
layer.on('click', function(e) {
+ isChanged = true;
map.pm.disableGlobalEditMode();
var feature = e.target.feature;
if (status === 'EDIT') {
@@ -964,6 +1018,7 @@
:
currentFeature.data = feature;
// currentFeature.dataset = currentDataset;
document.querySelector('.add-feature-info>.space-info>.input-element').value = JSON.stringify({ geometry: currentFeature.data.geometry});
+ isChanged = true;
}
});
}
diff --git a/examples/mapboxgl/drawAndEditFeatures.html b/examples/mapboxgl/drawAndEditFeatures.html
index 71fe4ac7c..76e9b0ca0 100644
--- a/examples/mapboxgl/drawAndEditFeatures.html
+++ b/examples/mapboxgl/drawAndEditFeatures.html
@@ -48,21 +48,14 @@
color: #a09595;
}
- .add-feature-info {
+ .add-feature-info,
+ .delete-feature-info,
+ .edit-feature-info {
padding: 10px;
- max-height: 820px;
- overflow-y: scroll;
- }
- .delete-feature-info {
- padding: 10px;
- max-height: 820px;
- overflow-y: scroll;
- }
- .edit-feature-info {
- padding: 10px;
- max-height: 820px;
+ max-height: 745px;
overflow-y: scroll;
}
+
.btn-group-xs {
margin-right: 6px;
}
diff --git a/examples/maplibregl/drawAndEditFeatures.html b/examples/maplibregl/drawAndEditFeatures.html
index a31672351..d5005495a 100644
--- a/examples/maplibregl/drawAndEditFeatures.html
+++ b/examples/maplibregl/drawAndEditFeatures.html
@@ -48,21 +48,14 @@
color: #a09595;
}
- .add-feature-info {
+ .add-feature-info,
+ .delete-feature-info,
+ .edit-feature-info {
padding: 10px;
- max-height: 620px;
- overflow-y: scroll;
- }
- .delete-feature-info {
- padding: 10px;
- max-height: 620px;
- overflow-y: scroll;
- }
- .edit-feature-info {
- padding: 10px;
- max-height: 620px;
+ max-height: 745px;
overflow-y: scroll;
}
+
.btn-group-xs {
margin-right: 6px;
}
diff --git a/examples/openlayers/drawAndEditFeatures.html b/examples/openlayers/drawAndEditFeatures.html
index 40d1278d2..51ed2ea5a 100644
--- a/examples/openlayers/drawAndEditFeatures.html
+++ b/examples/openlayers/drawAndEditFeatures.html
@@ -41,21 +41,14 @@
color: #a09595;
}
- .add-feature-info {
+ .add-feature-info,
+ .delete-feature-info,
+ .edit-feature-info {
padding: 10px;
- max-height: 820px;
- overflow-y: scroll;
- }
- .delete-feature-info {
- padding: 10px;
- max-height: 820px;
- overflow-y: scroll;
- }
- .edit-feature-info {
- padding: 10px;
- max-height: 820px;
+ max-height: 745px;
overflow-y: scroll;
}
+
.btn-group-xs {
margin-right: 6px;
}