feiniao-farm-h5/src/views/old_mini/entry_information/map/selectLocationMap.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 { boundingExtent } from "ol/extent";
import { reactive } from "vue";

export let mapLocation = reactive({
  data: null,
});

export const POINT_ICON = {
  resident: require("@/assets/img/map/current-point.png"),
  plant: require("@/assets/img/map/zhongzhi-point.png"),
};

/**
 * @description 选点地图，默认常驻点位图标；传入 iconSrc 可切换种植点位
 */
class SelectLocationMap {
  constructor(options = {}) {
    const iconSrc = options.iconSrc || POINT_ICON.resident;
    this.clickPointLayer = new KMap.VectorLayer("clickPointLayer", 9999, {
      style: () => {
        return new Style({
          image: new Icon({
            src: iconSrc,
            scale: 0.45,
            anchor: [0.5, 1],
          }),
        });
      },
    });
    this._clickKey = null;
    /** @type {[number, number, number, number]|null} [top, right, bottom, left] */
    this._padding = null;
    this._showPoint = true;
  }

  /**
   * @param {string} location WKT POINT
   * @param {HTMLElement} target
   * @param {{ enableClick?: boolean, padding?: [number, number, number, number], showPoint?: boolean }} [options]
   */
  initMap(location, target, options = {}) {
    const { enableClick = true, padding = null, showPoint = true } = options;
    this._padding = padding;
    this._showPoint = showPoint;
    const level = 16;
    const coordinate = util.wktCastGeom(location).getFirstCoordinate();
    this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 8, 22);
    const 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);
    if (showPoint) {
      this.setMapPoint(coordinate);
    }
    mapLocation.data = coordinate;
    if (enableClick) {
      this.addMapSingerClick();
    }
    this.fitCenter(coordinate, padding, showPoint);
  }

  /**
   * 用 padding 调整点位在视图中的位置
   * padding: [上, 右, 下, 左]，上边距越大，点位越靠下
   */
  fitCenter(coordinate, padding = this._padding, showPoint = this._showPoint) {
    if (!this.kmap || !coordinate) return;
    const center = [Number(coordinate[0]), Number(coordinate[1])];
    this.kmap.map?.updateSize?.();
    if (padding) {
      const extent = boundingExtent([center]);
      this.kmap.getView().fit(extent, {
        padding,
        maxZoom: 16,
        duration: 0,
      });
    } else {
      this.kmap.getView().setCenter(center);
    }
    if (showPoint !== false) {
      this.setMapPoint(center);
    }
  }

  setMapPosition(center, showPoint = this._showPoint) {
    if (!this.kmap) return;
    const nextCenter = [Number(center[0]), Number(center[1])];
    this._showPoint = showPoint;
    this.fitCenter(nextCenter, this._padding, showPoint);
    mapLocation.data = nextCenter;
  }

  /** 显示点位 */
  showPoint(coordinate) {
    this._showPoint = true;
    if (coordinate) {
      this.setMapPoint(coordinate);
      this.fitCenter(coordinate, this._padding, true);
    }
  }

  /** 清除点位（保留底图） */
  hidePoint() {
    this._showPoint = false;
    this.clearLayer();
  }

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

  addMapSingerClick() {
    const that = this;
    that._clickKey = that.kmap.on("singleclick", (evt) => {
      that.setMapPoint(evt.coordinate);
      mapLocation.data = evt.coordinate;
    });
  }

  clearLayer() {
    this.clickPointLayer?.source?.clear();
  }
}

export default SelectLocationMap;