feiniao-farm-h5/src/views/old_mini/interactionList/map/drawRegionMap.js

import * as KMap from "@/utils/ol-map/KMap";
import * as util from "@/common/ol_common.js";
import config from "@/api/config.js";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import { Point } from 'ol/geom';
import Feature from "ol/Feature";
import * as proj from "ol/proj";
import { getArea } from 'ol/sphere.js';
import WKT from "ol/format/WKT.js";
import proj4 from "proj4"
import { register } from "ol/proj/proj4";
proj4.defs("EPSG:38572", "+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs");
register(proj4);

/**
 * @description 地图层对象
 */
class DrawRegionMap {
    constructor() {
        let that = this;
        let vectorStyle = new KMap.VectorStyle();
        this.vectorStyle = vectorStyle;

        // 位置图标
        this.clickPointLayer = new KMap.VectorLayer("clickPointLayer", 9999, {
            style: (f) => {
                return new Style({
                    image: new Icon({
                        src: require("@/assets/img/home/garden-point.png"),
                        scale: 0.5,
                        anchor: [0.5, 1],
                    }),
                });
            },
        });
    }

    initMap(location, target) {
        let level = 16;
        let coordinate = util.wktCastGeom(location).getFirstCoordinate();
        this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 8, 22);
        let xyz2 = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
        this.kmap.addXYZLayer(xyz2, { minZoom: 8, maxZoom: 22 }, 2);
        this.kmap.addLayer(this.clickPointLayer.layer);
        this.setMapPoint(coordinate)

        this.kmap.initDraw((e) => {
            // drawend事件：绘制结束后的处理（支持绘制多个地块）
        })

        this.kmap.startDraw()
        this.kmap.modifyDraw()
    }

    setAreaGeometry(geometryArr, needFitView = false) {
        let that = this
        geometryArr.map(item => {
            // 不使用 setLayerWkt，而是手动添加要素，避免自动缩放视图
            const format = new WKT()
            const mapProjection = that.kmap.map.getView().getProjection()
            let geometry = format.readGeometry(item, {
                dataProjection: 'EPSG:4326',
                featureProjection: mapProjection
            })
            let f = new Feature({ geometry: geometry })
            that.kmap.polygonLayer.source.addFeature(f)
        })
        // 根据参数决定是否需要自适应地块范围
        if (needFitView) {
            this.fitView()
        }
    }


    fitView() {
        let extent = this.kmap.polygonLayer.source.getExtent()
        // 地图自适应到区域可视范围
        this.kmap.getView().fit(extent, { duration: 500, padding: [100, 100, 100, 100] });
    }

    clearLayer() {
        // this.kmap.removeLayer(this.clickPointLayer.layer)
        this.kmap.polygonLayer.source.clear();
    }

    getAreaGeometry() {
        const features = this.kmap.getLayerFeatures()
        let geometryArr = []
        let area = 0
        const format = new WKT()
        // 获取图层上的Polygon，转成WKT用于回显
        features.forEach(item => {
            // 使用 writeGeometry 而不是 writeFeature，因为 setLayerWkt 期望的是几何体的 WKT
            const geometry = item.getGeometry()
            geometryArr.push(format.writeGeometry(geometry, {
                dataProjection: 'EPSG:4326',
                featureProjection: this.kmap.map.getView().getProjection()
            }))
            let geom = geometry.clone()
            geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572"))
            let areaItem = getArea(geom)
            areaItem = (areaItem + areaItem / 2) / 1000;
            area += areaItem
        })
        return { geometryArr, mianji: area.toFixed(2) }  // 修改为 mianji 字段，与创建页面保持一致
    }

    setMapPosition(center) {
        this.kmap.getView().animate({
            center,
            zoom: 17,
            duration: 500,
        });
        this.setMapPoint(center)
    }

    setMapPoint(coordinate) {
        this.clickPointLayer.source.clear()
        let point = new Feature(new Point(coordinate))
        this.clickPointLayer.addFeature(point)
    }

    // 删除当前地块（删除最新绘制的一个地块）
    deleteCurrentPolygon() {
        if (!this.kmap || !this.kmap.polygonLayer) return;
        const features = this.kmap.polygonLayer.source.getFeatures();
        if (features && features.length > 0) {
            const lastFeature = features[features.length - 1];
            this.kmap.polygonLayer.source.removeFeature(lastFeature);
        }
    }
}

export default DrawRegionMap;