feat:添加点位删除功能

src/utils/html2Canvas.js

@@ -31,7 +31,7 @@ function printPdf(title) {
         leftHeight -= pageHeight;
         position -= 841.89;
         //避免添加空白页
-        // if (leftHeight > 0) {
+        // if (leftHeight > 1) {
         //   PDF.addPage()
         // }
       }

src/views/authentic/Pdf.vue

@@ -13,45 +13,45 @@
       </div>
       <div id="printTest" class="pdf-dialog-box">
         <div class="pdf-my-body"  >
-        <div class="pdfBox" >
-          <div class="a4" id="pdfDom">
-            <div class="a4_title">确权单</div>
-            <table class="a4_table" border=1 style="border-collapse: collapse;">
-              <tr>
-                <td class="name">农场地址</td>
-                <td class="text">{{rowData.address}}</td>
-                <td class="name">农场名称</td>
-                <td class="text">{{rowData.farmName}}</td>
-              </tr>
-              <tr>
-                <td class="name">创建时间</td>
-                <td class="text">{{rowData.createDate}}</td>
-                <td class="name">农场面积</td>
-                <td class="text">{{rowData.area}}亩</td>
-              </tr>
-              <tr>
-                <td class="name">作物物种</td>
-                <td class="text">{{rowData.speciesTypeName}}</td>
-                <td class="name">客户姓名</td>
-                <td class="text">{{rowData.masterName}}</td>
-              </tr>
-              <tr>
-                <td class="name">联系电话</td>
-                <td class="text">{{rowData.masterTel}}</td>
-              </tr>
-              <tr>
-                <td class="name">经纬度</td>
-                <td colspan="3" class="text2">{{rowData.points}}</td>
-              </tr>
-            </table>
-            <div class="a4_sub_title">地块四至图</div>
-            <img :key="imgUrl" v-show="imgUrl" class="img-content img" style="z-index: 999" width="595" height="500" :src="imgUrl" />
-            <div :key="imgUrl" v-show="!imgUrl" style="width: 595px;height: 500px" class="img-content" ref="mapRef" id="mapRefId"></div>
-            <div class="signature">签名:______________</div>
+          <div class="pdfBox">
+            <div class="a4" id="pdfDom">
+              <div class="a4_title">确权单</div>
+              <table class="a4_table" border=1 style="border-collapse: collapse;">
+                <tr>
+                  <td class="name">农场地址</td>
+                  <td class="text">{{rowData.address}}</td>
+                  <td class="name">农场名称</td>
+                  <td class="text">{{rowData.farmName}}</td>
+                </tr>
+                <tr>
+                  <td class="name">创建时间</td>
+                  <td class="text">{{rowData.createDate}}</td>
+                  <td class="name">农场面积</td>
+                  <td class="text">{{rowData.area}}亩</td>
+                </tr>
+                <tr>
+                  <td class="name">作物物种</td>
+                  <td class="text">{{rowData.speciesTypeName}}</td>
+                  <td class="name">客户姓名</td>
+                  <td class="text">{{rowData.masterName}}</td>
+                </tr>
+                <tr>
+                  <td class="name">联系电话</td>
+                  <td class="text">{{rowData.masterTel}}</td>
+                </tr>
+                <tr>
+                  <td class="name">经纬度</td>
+                  <td colspan="3" class="text2">{{rowData.points}}</td>
+                </tr>
+              </table>
+              <div class="a4_sub_title">地块四至图</div>
+              <img :key="imgUrl" v-show="imgUrl" class="img-content img" style="z-index: 999" width="595" height="500" :src="imgUrl" />
+              <div :key="imgUrl" v-show="!imgUrl" style="width: 595px;height: 500px" class="img-content" ref="mapRef" id="mapRefId"></div>
+              <div class="signature">签名:______________</div>
+            </div>
           </div>
         </div>
       </div>
-      </div>
       <div style="text-align: left">
          <el-button size="large" color="#626aef"  @click="handlePrint">保存</el-button>
         <!-- <el-button size="large" color="#626aef"  v-print="printObj">打印</el-button> -->
@@ -226,21 +226,21 @@ $body-height:calc(100% - $title-height);
     font-family: PingFangSC-Medium, PingFang SC;
     background-color: #FFFFFF;
     width:595px;
-    height:1000px;
+    height:auto;
     margin: 0 auto;
-    padding: 19px 63px 19px 63px;
+    padding: 15px 63px 15px 63px;
     font-weight: 600;
     color: #000000;
     .a4_title{
       width:595px;
-      height: 33px;
+      height: 28px;
       font-size: 24px;
       text-align: center;
       margin: 10px 0px 10px 0px;
     }
     .a4_sub_title{
       font-size: 16px;
-      margin: 10px 0px 10px 0px;
+      margin: 5px 0px 5px 0px;
     }
     .a4_table{
       height: calc(842px - 33px - 26px - 600px);
@@ -280,7 +280,7 @@ $body-height:calc(100% - $title-height);
       width:595px;
       height: 20px;
       z-index: 1000;
-      margin-top: 40px;
+      margin-top: 15px;
       text-align: right;
     }
   }

src/views/authentic/authenticMap.js

@@ -17,7 +17,6 @@ import { register } from "ol/proj/proj4";
 import GeometryCollection from 'ol/geom/GeometryCollection.js';
 import { ElMessage } from "element-plus";
 import { useStore } from "vuex";
-import Polygon from 'ol/geom/Polygon.js';
 proj4.defs(
   "EPSG:38572",
   "+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs"
@@ -30,7 +29,8 @@ export let mapData = reactive({
   point: null,
   selectPointArr: [],
   isPointHide: null,
-  disabledForm : false
+  disabledForm : false,
+  selectPoint:''
 });
 
 function resetMapData(){
@@ -41,6 +41,7 @@ function resetMapData(){
   mapData.selectPointArr= []
   mapData.isPointHide= null
   mapData.disabledForm= false
+  mapData.selectPoint= ''
 }
 
 /**
@@ -119,14 +120,6 @@ class AuthenticMap {
       if(e.type === "modifyend"){
         mapData.isEditArea = false;
         mapData.isEditArea = true;
-        const features = e.mapBrowserEvent.map.getFeaturesAtPixel(e.mapBrowserEvent.pixel);
-        console.log('features',features);
-      if (features.length > 0) {
-        const feature = features[0];
-        const geometry = feature.getGeometry();
-          const coordinates = geometry.getCoordinates()[0]; // 获取多边形的顶点坐标
-          console.log('Modified polygon coordinates:', coordinates);
-      }
       }
     }, function(e){
       let f = null
@@ -160,20 +153,11 @@ class AuthenticMap {
     this.kmap.fit(extent)
   }
 
+  //撤销上一个点
   undoLastDraw() {
-    const features = this.kmap.getLayerFeatures();
-    features.forEach((feature) => {
-    //   console.log("feature", feature, mapData.point);
-      const coord = feature.getGeometry().getCoordinates()[0];
-    });
-    // this.kmap.setFeatureCursor("move")
-    // const lastFeature = this.drawnFeatures.pop();
-    // if (lastFeature) {
-    //   // const features = this.kmap.getLayerFeatures();
-    //   console.log("this", this.kmap.polygonLayer.source);
-    //   this.kmap.polygonLayer.source.removeFeature(lastFeature);
-    //   // this.kmap.getLayers().getArray()[1].getSource().removeFeature(lastFeature);
-    // }
+    // const coordinates = this.kmap.getLayerFeatures()[0].getGeometry().getCoordinates()
+    // coordinates[0][0].pop()
+    // this.kmap.getLayerFeatures()[0].getGeometry().getCoordinates(coordinates)
   }
 
   //      取消地块
@@ -284,38 +268,47 @@ class AuthenticMap {
     });
     mapData.selectPointArr = [];
   }
+
+  //选中点位方法
+  selectPonitFun(map,evt){
+    map.forEachFeatureAtPixel(evt.pixel, function (f, layer) {
+      if (
+        layer instanceof VectorLayer &&
+        (
+          layer.get("name") === "defaultPolygonLayer")
+      ) {
+        const features = map.getFeaturesAtPixel(evt.pixel);
+        if (features.length > 0) {
+          const feature = features[0];
+          const geometry = feature.getGeometry();
+          const coordinates = geometry.getCoordinates()[0]; // 获取多边形的顶点坐标
+          if(Array.isArray(coordinates)){
+            ElMessage.warning("编辑中")
+          }else{
+            ElMessage.success("已选择该点位")
+            mapData.selectPoint = coordinates
+          }
+        }
+      }
+    });
+  }
+
   // 地图点击事件
   addMapSingerClick() {
     let that = this;
     that.kmap.on("singleclick", (evt) => {
       if(mapData.curPointData.id && !mapData.disabledForm && mapData.selectPointArr.length===1){
-        ElMessage.warning("编辑中")
-        that.kmap.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
-          if (
-            layer instanceof VectorLayer &&
-            (
-              layer.get("name") === "defaultPolygonLayer")
-          ) {
-            console.log('09090909');
-            // const features = e.mapBrowserEvent.map.getFeaturesAtPixel(e.mapBrowserEvent.pixel);
-        // console.log('features',features);
-            // if (features.length > 0) {
-              const feature = mapData.selectPointArr[0];
-              const geometry = feature.getGeometry();
-              console.log('geometry',geometry);
-                const coordinates = geometry.getCoordinates()[0]; // 获取多边形的顶点坐标
-                console.log('Modified polygon coordinates:', coordinates);
-            // }
-          }
-        });
+        that.selectPonitFun(that.kmap.map,evt)
         return;
       }
       if(!mapData.curPointData.id && mapData.isEdit){
-        ElMessage.warning("编辑中")
+        // ElMessage.warning("编辑中")
+        that.selectPonitFun(that.kmap.map,evt)
         return;
       }
+      //判断是否是导入的数据
       if(that.store.state.authentic.isEditStatus){
-        ElMessage.warning("编辑中")
+        that.selectPonitFun(that.kmap.map,evt)
         return;
       }
       let num = 0;
@@ -362,40 +355,33 @@ class AuthenticMap {
     });
   }
 
+  deletePointFun(point,callback){
+    const coordinates = point.getGeometry().getCoordinates();
+    let array = coordinates[0][0]
+    const index = array.findIndex(subArray => subArray.includes(mapData.selectPoint))
+    // 如果点存在，则删除它
+    if (index > -1) {
+      coordinates[0][0].splice(index, 1); // 删除点
+      // 更新多边形的坐标
+      point.getGeometry().setCoordinates(coordinates); // 更新几何形状
+    }
+    callback && callback()
+  }
+
   // 移除点的功能
-  removePoint() {
-    // console.log('this.kmap.getLayerFeatures',this.kmap.getLayerFeatures());
-    // const polygonFeature = this.kmap.getLayerFeatures()[0]
-    // var coordinateToRemove = [113.61271651653868, 23.58619390922549]; // 示例坐标，应替换为实际坐标
-    // var geometry = polygonFeature.getGeometry();
-    // var coordinates = geometry.getCoordinates();
-    // console.log('coordinates',coordinates);
+  removePoint(callback) {
     // 获取多边形的所有坐标
-    console.log('arr',mapData.selectPointArr);
     const features = this.kmap.getLayerFeatures()
-    features.forEach(item =>{
-      if(item.get("id")===mapData.selectPointArr[0].get("id")){
-        let coordinates = item.getGeometry().getCoordinates();
-        // 删除多边形最后一个坐标点
-        coordinates[0][0].pop();
-        // 更新多边形的坐标
-        item.getGeometry().setCoordinates(coordinates);
-      }
-    })
-    
-    // // 查找要删除的点的索引
-    // var indexToRemove = coordinates[0].findIndex(function(coordinate) {
-    //   return coordinate[1][0] === coordinateToRemove[0] && coordinate[1][1] === coordinateToRemove[1];
-    // });
-    // console.log('indexToRemove',indexToRemove);
-    
-    // // 如果点存在，则删除它
-    // if (indexToRemove > -1) {
-    //   coordinates[0].splice(indexToRemove, 1); // 删除点
-    //   geometry.setCoordinates(coordinates); // 更新几何形状
-    // }
-    // console.log('geometry',geometry);
-    // console.log('coordinates',coordinates);
+    if(mapData.point){
+      this.deletePointFun(mapData.point,callback)
+    }else{
+      if(mapData.selectPointArr.length<1) return ElMessage.warning("请选择点位")
+      features.forEach(item =>{
+        if(item.get("id")===mapData.selectPointArr[0].get("id")){
+            this.deletePointFun(item,callback)
+          }
+      })
+    }
   }
 
   //   获取所有选中点位

src/views/authentic/index.vue

@@ -96,18 +96,18 @@
                     <div ref="mapRef" class="map"></div>
                 </div>
                 <div class="tool-group">
-                    <!-- <div class="btn" @click="handleCancel" v-show="isEdit&&mapData.point">
-            <img
-              class="icon"
-              src="@/assets/images/common/back-black-icon.png"
-              alt=""
-            />
-            <span>撤销</span>
-          </div> -->
-                    <div class="btn" @click="handleDeletePoint" v-show="mapData.selectPointArr.length > 0 && isEdit">
+                    <!-- <div class="btn" @click="handleCancel">
+                        <img class="icon" src="@/assets/images/common/back-black-icon.png" alt="" />
+                        <span>撤销</span>
+                    </div> -->
+                    <!-- <div
+                        class="btn"
+                        @click="handleDeletePoint"
+                        v-show="mapData.selectPointArr.length > 0 && !disabledForm"
+                    >
                         <el-icon size="15"><CloseBold /></el-icon>
                         <span>删除点</span>
-                    </div>
+                    </div> -->
                     <div class="btn delete" @click="handleDelete" v-show="mapData.selectPointArr.length > 0">
                         <el-icon size="15" color="#fff"><CloseBold /></el-icon>
                         <span>删除地块</span>
@@ -121,6 +121,7 @@
                         </div>
                         <div class="btn-group">
                             <div v-show="disabledForm" class="edit" @click="handleEdit">编辑</div>
+                            <div v-show="!disabledForm" class="edit" @click="handleDeletePoint">删除点</div>
                             <div
                                 v-show="mapData.selectPointArr.length > 0"
                                 class="edit ml"
@@ -351,9 +352,11 @@ const onRest = () => {
 };
 
 const isEdit = ref(false);
+const typeStr = ref("");
 
 // 编辑
 const handleEdit = () => {
+    typeStr.value = "edit";
     disabledForm.value = false;
     mapData.disabledForm = false;
     authenticMap.startModify();
@@ -424,8 +427,9 @@ const handleExceed = (files) => {
     uploadRef.value.handleStart(file);
 };
 
-const heightArr = ref([])
+const heightArr = ref([]);
 const onSuccess = (res) => {
+    typeStr.value = "upload";
     if (res.code === 0) {
         ElMessage.success("上传成功");
         store.commit("authentic/SET_ISEDIT_STATUS", true);
@@ -436,12 +440,12 @@ const onSuccess = (res) => {
         authenticMap.setAreaGeometry(geom);
         authenticMap.fit([res.data.geom]);
         updatePointList("upload");
-        heightArr.value = res.data.height
-        const arr = pointList.value.map((item,index) =>{
-            return [...item,res.data.height[index]]
-        })
-        getArea(arr)
-        authenticMap.startModify('upload');
+        heightArr.value = res.data.height;
+        const arr = pointList.value.map((item, index) => {
+            return [...item, res.data.height[index]];
+        });
+        getArea(arr);
+        authenticMap.startModify("upload");
         uploadRef.value.clearFiles();
     } else {
         ElMessage.error("上传失败");
@@ -449,12 +453,12 @@ const onSuccess = (res) => {
 };
 
 // 获取面积/亩
-const getArea = (arr) =>{
-    VE_API.authentic.getArea(arr).then(res =>{
-        const area = (res.data/666.67).toFixed(2)
+const getArea = (arr) => {
+    VE_API.authentic.getArea(arr).then((res) => {
+        const area = (res.data / 666.67).toFixed(2);
         formInline.mu = area + "亩";
-    })
-}
+    });
+};
 
 // 打印
 const handlePrint = () => {
@@ -491,6 +495,7 @@ const handleDelete = () => {
 // 创建
 const isRefresh = ref(true);
 const handleAdd = () => {
+    typeStr.value = "add";
     isRefresh.value = false;
     isEdit.value = false;
     if (isUpdata.value) {
@@ -511,13 +516,14 @@ const handleAdd = () => {
 
 // 删除点
 const handleDeletePoint = () => {
-    authenticMap.removePoint();
+    authenticMap.removePoint(() => {
+        updatePointList(typeStr.value);
+    });
 };
 
 // 撤销
 const handleCancel = () => {
     authenticMap.undoLastDraw();
-    //   authenticMap.cancelDraw()
 };
 
 // 导出
@@ -594,14 +600,14 @@ const updatePointList = (type) => {
     pointList.value = result;
 
     //判断是否是导入数据，
-    if(store.state.authentic.isEditStatus){
-        const arr = pointList.value.map((item,index) =>{
-            return [...item,heightArr.value[index]]
-        })
-        if(arr[0][2]){
-            getArea(arr)
+    if (store.state.authentic.isEditStatus) {
+        const arr = pointList.value.map((item, index) => {
+            return [...item, heightArr.value[index]];
+        });
+        if (arr[0][2]) {
+            getArea(arr);
         }
-    }else{
+    } else {
         formInline.mu = area + "亩";
     }
 };