feat：添加样式选中高亮

src/views/authentic/authenticMap.js

@@ -9,7 +9,7 @@ import { reactive } from "vue";
 import Point from "ol/geom/Point.js";
 import Feature from "ol/Feature";
 import { newPoint } from "@/utils/map.js";
-import { Fill, Text } from "ol/style";
+import { Fill, Text,Circle,Stroke } from "ol/style";
 import { getArea } from "ol/sphere.js";
 import * as proj from "ol/proj";
 import proj4 from "proj4";
@@ -93,6 +93,24 @@ class AuthenticMap {
       },
     });
 
+    this.selectPointLayer = new KMap.VectorLayer("selectPointLayer", 9999, {
+      style: () => {
+        return new Style({
+          // geometry: new Point(coord[0][i]),
+          image: new Circle({
+              radius: 6,
+              fill: new Fill({
+              color: 'red'
+              }),
+              stroke: new Stroke({
+              color: '#fff',
+              width: 1
+              }),
+            }),
+          });
+      },
+    });
+
     // 存储绘制的地块特征
     // this.drawnFeatures = [];
   }
@@ -133,11 +151,13 @@ class AuthenticMap {
       if(!res){
         ElMessage.warning("编辑中")
       }
+      console.log('f.get("height")',f);
       res = f.get("height")?false:res
       return res
     });
     this.kmap.addLayer(this.clickPointLayer.layer);
     this.kmap.addLayer(this.locationLayer.layer);
+    this.kmap.addLayer(this.selectPointLayer.layer);
     this.addMapSingerClick();
   }
 
@@ -287,7 +307,16 @@ class AuthenticMap {
             ElMessage.warning("编辑中")
           }else{
             ElMessage.success("已选择该点位")
-            // that.kmap.polygonStyle(f,'aaa');
+            const features = that.kmap.getLayerFeatures()
+            features.forEach(item =>{
+              if(item.get("id")===mapData.selectPointArr[0].get("id")){
+                  const list = item.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
           }
         }
@@ -304,7 +333,6 @@ class AuthenticMap {
         return;
       }
       if(!mapData.curPointData.id && mapData.isEdit){
-        // ElMessage.warning("编辑中")
         that.selectPonitFun(that.kmap.map,evt)
         return;
       }
@@ -332,6 +360,10 @@ class AuthenticMap {
     });
   }
 
+  clearSelectPoint(){
+    this.selectPointLayer.source.clear();
+  }
+
   setPoint(name) {
     const arr = mapData.selectPointArr.filter(
       (item) => item.values_.icon === "point-act"

src/views/authentic/index.vue

@@ -360,11 +360,13 @@ const handleEdit = () => {
     disabledForm.value = false;
     mapData.disabledForm = false;
     authenticMap.startModify('edit');
+    authenticMap.clearSelectPoint()
 };
 
 // 取消
 const isUpdata = ref(true);
 const onCancel = () => {
+    authenticMap.clearSelectPoint()
     isEdit.value = false;
     store.commit("authentic/SET_ISEDIT_STATUS", false);
     if (isUpdata.value) {
@@ -421,6 +423,7 @@ const beforeUpload = (file) => {
     const isCsv = file.type === "application/vnd.ms-excel" || file.type === "text/csv" || file.name.endsWith(".csv");
     updateFormInline({ ...initForm });
     ruleFormRef.value.resetFields();
+    authenticMap.clearSelectPoint()
     isEdit.value = false;
     authenticMap.setPoint("point");
     authenticMap.clearMapData("isEdit", false, formInline.id);
@@ -506,6 +509,7 @@ const handleDelete = () => {
 // 创建
 const isRefresh = ref(true);
 const handleAdd = () => {
+    authenticMap.clearSelectPoint()
     typeStr.value = "add";
     isRefresh.value = false;
     isEdit.value = false;
@@ -600,6 +604,7 @@ const getDetailsData = (id) => {
         if(data.height.length>0){
             heightArr.value = data.height
             store.commit("authentic/SET_ISEDIT_STATUS", true);
+            // authenticMap.startModify("upload");
         }
         formInline.mu = data.mu + "亩";
     });