feiniao-farm-h5/src/views/old_mini/work_detail/components/areaMap.js

import * as KMap from "@/utils/ol-map/KMap";
import * as util from "@/common/ol_common.js";
import config from "@/api/config.js";
import { Vector as VectorSource } from "ol/source.js";
import { Point } from 'ol/geom';
import { newPoint, newAreaFeature } from "@/utils/map";
import { GeoJSON, WKT } from 'ol/format'
import { Feature } from "ol";
import { getArea } from "ol/sphere"
import * as turf from "@turf/turf"
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import { Fill, Text, Stroke } from "ol/style";
import * as proj from "ol/proj";
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);

/**
 *
 */
class AreaMap {
    constructor() {
        let that = this;
        let vectorStyle = new KMap.VectorStyle()
        this.gardenPolygonLayer = new KMap.VectorLayer("gardenPolygonLayer", 999, {
            minZoom: 11,
            maxZoom: 22,
            source: new VectorSource({}),
            style: function (f) {
                let style2 = vectorStyle.getPolygonStyle("#00000080", "#2199F8", 2)

                let style3 = new Style({
                    text: new Text({
                        font: "14px sans-serif",
                        text: f.get("mianji") + "亩",
                        // offsetX: 28,
                        offsetY: 10,
                        fill: new Fill({ color: "#fff" }), // 字体颜色
                    }),
                });
                return [style2]
            }
        });

        // 位置图标
        this.clickPointLayer = new KMap.VectorLayer("clickPointLayer", 9999, {
            style: (f) => {
                let pointIcon = new Style({
                    image: new Icon({
                        src: require("@/assets/img/home/garden-point.png"),
                        scale: 0.5,
                        anchor: [0.5, 1],
                    }),
                });
                let nameText = new Style({
                    text: new Text({
                        font: "14px sans-serif",
                        text: f.get("name"),
                        offsetY: 10,
                        fill: new Fill({ color: "#fff" }), // 字体颜色
                        stroke: new Stroke({
                            color: "#000",
                            width: 0.5,
                        }),
                    }),
                });
                return [pointIcon, nameText]
            },
        });
    }


    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.gardenPolygonLayer.layer);
        this.kmap.addLayer(this.clickPointLayer.layer);
    }

    initLayer(item) {
        // this.gardenPolygonLayer.refresh()
        if (this.gardenPolygonLayer.source) {
            this.gardenPolygonLayer.source.clear()
        }
        if (item.pointWkt) {
            let f = newPoint(item, "pointWkt")
            f.set("name", item.name)
            this.clickPointLayer.source.addFeature(f)
        }
        console.log('initLayer', item)
        if (item.geomWkt) {
            // let f = new Feature({
            //     organId: item.organId, // 用于查找点击选中地块的编辑，有多个地块时用id筛选
            //     geometry: new WKT().readGeometry(item.geomWkt)
            // })
            // let geometry = new WKT().readGeometry(item.geomWkt)
            // geometry.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572"))
            let f = newAreaFeature(item, "geomWkt")
            //   let area = getArea(geometry)
            //   area = (area + area / 2) / 1000;
            f.set("mianji", item.mianji)
            this.gardenPolygonLayer.source.addFeature(f)
        }
        this.fitView()
    }

    /**
   * 调整地图视图以适应地块范围
   */
    fitView() {
        let extent = this.gardenPolygonLayer.source.getExtent()
        if (extent) {
            // 地图自适应到区域可视范围
            this.kmap.getView().fit(extent, { duration: 50, padding: [80, 80, 80, 80] });
        }
    }

    fitByGardenId(gardenId, hasMapAnimate) {
        this.gardenPolygonLayer.source.forEachFeature((f) => {
            if (f.get("organId") == gardenId) {
                const extent = f.getGeometry().getExtent()
                this.kmap.getView().fit(extent, { padding: [160, 60, 340, 60], duration: hasMapAnimate ? 1500 : 0 });
                const currentZoom = this.kmap.getView().getZoom();
                if (currentZoom > 16) {
                    // this.kmap.getView().setZoom(16);
                    this.kmap.getView().animate({
                        zoom: 16,
                        duration: hasMapAnimate ? 1500 : 0 // 动画持续时间，单位为毫秒
                    });
                }
            }
        })
    }
}

export default AreaMap;