feiniao-farm-h5/src/views/old_mini/interactionList/drawRegion.vue

<template>
    <div class="edit-map">
        <custom-header name="勾画区域"></custom-header>
        <div class="edit-map-content">
            <div class="edit-map-tip">操作提示：拖动圆点，即可调整地块边界</div>
            <div class="map-container" ref="mapContainer"></div>
            <div class="edit-map-footer">
                <div class="footer-back" @click="goBack">
                    <img class="back-icon" src="@/assets/img/home/go-back.png" alt="" />
                </div>
                <div class="edit-map-footer-btn">
                    <div class="btn-delete" @click="deletePolygon">删除地块</div>
                    <div class="btn-cancel" @click="goBack">取消</div>
                    <div class="btn-confirm" @click="confirm">确认</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import { ref, onMounted, onActivated, onDeactivated } from "vue";
import DrawRegionMap from "./map/drawRegionMap.js";
import { useRouter, useRoute } from "vue-router";
import { convertPointToArray } from "@/utils/index";
import { ElMessage, ElMessageBox } from "element-plus";

const router = useRouter();
const route = useRoute();
const mapContainer = ref(null);
const drawRegionMap = new DrawRegionMap();

const type = ref(null)
onMounted(() => {
    type.value = route.query.type
    const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)"
    drawRegionMap.initMap(point, mapContainer.value);

    // 地图初始化之后（比如 initPreviewMap 里）
const regions = [
  {
    geometry:
      "MULTIPOLYGON(((113.61674040430906 23.586573370597367,113.61586610436014 23.585922976493354,113.61710291900188 23.58486741952544,113.61770000158238 23.585651090473736,113.61674040430906 23.586573370597367)))",
    status: "unresolved", // 未解决（蓝色）
  },
  {
    geometry:
      "MULTIPOLYGON(((113.61516640298626 23.588441931082958,113.61445736699218 23.58799411906573,113.61572616841707 23.586954554834552,113.61642987338976 23.588180707433526,113.61516640298626 23.588441931082958)))",
    status: "resolved", // 已解决（灰色）
  },
];

drawRegionMap.setStatusRegions(regions);
});

onActivated(() => {
    const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)"
    
    // 先绘制地块
    const polygonData = route.query.polygonData;

    if (polygonData) {
        drawRegionMap.setAreaGeometry(JSON.parse(polygonData)?.geometryArr);
    }
    
    // 再设置地图中心位置，确保视图在 mapCenter
    drawRegionMap.setMapPosition(convertPointToArray(point))
})

onDeactivated(() => {
    drawRegionMap.clearLayer()
})
const goBack = () => {
    // drawRegionMap.clearLayer()
    router.back()
};

const deletePolygon = () => {
    ElMessageBox.confirm(
        '确认要删除当前地块吗？删除后可以重新勾画。',
        '删除确认',
        {
            confirmButtonText: '确认删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        drawRegionMap.deleteCurrentPolygon();
        ElMessage.success("地块已删除");
    }).catch(() => {
        // 用户取消删除，不做任何操作
    });
};

const confirm = () => {
    // getAreaGeometry
    const polygonData = drawRegionMap.getAreaGeometry()
    console.log("polygonData", polygonData);
    sessionStorage.setItem("drawRegionPolygonData", JSON.stringify(polygonData));
    router.back()
};
</script>

<style lang="scss" scoped>
.edit-map {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .edit-map-content {
        width: 100%;
        height: 100%;
        position: relative;
        .edit-map-tip {
            position: absolute;
            top: 23px;
            left: calc(50% - 256px / 2);
            z-index: 1;
            font-size: 12px;
            color: #fff;
            padding: 9px 20px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 20px;
        }
        .map-container {
            width: 100%;
            height: 100%;
        }
        .edit-map-footer {
            position: absolute;
            bottom: 80px;
            left: 12px;
            width: calc(100% - 24px);
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            .footer-back {
                padding: 6px 7px 9px;
                background: #fff;
                border-radius: 8px;
                margin-bottom: 12px;
                .back-icon {
                    width: 20px;
                    height: 18px;
                }
            }
            .edit-map-footer-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                gap: 8px;
                div {
                    flex: 1;
                    max-width: 100px;
                    text-align: center;
                    color: #666666;
                    font-size: 14px;
                    padding: 8px 0;
                    border-radius: 25px;
                    background: #fff;
                }
                .btn-delete {
                    background: #ff4d4f;
                    color: #fff;
                }
                .btn-confirm {
                    background: #000;
                    background-image: linear-gradient(180deg, #76c3ff 0%, #2199f8 100%);
                    color: #fff;
                }
            }
        }
    }
}
</style>