feat:添加获取面积接口

src/api/config.js

@@ -1,10 +1,12 @@
 let server = VE_ENV.SERVER
 let serverMock = "https://mock.apipark.cn/m1/4662471-4313509-default/"
+let pythonServe = "http://birds-api-1-2.sysuimars.cn/"
 // let djiCloudBase = "http://127.0.0.1/";
 let djiCloudBase = "https://djiapi.sysuimars.com/";
 
 module.exports = {
     base_url :server + "site/",
+    base_url_python: pythonServe,
     server_mock :serverMock + "site/",
     dji_cloud_base :djiCloudBase,
     image_url:server+"images/",

src/api/modules/authentic.js

@@ -21,4 +21,8 @@ module.exports = {
     url: config.base_url + "plugin_ownership/exportList",
     type: "post",
   },
+  getArea: {
+    url: config.base_url_python + "geom/area",
+    type: "post",
+  },
 };

src/utils/ol-map/Map.js

@@ -184,8 +184,8 @@ class Map {
 	modifyDraw(callback, condition) {
 		this.modify = new Modify({
 			source: this.polygonLayer.source,
-			condition:condition || function(){return true;},
-			insertVertexCondition:condition || function(){return true;},
+			// condition:condition || function(){return true;},
+			insertVertexCondition: condition||'never',
 			pixelTolerance: 10, //设置吸附像素值
 
 		})

src/views/authentic/authenticMap.js

@@ -17,6 +17,7 @@ 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"
@@ -118,6 +119,14 @@ 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
@@ -131,6 +140,7 @@ class AuthenticMap {
       if(!res){
         ElMessage.warning("编辑中")
       }
+      res = f.get("height")?false:res
       return res
     });
     this.kmap.addLayer(this.clickPointLayer.layer);
@@ -207,7 +217,6 @@ class AuthenticMap {
     this.kmap.endModify();
   }
 
-
   // 开始编辑
   startModify(type) {
     this.kmap.startModify();
@@ -281,6 +290,24 @@ class AuthenticMap {
     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);
+            // }
+          }
+        });
         return;
       }
       if(!mapData.curPointData.id && mapData.isEdit){
@@ -337,16 +364,38 @@ class AuthenticMap {
 
   // 移除点的功能
   removePoint() {
-    // console.log('getDefaultCursor',this.kmap.getDefaultCursor());
-    // this.kmap.setDefaultCursor('text')
-    // console.log('getDefaultCursor',this.kmap.getDefaultCursor());
-    // var source = this.kmap.setDefaultCursor('move');
-    // console.log('source',this.kmap);
-    // var source = this.kmap.polygonLayer.source
-    // console.log('mapData.curPointData',mapData.curPointData);
-    // source.removeFeature(mapData.curPointData)
-    // source.removeFeature(pointFeature);
-    // this.kmap.endDraw1()
+    // 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);
+    // 获取多边形的所有坐标
+    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);
   }
 
   //   获取所有选中点位

src/views/authentic/index.vue

@@ -104,10 +104,10 @@
             />
             <span>撤销</span>
           </div> -->
-                    <!-- <div class="btn" @click="handleDeletePoint">
-            <el-icon size="15"><CloseBold /></el-icon>
-            <span>删除点</span>
-          </div> -->
+                    <div class="btn" @click="handleDeletePoint" v-show="mapData.selectPointArr.length > 0 && isEdit">
+                        <el-icon size="15"><CloseBold /></el-icon>
+                        <span>删除点</span>
+                    </div>
                     <div class="btn delete" @click="handleDelete" v-show="mapData.selectPointArr.length > 0">
                         <el-icon size="15" color="#fff"><CloseBold /></el-icon>
                         <span>删除地块</span>
@@ -424,6 +424,7 @@ const handleExceed = (files) => {
     uploadRef.value.handleStart(file);
 };
 
+const heightArr = ref([])
 const onSuccess = (res) => {
     if (res.code === 0) {
         ElMessage.success("上传成功");
@@ -435,13 +436,26 @@ const onSuccess = (res) => {
         authenticMap.setAreaGeometry(geom);
         authenticMap.fit([res.data.geom]);
         updatePointList("upload");
-        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("上传失败");
     }
 };
 
+// 获取面积/亩
+const getArea = (arr) =>{
+    VE_API.authentic.getArea(arr).then(res =>{
+        const area = (res.data/666.67).toFixed(2)
+        formInline.mu = area + "亩";
+    })
+}
+
 // 打印
 const handlePrint = () => {
     pdfShow.value = true;
@@ -575,10 +589,21 @@ const updatePointList = (type) => {
     const { geometryArr, area } = authenticMap.getAreaGeometry(type);
     const lastItem = geometryArr[geometryArr.length - 1];
     formInline.geom = lastItem.featureWkt;
-    formInline.mu = area + "亩";
     let result = parseMultiPolygon(lastItem.featureWkt);
     result.pop();
     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)
+        }
+    }else{
+        formInline.mu = area + "亩";
+    }
 };
 
 watchEffect(() => {
@@ -646,15 +671,15 @@ watch(
         background: #101010;
         z-index: -1;
     }
-    .upload-demo{
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      padding-right: 20px;
-      background: #101010;
+    .upload-demo {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding-right: 20px;
+        background: #101010;
     }
-    .blue{
-      background: #2199f8;
+    .blue {
+        background: #2199f8;
     }
     .btn {
         display: flex;