feat:修改品种确权页面bug

src/views/varietyMap/index.vue

@@ -39,10 +39,14 @@
                         <img src="@/assets/images/common/area-icon.png" alt="" />
                         品种确权
                     </div>
-                    <div class="button" @click="handleClear">清除框选</div>
+                    <div class="button-group">
+                        <div class="button" @click="handleClear">清除框选</div>
+                        <div class="button start" @click="handleStart">开始框选</div>
+                        <div class="button end" @click="handleEnd">结束框选</div>
+                    </div>
                 </div>
                 <div class="map">
-                    <my-map></my-map>
+                    <my-map ref="mapRef"></my-map>
                     <div class="checkbox-list">
                         <span class="text">全部设置为</span>
                         <el-checkbox-group
@@ -90,7 +94,7 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref } from "vue";
+import { onMounted, ref } from "vue";
 import { ElMessage } from "element-plus";
 import fnHeader from "@/components/fnHeader.vue";
 import myMap from "./map";
@@ -106,23 +110,24 @@ const farmId = sessionStorage.getItem("farmId");
 onMounted(() => {
     getList();
     getSpeciesData();
-    eventBus.on("map:list", getMapList);
-});
-
-onUnmounted(() => {
-    eventBus.off("map:list", getMapList);
 });
 
-const selectPoint = ref([])
-function getMapList(arr) {
-    selectPoint.value = arr
-}
 
 //清除框选
 const handleClear = () => {
     eventBus.emit("handle:clear");
 };
 
+//开始框选
+const handleStart = () => {
+    eventBus.emit("handle:start");
+};
+
+//结束框选
+const handleEnd = () => {
+    eventBus.emit("handle:end");
+};
+
 const baseData = ref([]);
 const getList = () => {
     const params = {
@@ -142,8 +147,10 @@ const handleCheckedCitiesChange = (e) => {
     }
 };
 
+const mapRef = ref(null)
 const handleSave = () =>{
-    const params = selectPoint.value.map(item =>{
+    const selectPoint = mapRef.value.getSelectPoint()
+    const params = selectPoint.map(item =>{
         return {
             id:item.id,
             speciesItemId:checkedCities.value[0]
@@ -340,6 +347,19 @@ const handleOk = () =>{
                     cursor: pointer;
                 }
             }
+            .button-group{
+                display: flex;
+                div + div{
+                    margin-left: 10px;
+                }
+                .start{
+                    background: #f7be5a;
+                    color: #000;
+                }
+                .end{
+                    color: #f7be5a;
+                }
+            }
             .map {
                 width: 100%;
                 clip-path: inset(0px round 4px);

src/views/varietyMap/map.vue

@@ -15,6 +15,9 @@ const selectedArea = ref(null);
 const selectedPoints = ref([]);
 const allPoints = ref([]);
 const defalutAllPoints = ref([])
+const pointList = ref([])
+
+const mapEventType = ref('rectangle')
 
 // 自定义圆点样式
 const createMarkerContent = (color = 'rgba(0, 0, 0, 0.4)') => {
@@ -30,6 +33,12 @@ const createMarkerContent = (color = 'rgba(0, 0, 0, 0.4)') => {
     `;
 }
 
+//高亮样式
+const createMarkerImg = () => {
+    return `
+        <img style="width: 38px;height: 38px;" src="${require('@/assets/images/map/status/active-icon.png')}">
+    `;
+}
 // 初始化地图
 const initMap = async () => {
     try {
@@ -41,7 +50,7 @@ const initMap = async () => {
             // 创建地图实例
             map.value = new AMap.Map("map-container", {
                 zoom: 18, // 初始缩放级别
-                center: allPoints.value[0].lngLat,
+                center: [113.6149629 ,23.58594117],
                 layers: [
                     // 卫星
                     new AMap.TileLayer.Satellite(),
@@ -50,61 +59,76 @@ const initMap = async () => {
 
             // 初始化 MouseTool
             mouseTool.value = new AMap.MouseTool(map.value);
-
-            // // 添加点位
-            allPoints.value.forEach((point) => {
-                point.icon = new AMap.Marker({
-                    position: point.lngLat,
-                    map: map.value,
-                    content: createMarkerContent(point.color),
-                    offset: new AMap.Pixel(-7, -7),
-                });
-                point.type = 'defalutIcon'
-
-                // 绑定点击事件
-                point.icon.on('click', () => {
-                    if(point.type === 'defalutIcon'){
-                        point.icon.setContent(createMarkerContent('#FFD489')); // 修改颜色
-                        point.type = 'activeIcon'
-                    }else{
-                        point.icon.setContent(createMarkerContent(point.color)); // 修改颜色
-                        point.type = 'defalutIcon'
-                    }
-                });
-
-                defalutAllPoints.value.push(point)
-            });
-
-            const latLngs = allPoints.value.map(item =>item.icon)
-            map.value.setFitView(latLngs,{
-                padding: [0, 0, 0, 0], // 上下左右的边距
-                maxZoom: 18, // 最大缩放级别
-            })
+            
             startRectangleSelection()
 
             // 监听框选完成事件
             mouseTool.value.on("draw", (event) => {
-                const { obj } = event;
+                if(mapEventType.value==='click') return
+                const { obj} = event;
                 if (obj instanceof AMap.Rectangle) {
                     selectedArea.value = obj;
                     map.value.remove(selectedArea.value);
                     checkPointsInArea(); // 检查框选区域内的点位
                 }
             });
+
         });
     } catch (error) {
         console.error("地图加载失败:", error);
     }
 };
 
+//重置数据
 const resetData = () =>{
     allPoints.value = defalutAllPoints.value
     allPoints.value.forEach(item =>{
         item.icon.setContent(createMarkerContent(item.color))
+        item.icon.setOffset(new window.AMap.Pixel(-7, -7))
         item.type = 'defalutIcon'
     })
 }
 
+//初始化数据
+const initData = () =>{
+    defalutAllPoints.value = []
+    totalList.value.forEach(item => map.value.remove(item.icon))
+    totalList.value = []
+    allPoints.value.forEach(item =>{
+        item.icon = new window.AMap.Marker({
+            position: item.lngLat,
+            map: map.value,
+            content: createMarkerContent(item.color),
+            offset: new window.AMap.Pixel(-7, -7),
+        });
+        item.type = 'defalutIcon'
+
+        // 绑定点击事件
+        item.icon.on('click', () => {
+            mapEventType.value = 'click'
+            if(item.type === 'defalutIcon'){
+                item.icon.setContent(createMarkerImg()); 
+                item.icon.setOffset(new window.AMap.Pixel(-18, -18))
+                item.type = 'activeIcon'
+                const arr = pointList.value.filter(ele => ele.id === item.id)
+                if(arr.length===0){
+                    pointList.value.push(item)
+                }
+            }else{
+                item.icon.setContent(createMarkerContent(item.color)); 
+                item.icon.setOffset(new window.AMap.Pixel(-7, -7))
+                item.type = 'defalutIcon'
+            }
+
+            setTimeout(()=>{
+                mapEventType.value = 'draw'
+            },100)
+        });
+        defalutAllPoints.value.push(item)
+    })
+    map.value.setFitView(null, false, [0, 0, 0, 0]);
+}
+
 // 开始框选
 const startRectangleSelection = () => {
     if (mouseTool.value) {
@@ -115,17 +139,24 @@ const startRectangleSelection = () => {
             fillColor: "#000000", // 填充颜色
             fillOpacity: 0.5, // 填充透明度
         }); // 启用矩形框选工具
+        map.value.setDefaultCursor("crosshair");
     }
 };
 
+ // 停止绘制矩形
+const stopDrawRectangle = () => {
+    mouseTool.value.close(); // 关闭 mouseTool
+    map.value.setDefaultCursor("default");
+};
+
 // 清除框选
 const clearSelection = () => {
     if (selectedArea.value) {
         map.value.remove(selectedArea.value); // 移除框选区域
         selectedArea.value = null;
-        resetData()
-        selectedPoints.value = []; // 清空选中的点位
     }
+    resetData()                                                                                                                                                                                                                                                                                                                                      
+    selectedPoints.value = []; // 清空选中的点位
 };
 
 // 检查框选区域内的点位
@@ -135,17 +166,18 @@ const checkPointsInArea = () => {
     selectedPoints.value = allPoints.value.filter((point) => {
         return bounds.contains(point.lngLat); // 判断点位是否在框选区域内
     });
+    
     selectedPoints.value.forEach(item =>{
         if(item.type==='defalutIcon'){
-            item.icon.setContent(createMarkerContent('#FFD489'))
+            item.icon.setContent(createMarkerImg())
+            item.icon.setOffset(new window.AMap.Pixel(-18, -18))
             item.type = 'activeIcon'
         }else{
             item.icon.setContent(createMarkerContent(item.color))
+            item.icon.setOffset(new window.AMap.Pixel(-7, -7))
             item.type = 'defalutIcon'
         }
     })
-    const arr = selectedPoints.value.filter(item =>item.type==='activeIcon')
-    eventBus.emit('map:list',arr)
 };
 
 const speciesArr = ref([])
@@ -163,10 +195,20 @@ const getList = () =>{
                 lngLat:convertPointToArray(item.point)
             }
         })
-        initMap()
+        initData()
     })
 }
 
+const totalList = ref([])
+
+function getSelectPoint(){
+    totalList.value = selectedPoints.value.concat(pointList.value)
+    const arr = totalList.value.filter(item =>item.type==='activeIcon')
+    return arr
+}
+
+defineExpose({getSelectPoint})
+
 function getSpeciesList(arr){
     speciesArr.value = arr
     getList()
@@ -174,14 +216,19 @@ function getSpeciesList(arr){
 
 // 组件挂载时初始化地图
 onMounted(() => {
+    initMap()
     eventBus.on('handle:clear',clearSelection)
     eventBus.on('species:list',getSpeciesList)
+    eventBus.on('handle:start',startRectangleSelection)
+    eventBus.on('handle:end',stopDrawRectangle)
 });
 
 onUnmounted(()=>{
     map.value.destroy()// 销毁地图实例以释放资源
     eventBus.off('handle:clear',clearSelection)
     eventBus.off('species:list',getSpeciesList)
+    eventBus.off('handle:start',startRectangleSelection)
+    eventBus.off('handle:end',stopDrawRectangle)
 })
 </script>