From 850311d1d10a7fdb7dc007a3bfc43fafdfc369fc Mon Sep 17 00:00:00 2001 From: chenxianhui Date: Sun, 4 Feb 2024 13:45:53 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=BC=96=E8=BE=91=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/leaflet/drawAndEditFeatures.html | 93 ++++++++++++++++---- examples/mapboxgl/drawAndEditFeatures.html | 17 ++-- examples/maplibregl/drawAndEditFeatures.html | 17 ++-- examples/openlayers/drawAndEditFeatures.html | 17 ++-- 4 files changed, 89 insertions(+), 55 deletions(-) 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 @@
Y
+
+ + +
+

@@ -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; }