feiniao-farm-h5/src/views/old_mini/work_execute/index.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 Photo from "ol-ext/style/Photo";
import { Icon, Stroke } from "ol/style.js";
import { newPoint } from "@/utils/map";

const LABEL_FONT = "12px sans-serif";
const LABEL_PADDING = [4, 10, 4, 10];
const LABEL_RADIUS = 18;
const LABEL_DPR = window.devicePixelRatio || 2;
const PHOTO_RESIZE = "?imageView2/1/w/300/interlace/1";
const DEFAULT_PHOTO =
  "https://birdseye-img-ali-cdn.sysuimars.com/sikong/fh_sync/71892baf-42b7-4d35-a763-2a420014d901/82d4e04b-df4e-4eef-b220-bd388f5f8299/media/71de4f44-235a-4274-ad5d-e5a0ce6f2abe/DJI_20260530085247_0222_V_code-ws0fsme6cx56.jpeg" + PHOTO_RESIZE;

function getFeaturePhotoSrc(feature) {
  // const image = feature.get("beforeImage") || feature.get("afterImage") || feature.get("coverImage");
  // if (image?.cloud_filename) {
  //   return config.base_img_url3 + image.cloud_filename + PHOTO_RESIZE;
  // }
  // const src = feature.get("mapPhotoUrl") || feature.get("coverImg") || feature.get("imgUrl");
  // if (src) {
  //   return src.startsWith("http") ? src : config.base_img_url3 + src + PHOTO_RESIZE;
  // }
  return DEFAULT_PHOTO;
}

function createPillLabel(text) {
  const [paddingTop, paddingRight, paddingBottom, paddingLeft] = LABEL_PADDING;
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const labelText = text || "";
  ctx.font = LABEL_FONT;
  const metrics = ctx.measureText(labelText);
  const textWidth = metrics.width;
  const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent || 12;
  const width = Math.ceil(textWidth + paddingLeft + paddingRight);
  const height = Math.ceil(textHeight + paddingTop + paddingBottom);

  canvas.width = Math.ceil(width * LABEL_DPR);
  canvas.height = Math.ceil(height * LABEL_DPR);
  ctx.scale(LABEL_DPR, LABEL_DPR);
  ctx.imageSmoothingEnabled = true;
  ctx.imageSmoothingQuality = "high";

  ctx.font = LABEL_FONT;
  ctx.beginPath();
  ctx.roundRect(0, 0, width, height, Math.min(LABEL_RADIUS, height / 2));
  // 深色胶囊标签，贴合页面深色主题
  ctx.fillStyle = "rgba(12, 12, 12, 0.78)";
  ctx.fill();
  ctx.strokeStyle = "rgba(255, 255, 255, 0.12)";
  ctx.lineWidth = 1;
  ctx.stroke();

  ctx.fillStyle = "#FFFFFF";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(labelText, Math.round(width / 2), Math.round(height / 2));

  return canvas.toDataURL();
}

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

    this.borderStyle = new Style({
      image: new Icon({
        src: require("@/assets/img/home/garden-point.png"),
        scale: 0.3,
        onload: function () {
          that.gardenPointLayer.layer.changed();
        },
        danchor: [0.5,1],
      }),
    });

    this.gardenPointLayer = new KMap.VectorLayer("gardenPointLayer", 99, {
      minZoom: 6,
      maxZoom: 22,
      style: (feature) => {
        const labelText = this.onlyName ? feature.get("farmName") : ((feature.get("executeDate") + ' ' + feature.get("farmName")) || feature.get("mapInfo") || "");
        if (!this.labelStyleCache[labelText]) {
          this.labelStyleCache[labelText] = new Style({
            image: new Icon({
              src: createPillLabel(labelText),
              scale: 1 / LABEL_DPR,
              anchor: [0.5, 1],
              displacement: [0, 28],
            }),
          });
        }

        return [this.borderStyle, this.labelStyleCache[labelText]];
      },
    });
  }

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

  initData(taskList, label, pointType = "point", onlyNameVal = false) {
    this.labelStyleCache = {};
    this.gardenPointLayer.source.clear();
    this.onlyName = onlyNameVal;
    if (taskList.length > 0) {
      for (let item of taskList) {
        item.mapInfo = label
          ? item[label]
          : (item.executeDeadlineDate || item.executeDate)?.replace(/^\d{4}-(\d{2})-(\d{2})$/, "$1.$2") +
            "  " +
            item.farmWorkName;
        this.gardenPointLayer.source.addFeature(newPoint(item, pointType));
      }
      this.kmap.getView().fit(this.gardenPointLayer.source.getExtent(), { padding: [42, 20, 30, 20] });
      const finalZoom = this.kmap.getView().getZoom();
      if (finalZoom > 18) {
        this.kmap.getView().setZoom(18);
      }
    }
  }
}

export default IndexMap;