feiniao-farm-h5/src/views/old_mini/create_farm/editMap.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="footer-address-box">
                    <div class="footer-address">
                        <div class="address-title">{{ pointName }}</div>
                        <div class="address-detail">{{ pointAddress }}</div>
                    </div>
                    <div class="address-btn" @click="goBack">修改地址</div>
                </div>
                <div class="edit-map-footer-btn">
                    <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 } from "vue";
import EditMap from "./map/editMap.js";
import { useRouter, useRoute } from "vue-router";
import { convertPointToArray } from "@/utils/index";
import { useStore } from "vuex";

const router = useRouter();
const route = useRoute();
const store = useStore();
const mapContainer = ref(null);
const editMap = new EditMap();
const mapData = {
    farmCode: "LBY",
    farmId: "766",
    id: 2,
    isGenerateReport: 1,
    name: "分区2",
    pointCount: 131,
    pointWkt: "POINT (113.6142086995688 23.585836479509055)",
    regionCode: "LBY-MR-2",
    wkt: "MULTIPOLYGON (((113.61348988377155 23.58617369800422, 113.61395837633405 23.58622555407246, 113.61414076654707 23.58622555407246, 113.61436964832843 23.5862774101407, 113.61478628474084 23.586468741036786, 113.61491681896747 23.58652417337007, 113.61512424307672 23.586449071517652, 113.61491503077356 23.585742756367924, 113.61479880177082 23.585596129050916, 113.61473800497858 23.585451289764112, 113.61438931780664 23.585286780835393, 113.61410858003889 23.585299297865365, 113.61385645239149 23.585249229909184, 113.61378135053907 23.585288569029306, 113.61357571446003 23.585283204611276, 113.61347200232355 23.585342213209604, 113.61338080721704 23.585506721974614, 113.61335934954492 23.585665866485304, 113.61342193444922 23.58616296916816, 113.61348988377155 23.58617369800422)))",
};

const pointAddress = ref(null)
const pointName = ref(null)
onMounted(() => {
    pointAddress.value = route.query.pointAddress
    pointName.value = route.query.pointName
    const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)"
    editMap.initMap(point, mapContainer.value);
    // editMap.setAreaGeometry([{ featureWkt: mapData.wkt }]);
});

onActivated(() => {
    pointAddress.value = route.query.pointAddress
    pointName.value = route.query.pointName
    const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)"
    editMap.setMapPosition(convertPointToArray(point))
})
const goBack = () => {
    editMap.clearLayer()
    router.back();
};
const confirm = () => {
    // getAreaGeometry
    const polygonData = editMap.getAreaGeometry()
    store.commit("home/SET_FARM_POLYGON", 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;
                .back-icon {
                    width: 20px;
                    height: 18px;
                }
            }
            .footer-address-box {
                width: 100%;
                box-sizing: border-box;
                margin: 19px 0 14px 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: #fff;
                border-radius: 14px;
                padding: 14px 12px;
                .footer-address {
                    font-size: 12px;
                    color: rgba(0, 0, 0, 0.6);
                    .address-title {
                        font-weight: 500;
                        font-size: 16px;
                        color: #000;
                    }
                }
                .address-btn {
                    color: #2199f8;
                    border: 1px solid #2199f8;
                    border-radius: 25px;
                    padding: 6px 10px;
                    flex: none;
                }
            }
            .edit-map-footer-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                div {
                    width: 92px;
                    text-align: center;
                    color: #666666;
                    font-size: 16px;
                    padding: 8px 0;
                    border-radius: 25px;
                    background: #fff;
                }
                .btn-confirm {
                    background: #000;
                    background-image: linear-gradient(180deg, #76c3ff 0%, #2199f8 100%);
                    margin-left: 16px;
                    color: #fff;
                }
            }
        }
    }
}
</style>