foster-pc-vue/src/views/varietyMap/map.vue

<template>
    <div id="map-container"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import eventBus from "@/api/eventBus";
import { convertPointToArray } from "@/utils/index";
import { deepClone } from "@/common/commonFun";

const map = ref(null);
const mouseTool = ref(null);
const selectedArea = ref(null);
const selectedPoints = ref([]);
const allPoints = ref([]);
const defalutAllPoints = ref([])

// 自定义圆点样式
const createMarkerContent = (color = 'rgba(0, 0, 0, 0.4)') => {
    return `
        <div style="
            width: 15px;
            height: 15px;
            background-color: ${color};
            border: 1px solid #fff;
            border-radius: 50%;
        ">
        </div>
    `;
}

// 初始化地图
const initMap = async () => {
    try {
        const AMap = await AMapLoader.load({
            key: "41769169f0f157e13a197e7eb0dd7b5b", // 替换为你的高德地图 Key
            version: "2.0", // SDK 版本
            plugins: ["AMap.MouseTool"], // 加载 MouseTool 插件
        }).then((AMap) => {
            // 创建地图实例
            map.value = new AMap.Map("map-container", {
                zoom: 18, // 初始缩放级别
                center: allPoints.value[0].lngLat,
                layers: [
                    // 卫星
                    new AMap.TileLayer.Satellite(),
                ],
            });

            // 初始化 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 (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.type = 'defalutIcon'
    })
}

// 开始框选
const startRectangleSelection = () => {
    if (mouseTool.value) {
        mouseTool.value.rectangle({
            strokeColor: "#ffffff", // 框选区域边框颜色
            strokeOpacity: 1, // 边框透明度
            strokeWeight: 2, // 边框宽度
            fillColor: "#000000", // 填充颜色
            fillOpacity: 0.5, // 填充透明度
        }); // 启用矩形框选工具
    }
};

// 清除框选
const clearSelection = () => {
    if (selectedArea.value) {
        map.value.remove(selectedArea.value); // 移除框选区域
        selectedArea.value = null;
        resetData()
        selectedPoints.value = []; // 清空选中的点位
    }
};

// 检查框选区域内的点位
const checkPointsInArea = () => {
    if (!selectedArea.value) return;
    const bounds = selectedArea.value.getBounds(); // 获取框选区域的边界
    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.type = 'activeIcon'
        }else{
            item.icon.setContent(createMarkerContent(item.color))
            item.type = 'defalutIcon'
        }
    })
    const arr = selectedPoints.value.filter(item =>item.type==='activeIcon')
    eventBus.emit('map:list',arr)
};

const speciesArr = ref([])
const getList = () =>{
    const params = {
        farmId:sessionStorage.getItem('farmId'),
        regionId:sessionStorage.getItem('regionId')
    }
    VE_API.variety.pointList(params).then(res =>{
        allPoints.value = res.data.map(item =>{
            const bgColor = speciesArr.value.filter(ele =>ele.speciesItemId === item.speciesItemId)
            return{
                ...item,
                color:bgColor[0].color,
                lngLat:convertPointToArray(item.point)
            }
        })
        initMap()
    })
}

function getSpeciesList(arr){
    speciesArr.value = arr
    getList()
}

// 组件挂载时初始化地图
onMounted(() => {
    eventBus.on('handle:clear',clearSelection)
    eventBus.on('species:list',getSpeciesList)
});

onUnmounted(()=>{
    map.value.destroy()// 销毁地图实例以释放资源
    eventBus.off('handle:clear',clearSelection)
    eventBus.off('species:list',getSpeciesList)
})
</script>

<style scoped>
#map-container {
    width: 100%;
    height: 100%;
}
</style>