feiniao-farm-h5/src/views/old_mini/agri_file/pages/albumMap.vue

<template>
    <div class="album-map-page">
        <custom-header :name="t('agriFile.agriAlbum')" />
        <div class="album-map-content">
            <div class="map-container" ref="mapContainer"></div>
            <div class="search-bar">
                <location-search
                    class="search-bar__search"
                    :user-location="userLocation"
                    @change="handleLocationChange"
                />
            </div>
            <div class="locate-btn" @click="handleLocate">
                <img class="locate-btn__icon" src="@/assets/img/map/map-icon.png" alt="" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { nextTick, onActivated, ref } from "vue";
import { useStore } from "vuex";
import customHeader from "@/components/customHeader.vue";
import locationSearch from "@/components/pageComponents/locationSearch.vue";
import FileMap from "../fileMap";
import * as util from "@/common/ol_common.js";
import { useI18n } from "@/i18n";

const { t } = useI18n();
const store = useStore();
const mapContainer = ref(null);
const fileMap = new FileMap();

const defaultCover = require("@/assets/img/home/banner.png");
const DEFAULT_MAP_LOCATION = "POINT(113.6142086995688 23.585836479509055)";
const ENTRY_FARM_DATA_KEY = "ENTRY_FARM_DATA";
/** 与农情档案相册页共用：crop_question 配图 */
const CROP_QUESTION_PIC_KEY = "CROP_QUESTION_PIC_URL";

const userLocation = ref(
    store.state.home.miniUserLocation ||
        localStorage.getItem("MINI_USER_LOCATION") ||
        "113.61702297075017,23.584863449735067"
);

/** 不展示分区范围与分区名称，仅保留照片点 */
const MOCK_ZONES = [];

const MOCK_PHOTOS = [
    { id: 1, dlng: 0, dlat: 0 },
];

function readAlbumCover() {
    return localStorage.getItem(CROP_QUESTION_PIC_KEY) || defaultCover;
}

function squarePolygonWkt(lng, lat, delta = 0.0014) {
    const ring = [
        [lng - delta, lat + delta * 0.7],
        [lng + delta * 0.35, lat + delta],
        [lng + delta, lat - delta * 0.2],
        [lng + delta * 0.15, lat - delta],
        [lng - delta * 0.85, lat - delta * 0.45],
        [lng - delta, lat + delta * 0.7],
    ];
    return `POLYGON((${ring.map((point) => point.join(" ")).join(", ")}))`;
}

function getFarmData() {
    try {
        return JSON.parse(localStorage.getItem("selectedFarmData") || "{}");
    } catch {
        return {};
    }
}

function isPointWkt(value) {
    return typeof value === "string" && /^POINT\s*\(/i.test(value.trim());
}

function wkbHexToPointWkt(hex) {
    const text = String(hex || "").trim();
    if (!/^[0-9a-fA-F]+$/.test(text) || text.length < 42) return null;
    const bytes = new Uint8Array(text.length / 2);
    for (let i = 0; i < bytes.length; i++) {
        bytes[i] = parseInt(text.slice(i * 2, i * 2 + 2), 16);
    }
    const view = new DataView(bytes.buffer);
    const little = view.getUint8(0) === 1;
    let type = view.getUint32(1, little);
    const hasSrid = (type & 0x20000000) !== 0;
    type &= 0xff;
    if (type !== 1) return null;
    let offset = 5;
    if (hasSrid) offset += 4;
    if (offset + 16 > bytes.length) return null;
    const lng = view.getFloat64(offset, little);
    const lat = view.getFloat64(offset + 8, little);
    if (!Number.isFinite(lng) || !Number.isFinite(lat)) return null;
    return `POINT(${lng} ${lat})`;
}

function toPointWkt(value) {
    if (!value || typeof value !== "string") return null;
    if (isPointWkt(value)) return value.trim();
    return wkbHexToPointWkt(value);
}

function getEntryFarmPoint() {
    try {
        const data = JSON.parse(localStorage.getItem(ENTRY_FARM_DATA_KEY) || "null");
        if (Array.isArray(data?.coordinate) && data.coordinate.length === 2) {
            return `POINT(${Number(data.coordinate[0])} ${Number(data.coordinate[1])})`;
        }
        const point = toPointWkt(data?.point);
        if (point) return point;
    } catch {
        // ignore
    }
    return (
        toPointWkt(localStorage.getItem("GROWTH_REPORT_MAP_POINT")) ||
        toPointWkt(localStorage.getItem("selectedFarmPoint"))
    );
}

function getFarmMapLocation() {
    const entryPoint = getEntryFarmPoint();
    if (entryPoint) return entryPoint;
    const farmData = getFarmData();
    const candidates = [farmData.wkt, farmData.geom_wkt, farmData.farm_location];
    for (const item of candidates) {
        const pointWkt = toPointWkt(item);
        if (pointWkt) return pointWkt;
    }
    return DEFAULT_MAP_LOCATION;
}

function getDefaultMapLocation() {
    return (
        getEntryFarmPoint() ||
        toPointWkt(localStorage.getItem("MINI_USER_LOCATION_POINT")) ||
        toPointWkt(store.state.home.miniUserLocationPoint) ||
        getFarmMapLocation()
    );
}

function getDefaultMapCoordinate() {
    return util.wktCastGeom(getDefaultMapLocation()).getFirstCoordinate();
}

const loadAlbumLayers = () => {
    const [lng, lat] = getDefaultMapCoordinate();
    const labels = MOCK_ZONES.map((item) => ({
        name: t(item.nameKey),
        longitude: lng + item.dlng,
        latitude: lat + item.dlat,
    }));
    // 与外面农情相册一致：crop_question 图 + 数量 1
    const cover = readAlbumCover();
    const photos = MOCK_PHOTOS.map((item) => ({
        count: 1,
        cover,
        longitude: lng + item.dlng,
        latitude: lat + item.dlat,
    }));
    const zoneRecords = MOCK_ZONES.map((item) => ({
        zone_name: "",
        polygon: squarePolygonWkt(lng + item.dlng, lat + item.dlat, item.delta),
    }));
    fileMap.setRecordPolygons(zoneRecords, "album");
    fileMap.setAlbumMarkers({ labels, photos });
};

const initAlbumMap = async () => {
    await nextTick();
    if (!mapContainer.value) return;
    fileMap.initMap(getDefaultMapLocation(), mapContainer.value);
    loadAlbumLayers();
    fileMap.kmap?.map?.updateSize?.();
};

const handleLocationChange = (payload) => {
    if (!payload?.coordinateArray || !fileMap.kmap) return;
    fileMap.kmap.getView().animate({
        center: payload.coordinateArray,
        zoom: 16,
        duration: 0,
    });
};

const handleLocate = () => {
    if (!fileMap.kmap) return;
    fileMap.kmap.getView().animate({
        center: getDefaultMapCoordinate(),
        zoom: 16,
        duration: 0,
    });
};

onActivated(() => {
    initAlbumMap();
});
</script>

<style lang="scss" scoped>
.album-map-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #fff;
}

.album-map-content {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;

    .map-container {
        width: 100%;
        height: 100%;
    }
}

.search-bar {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 4px 0 12px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.45);
    box-sizing: border-box;

    &__search {
        flex: 1;
        min-width: 0;

        :deep(.el-select__wrapper) {
            background: transparent;
            box-shadow: none;
            border: none;
            min-height: 40px;
            padding-left: 0;
        }

        :deep(.el-select__placeholder),
        :deep(.el-select__input) {
            color: rgba(255, 255, 255, 0.7);
        }

        :deep(.el-icon) {
            color: rgba(255, 255, 255, 0.85);
        }
    }
}

.locate-btn {
    position: absolute;
    right: 12px;
    bottom: 96px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    &__icon {
        width: 16px;
        height: 18px;
    }
}
</style>