修改编辑示例问题

chenxianhuii · chenxianhuii · commit affe70290bae · 2024-02-29T08:56:12.000+08:00
diff --git a/examples/leaflet/drawAndEditFeatures.html b/examples/leaflet/drawAndEditFeatures.html
@@ -648,17 +648,24 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
 
          // 切换状态
          document.querySelector('#addFeature').addEventListener('click', function() {
-          console.log(isChanged);
           if (isChanged) {
-            document.querySelector('.message').style.display = 'block';
+            var message = document.querySelector('.message');
+            message.style.display = 'block';
+            setTimeout(() => {
+              message.style.display = 'none';
+            }, 3000);
             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';
+            var message = document.querySelector('.message');
+            message.style.display = 'block';
+            setTimeout(() => {
+              message.style.display = 'none';
+            }, 3000);
             document.querySelector('.add-tips').style.display = 'inline-block';
             return;
           }
diff --git a/examples/mapboxgl/drawAndEditFeatures.html b/examples/mapboxgl/drawAndEditFeatures.html
@@ -6,7 +6,7 @@
   <head>
     <meta charset="UTF-8" />
     <title data-i18n="resources.title_editFeatures"></title>
-    <script type="text/javascript" include="draw,snap" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
+    <script type="text/javascript" include="draw,snap,lodash" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
     <style>
       .key-input,
       .value-input {
@@ -140,9 +140,10 @@
         margin-bottom: 10px;
       }
       .info-bottom {
-        margin-top: 20px;
-        height: 55px;
-        float: right;
+        position: absolute;
+        right: 20px;
+        margin-top: 40px;
+        bottom: 10px;
       }
       .edit-tips {
         width: 300px;
@@ -976,11 +977,17 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
           });
           editFeaturesService.editFeatures(addFeatureParams, function (serviceResult) {
             if (serviceResult.result.succeed) {
-              var addFeature = draw.getAll().features[0];
-              if (addFeature) {
+              if(addFeatureId) {
+                draw.delete(addFeatureId);
+                var addFeature = _.cloneDeep(currentFeature.data);
                 addFeature.properties.datasetName = currentDataset;
-                addFeature.properties.id = currentFeature.data.id;
-                draw.add(addFeature);
+                var source = map.getSource(currentDataset);
+                var features = source._data.features;
+                features.push(addFeature);
+                source.setData({
+                  type: 'FeatureCollection',
+                  features: features
+                });
               }
               widgets.alert.showAlert(isUpdate ? '更新要素成功' : '新增要素成功', true, 240);
             }
diff --git a/examples/maplibregl/drawAndEditFeatures.html b/examples/maplibregl/drawAndEditFeatures.html
@@ -6,7 +6,7 @@
   <head>
     <meta charset="UTF-8" />
     <title data-i18n="resources.title_editFeatures"></title>
-    <script type="text/javascript" include="draw,snap" src="../../dist/maplibregl/include-maplibregl.js"></script>
+    <script type="text/javascript" include="draw,snap,lodash" src="../../dist/maplibregl/include-maplibregl.js"></script>
     <style>
       .key-input,
       .value-input {
@@ -976,6 +976,18 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
           });
           editFeaturesService.editFeatures(addFeatureParams, function (serviceResult) {
             if (serviceResult.result.succeed) {
+              if(addFeatureId) {
+                draw.delete(addFeatureId);
+                var addFeature = _.cloneDeep(currentFeature.data);
+                addFeature.properties.datasetName = currentDataset;
+                var source = map.getSource(currentDataset);
+                var features = source._data.features;
+                features.push(addFeature);
+                source.setData({
+                  type: 'FeatureCollection',
+                  features: features
+                });
+              }
               widgets.alert.showAlert(isUpdate ? '更新要素成功' : '新增要素成功', true);
             }
           });
diff --git a/examples/openlayers/drawAndEditFeatures.html b/examples/openlayers/drawAndEditFeatures.html
@@ -351,6 +351,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
       var container = document.getElementById('popup');
       var content = document.getElementById('popup-content');
       var isChanged = false;
+      var currentAddFeature = null;
       getDomains(currentDataset);
       var overlayPopup = new ol.Overlay({
         element: container,
@@ -869,6 +870,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
         });
         console.log('properties', properties);
         currentFeature.data.properties = properties;
+        currentAddFeature.setProperties(properties);
         var olFeature = new ol.format.GeoJSON().readFeature(currentFeature.data);
         if (!olFeature.getId()) {
           datasetInfoList[currentDataset].uniqueId++;
@@ -935,6 +937,8 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
           });
           editFeaturesService.editFeatures(addFeatureParams, function (serviceResult) {
             if (serviceResult.result.succeed) {
+              // currentSource.removeFeature(currentAddFeature);
+              // currentSource.addFeature(currentFeature.origin);
               widgets.alert.showAlert(isUpdate ? '更新要素成功' : '新增要素成功', true);
             }
           });
@@ -970,8 +974,6 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
       function startSelect(multi = false) {
         clearInteraction();
         select = new ol.interaction.Select({
-          wrapX: false,
-          multi: true,
           style: new ol.style.Style({
             fill: new ol.style.Fill({
               color: [90, 90, 90, 0.9]
@@ -991,7 +993,8 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
         select.on('select', function (e) {
           isChanged = true;
           var feature = e.selected[0];
-          if (feature) {
+          isModifyFeature = feature && feature.getProperties().features && feature.getProperties().geometries;
+          if (feature && !isModifyFeature) {
             if (status == 'DELETE') {
             var props = new ol.format.GeoJSON().writeFeature(feature);
             props = JSON.parse(props);
@@ -1076,6 +1079,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
           });
           draw.on('drawend', function(e) {
             if (e.feature) {
+              currentAddFeature = e.feature;
               map.removeOverlay(overlayPopup);
               var props = new ol.format.GeoJSON().writeFeature(e.feature);
               props = JSON.parse(props);
