feiniao-be-data/src/utils/ol-map/Map.js

import OLMap from "ol/Map";
import View from "ol/View";
import * as proj from "ol/proj";
import * as interaction from "ol/interaction";
import "ol/ol.css";
import "./css/KMap.css";
import Common from "./Common";
import VectorLayer from "./VectorLayer";
import WMTSLayer from "./WMTSLayer";
import XYZLayer from "./XYZLayer";
import config from "@/api/config.js";

/**
 * KMap.Map —— 与 feiniao-pc-vue 用法对齐的精简实现
 * new KMap.Map(target, level, lng, lat, projection, minZoom, maxZoom, ...)
 */
class Map {
  static Instance = null;

  constructor(id, zoomLevel, lng, lat, projection, minZoom, maxZoom) {
    this.defaultCursor = "default";
    Map.Instance = this;

    if (projection) {
      projection = proj.get(projection);
    }
    projection = projection || proj.get("EPSG:4326");

    let lnglat = [lng, lat];
    if (projection.getCode() === "EPSG:3857") {
      lnglat = proj.fromLonLat(lnglat);
    }

    Common.checkLngLat(lng, lat);

    this.view = new View({
      center: lnglat,
      zoom: zoomLevel,
      minZoom: minZoom || Common.ShowLevel[0],
      maxZoom: maxZoom || Common.ShowLevel[1],
      projection,
    });

    this.map = new OLMap({
      interactions: interaction.defaults().extend([new interaction.DragRotateAndZoom()]),
      target: id,
      layers: [],
      view: this.view,
      controls: [],
    });

    this.initBaseLayer(projection);
    this.initBusinessLayer();
  }

  /** 与 pc-vue / IDN 对齐：连续卫星底图 + WMTS + 农场 XYZ */
  async initBaseLayer(projection) {
    // 先铺连续卫星底图（农场 lby 只覆盖局部，无此层会黑底碎块）
    // 与 IDN-pc-vue 一致使用 ArcGIS World Imagery；放在 await 之前，避免异步等待期间黑屏
    const worldImg =
      "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}";
    this.addXYZLayer(worldImg, { minZoom: 1, maxZoom: 19 }, 1);

    try {
      const getCfg = window.VE_API?.system?.getCfg;
      if (getCfg) {
        const img_wmts = await getCfg({ k: "img_wmts_mkt", resultType: "json" });
        const cva_wmts = await getCfg({ k: "cva_wmts_mkt", resultType: "json" });
        const imgData = typeof img_wmts?.data === "string" ? JSON.parse(img_wmts.data) : img_wmts?.data;
        const cvaData = typeof cva_wmts?.data === "string" ? JSON.parse(cva_wmts.data) : cva_wmts?.data;
        if (imgData?.url) {
          this.tdtImgLayer = new WMTSLayer(imgData, projection, this);
        }
        if (cvaData?.url) {
          this.cva_torLayer = new WMTSLayer(cvaData, projection, this);
        }
      }
    } catch (e) {
      console.warn("[KMap.Map] 底图 WMTS 配置加载失败", e);
    }

    const xyz2 = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
    this.addXYZLayer(xyz2, { minZoom: 15, maxZoom: 22 }, 3);
  }

  addXYZLayer(url, options, zIndex = 3) {
    return new XYZLayer(url, options, zIndex, this);
  }

  initBusinessLayer() {
    const vm = this;
    const map = vm.map;
    vm.markerLayer = new VectorLayer("defaultMarkerLayer", 101);
    vm.polyLineLayer = new VectorLayer("defaultPolylineLayer", 101);
    vm.polygonLayer = new VectorLayer("defaultPolygonLayer", 1000);
    vm.labelLayer = new VectorLayer("defaultLabelLayer", 99);

    map.addLayer(vm.polygonLayer.layer);
    map.once("postrender", () => {
      map.addLayer(vm.markerLayer.layer);
      map.addLayer(vm.polyLineLayer.layer);
      map.addLayer(vm.labelLayer.layer);
    });
  }

  addLayer(layer) {
    this.map.addLayer(layer);
  }

  fit(geometryOrExtent, options) {
    this.view.fit(geometryOrExtent, options);
  }

  on(type, listener) {
    return this.map.on(type, listener);
  }

  updateSize() {
    this.map.updateSize();
  }

  destroy() {
    if (this.map) {
      this.map.setTarget(null);
      this.map = null;
    }
    if (Map.Instance === this) {
      Map.Instance = null;
    }
  }
}

export default Map;