修改环境

package.json

@@ -15,6 +15,7 @@
     "@iconify/iconify": "^3.1.0",
     "@iconify/json": "^2.2.42",
     "@iconify/vue": "^4.1.0",
+    "@turf/turf": "^7.1.0",
     "@vueuse/core": "^8.7.5",
     "axios": "^0.27.2",
     "core-js": "^3.23.3",

src/views/authentic/authenticMap.js

@@ -17,6 +17,8 @@ import { register } from "ol/proj/proj4";
 import GeometryCollection from 'ol/geom/GeometryCollection.js';
 import { ElMessage } from "element-plus";
 import { useStore } from "vuex";
+import {bboxToFeature} from "../../utils/map";
+import * as turf from "@turf/turf";
 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 +32,8 @@ export let mapData = reactive({
   selectPointArr: [],
   isPointHide: null,
   disabledForm : false,
-  selectPoint:''
+  selectPoint:'',
+  pointIndex:-1
 });
 
 function resetMapData(){
@@ -42,6 +45,7 @@ function resetMapData(){
   mapData.isPointHide= null
   mapData.disabledForm= false
   mapData.selectPoint= ''
+  mapData.pointIndex=-1
 }
 
 /**
@@ -93,7 +97,7 @@ class AuthenticMap {
       },
     });
 
-    this.selectPointLayer = new KMap.VectorLayer("selectPointLayer", 9999, {
+    this.selectPointLayer = new KMap.VectorLayer("selectPointLayer", 10000, {
       style: () => {
         return new Style({
           // geometry: new Point(coord[0][i]),
@@ -295,39 +299,46 @@ class AuthenticMap {
   selectPonitFun(map,evt){
     let that = this
     map.forEachFeatureAtPixel(evt.pixel, function (f, layer) {
+      let d = 0.0002
+      let buff =  bboxToFeature(evt.pixel[0] - d,evt.pixel[1] - d, evt.pixel[0]+ d, evt.pixel[1] + d)
       if (
         layer instanceof VectorLayer &&
         (
           layer.get("name") === "defaultPolygonLayer")
       ) {
-        const features = map.getFeaturesAtPixel(evt.pixel);
-        if (features.length > 0) {
-          const feature = features[0];
+        const fs = map.getFeaturesAtPixel(evt.pixel);
+        let lonlat = map.getCoordinateFromPixel(evt.pixel);
+        if (fs.length > 0) {
+          const feature = fs[0];
           const geometry = feature.getGeometry();
           const coordinates = geometry.getCoordinates()[0]; // 获取多边形的顶点坐标
-          if(Array.isArray(coordinates)){
-            ElMessage.warning("编辑中")
-          }else{
             ElMessage.success("已选择该点位")
             const features = f
             //代码可优化，明天优化
               if(mapData.selectPointArr.length>0){
                 if(features.get("id")===mapData.selectPointArr[0].get("id")){
-                    const list = features.getGeometry().getCoordinates();
-                    const arr = list[0][0].find(subArray => subArray.includes(coordinates))
-                    that.selectPointLayer.source.clear();
-                    let point = new Feature(new Point(arr));
-                    that.selectPointLayer.addFeature(point);
+                    // const list = features.getGeometry().getCoordinates();
+                    // const arr = list[0][0].find(subArray => subArray.includes(coordinates))
+                  let arr = []
+                  let i = 0
+                  for(let subArray of coordinates[0]){
+                    let from = turf.point(subArray);
+                    let to = turf.point(lonlat);
+                    let options = { units: "miles" };
+                    let distance = turf.distance(from, to, options);
+                    if(distance < 0.01){
+                      arr = subArray
+                      mapData.pointIndex = i
+                      break
+                    }
+                    i++
+                  }
+                  that.selectPointLayer.refresh();
+                  let point = new Feature(new Point(arr));
+                  that.selectPointLayer.addFeature(point);
                   }
-              }else{
-                const list = mapData.point.getGeometry().getCoordinates();
-                    const arr = list[0][0].find(subArray => subArray.includes(coordinates))
-                    that.selectPointLayer.source.clear();
-                    let point = new Feature(new Point(arr));
-                    that.selectPointLayer.addFeature(point);
               }
             mapData.selectPoint = coordinates
-          }
         }
       }
     });
@@ -401,15 +412,15 @@ 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); // 删除点
+    if (mapData.pointIndex > -1) {
+      array.splice(mapData.pointIndex, 1); // 删除点
       // 更新多边形的坐标
       point.getGeometry().setCoordinates(coordinates); // 更新几何形状
+      mapData.pointIndex = -1
     }
     this.clearSelectPoint()
-    callback && callback(index)
+    callback && callback(mapData.pointIndex)
   }
 
   // 移除点的功能