fix: 选中删除

src/views/home/index.vue

@@ -64,6 +64,8 @@
                 </div> -->
             </div>
 
+            <div v-if="isEditLine"  class="map-bg map-legend" style="right: 580px" @click="deleteLine">删除</div>
+
             <!-- 图例 -->
             <!-- <img class="legend yes-events" src="@/assets/images/home/legend-img.png" alt="" /> -->
             <div v-if="legendArr && legendArr.length" class="map-bg map-legend yes-events">
@@ -673,8 +675,19 @@ const airLineCallback = (data) => {
 const isEditLine = ref(false)
 function startEditLine() {
     isEditLine.value = true
+    // 监听选中要素变化
+      airLineStringLayer.selectInteraction.on('select', (event) => {
+        console.log('event.selected.length', event.selected.length);
+      });
+      airLineStringLayer.enterEditMode();
+      
+}
+
+function deleteLine() {
+airLineStringLayer.deleteSelectedPoints();
 }
 
+
 const rightToolList = [
     [
         {

src/views/home/map/airLineStringLayer.js

@@ -4,6 +4,8 @@ import LineString from "ol/geom/LineString";
 import { newPoint } from "@/utils/map.js";
 import Point from "ol/geom/Point";
 import { Feature } from "ol";
+import { Select } from 'ol/interaction';
+import { platformModifierKeyOnly } from 'ol/events/condition';
 
 /**
  * @description 地图层对象
@@ -18,6 +20,8 @@ class airLineStringLayer {
         });
         map.addLayer(this.lineStringLayer.layer);
         this.kmap = map;
+        this.selectedFeatures = []; // 存储选中的要素
+        this.editMode = false; // 编辑模式标志
 
         // 位置图标
         this.pointLayer = new KMap.VectorLayer("pointLayer", 9999, {
@@ -44,6 +48,106 @@ class airLineStringLayer {
             },
         });
         map.addLayer(this.pointOfflineLayer.layer);
+
+        // 添加选择交互
+        this.selectInteraction = new Select({
+            layers: [this.lineStringLayer.layer],
+            style: this.getSelectStyle(), // 选中样式
+            toggleCondition: platformModifierKeyOnly, // 按住Ctrl键多选
+            multi: true // 允许多选
+        });
+        map.map.addInteraction(this.selectInteraction);
+        
+        // 监听选择变化
+        this.selectInteraction.on('select', (event) => {
+            this.selectedFeatures = event.selected;
+        });
+    }
+
+    // 获取选中要素的样式
+    getSelectStyle() {
+        return new Style({
+            image: new Circle({
+                radius: 16,
+                stroke: new Stroke({
+                    color: 'rgba(255, 0, 0, 0.7)',
+                    width: 3
+                }),
+                fill: new Fill({
+                    color: 'rgba(255, 0, 0, 0.3)'
+                })
+            }),
+            stroke: new Stroke({
+                color: 'rgba(255, 0, 0, 0.7)',
+                width: 3
+            })
+        });
+    }
+
+      // 进入编辑模式
+    enterEditMode() {
+        this.editMode = true;
+        this.selectInteraction.setActive(true);
+    }
+
+    // 退出编辑模式
+    exitEditMode() {
+        this.editMode = false;
+        this.selectInteraction.setActive(false);
+        this.selectInteraction.getFeatures().clear();
+        this.selectedFeatures = [];
+    }
+
+
+    // 删除选中的点位
+    deleteSelectedPoints() {
+        if (!this.editMode || this.selectedFeatures.length === 0) return;
+        console.log('this.selectedFeatures', this.selectedFeatures);
+        const source = this.lineStringLayer.layer.getSource();
+        
+        // 删除选中的要素
+        this.selectedFeatures.forEach(feature => {
+            source.removeFeature(feature);
+        });
+        
+        // 重新生成连线
+        this.regenerateLineString();
+        
+        // 清空选择
+        this.selectedFeatures = [];
+        this.selectInteraction.getFeatures().clear();
+    }
+
+    // 重新生成连线
+    regenerateLineString() {
+        const source = this.lineStringLayer.layer.getSource();
+        const features = source.getFeatures();
+        
+        // 获取所有点要素并按pointIndex排序
+        const pointFeatures = features.filter(f => f.getGeometry().getType() === 'Point');
+        pointFeatures.sort((a, b) => {
+            return parseInt(a.get('pointIndex')) - parseInt(b.get('pointIndex'));
+        });
+        
+        // 提取坐标数组
+        const coordinates = pointFeatures.map(feature => {
+            const geom = feature.getGeometry();
+            return geom.getCoordinates();
+        });
+        
+        // 删除旧的线要素
+        const lineFeatures = features.filter(f => f.getGeometry().getType() === 'LineString');
+        lineFeatures.forEach(f => source.removeFeature(f));
+        
+        // 创建新的线要素
+        if (coordinates.length > 1) {
+            const lineGeometry = new LineString(coordinates);
+            const lineFeature = new Feature({
+                geometry: lineGeometry
+            });
+            lineFeature.set("type", 'Online');
+            source.addFeature(lineFeature);
+        }
     }
 
     styleFunction(feature) {