增加修改功能

src/components/ration/soilMoisture/index.vue

@@ -98,6 +98,7 @@
                   type="primary"
                   size="small"
                   icon="el-icon-edit"
+                   @click="editSelected(scope.$index, simpleData)"
                 ></el-button>
                 <el-button
                   type="danger"
@@ -136,12 +137,17 @@
               />
             </div>
             <canvas v-show="checkRealityWait" id="scaleBar"></canvas>
+            <div class="update-btns" v-show="updatePointVisible">
+              <div><el-button type="primary" @click="selectPoint">选取点</el-button></div>
+              <div><el-button type="primary" @click="savePoint">保存点</el-button></div>
+            </div>
           </div>
         </div>
         <div v-show="checkRealityWait" class="bottomCont">
           <span>制图单位：中国科学院空天信息创新研究院</span><br />
           <span>制图日期：{{ createImgTime }}</span>
         </div>
+        
       </div>
     </div>
     <SampleSetting
@@ -252,6 +258,9 @@ export default {
       isDeepSpace: false,
       depthList: [],
       createImgTime: null,
+      updatePointVisible:false,
+      currentSelectPoint: null, //当前选择修改的点对象
+      updatedPoint:null, // 修改后的点对象
     };
   },
   mounted() {
@@ -594,6 +603,61 @@ export default {
         simpleData.splice(index, 1);
       });
     },
+    editSelected(index, simpleData) {
+      //显示地图按钮
+      this.updatePointVisible = true;
+     
+      cu.removePoint()
+      //将当前选择要修改的点变为红色
+      if (simpleData.length !== 0) {
+        for (let i in simpleData) {
+          if( i == index ){
+            cu.addPoint(simpleData[index].lng, simpleData[index].lat, 10,true);
+          }else{
+            cu.addPoint(simpleData[i].lng, simpleData[i].lat, 10);
+          }
+        }
+      }
+       //保存当前修改的点信息
+       this.currentSelectPoint = simpleData[index];
+      // this.$confirm(`确定修改该样本？`, "提示", {
+      //   confirmButtonText: "确定",
+      //   cancelButtonText: "取消",
+      //   type: "warning",
+      // }).then(async () => {
+      //   simpleData.splice(index, 1);
+      // });
+    },
+    //选择点
+    async selectPoint(){
+     //启动新增点，点击地图，新增一个点
+     let res = await cu.clickToAddPoint()
+     cu.addPoint(res.lng, res.lat, 10);
+     this.updatedPoint = {
+      ...this.currentSelectPoint,
+        lng: res.lng,
+        lat: res.lat
+      }
+      console.log(this.updatedPoint,'查看点');
+      console.log(this.simpleData[2],'查看simpleData');
+    },
+    // 保存点
+    savePoint(){
+       //清空所有点
+      cu.removePoint();
+      let index = this.simpleData.indexOf(this.currentSelectPoint)
+      //更新table中信息
+      this.simpleData.splice(index,1,this.updatedPoint)
+      //重新添加到地图中
+      if (this.simpleData.length !== 0) {
+        for (let i in this.simpleData) {
+          cu.addPoint(this.simpleData[i].lng, this.simpleData[i].lat, 10);
+        }
+      }
+      this.$refs.multipleTable.toggleAllSelection();
+      //关闭地图按钮
+      this.updatePointVisible = false;
+    }
   },
   computed: {
     globalSampleFun: function () {
@@ -741,6 +805,20 @@ export default {
     margin-left: 100%;
     white-space: nowrap;
   }
+  .update-btns{
+    width: 100px;
+    height: 70px;
+    background-color: #ffffff;
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    z-index: 99;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    border-radius: 10px;
+    flex-direction: column;
+  }
 }
 
 .onBorder {

src/lib/cesiumUtils.js

@@ -162,20 +162,47 @@ class CesiumUtils {
         this.viewer.imageryLayers.remove(this.privide);
     }
 
-    static addPoint(pLon, pLat, pAlt) {
+    static addPoint(pLon, pLat, pAlt, isSelected = false) {
         var pointEntity = this.viewer.entities.add({
             position: Cesium.Cartesian3.fromDegrees(pLon, pLat, pAlt),
             point: {
                 pixelSize: 10,
-                color: Cesium.Color.YELLOW
+                color: isSelected ? Cesium.Color.RED : Cesium.Color.YELLOW,
-            }
+            },
         });
     }
     
     static removePoint() {
         this.viewer.entities.removeAll();
     }
-
+    //修改点的位置
+    static clickToAddPoint(){
+            return new Promise((resolve, reject) => {
+                var scene = this.viewer.scene;
+                var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+                const that = this;
+                handler.setInputAction(function (movement) {
+                    // 清除历史单击点
+                    // handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+                    // movement.position 像素的x、y坐标
+                    var cartesian = that.viewer.camera.pickEllipsoid(
+                        movement.position,
+                        scene.globe.ellipsoid
+                    );
+                    if (cartesian) {
+                        var cartographic = Cesium.Cartographic.fromCartesian(cartesian); // 转弧度
+                        // 将弧度转换为度数
+                        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
+                        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
+                        let lng = Number(longitudeString);
+                        let lat = Number(latitudeString);
+                        resolve({ lng, lat });
+                    }else{
+                        reject('未获取到坐标');
+                    }
+              }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+            });
+    }
     //鼠标点击
     static handleClick() {
         var scene = this.viewer.scene;
@@ -206,10 +233,10 @@ class CesiumUtils {
                 angleDataIds: [],
                 geoX: longitudeString,
                 geoY: latitudeString,
-                metaDataId: sessionStorage.getItem('metaDataId'),
+                metaDataId: sessionStorage.getItem("metaDataId"),
-                referImageIds: []
+                referImageIds: [],
-            }
+            };
-            getProductValue(of).then(res => {
+            getProductValue(of).then((res) => {
                 if (res.code == 200) pValue = res.data.imagePixel;
                 // 清空容器
                 const pendPreview =