feiniao-farm-h5/src/views/old_mini/farm_manage/map/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 { Point } from 'ol/geom';
import Feature from "ol/Feature";
import Style from "ol/style/Style";
import Photo from "ol-ext/style/Photo";
import { Fill, Text, Icon, Stroke } from "ol/style.js";
import { newPoint } from "@/utils/map";

/**
 * @description 地图层对象
 */
class IndexMap {
  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],
          }),
        });
      },
    });

    this.gardenPointLayer = new KMap.VectorLayer("gardenPointLayer", 99, {
      minZoom: 6,
      maxZoom: 22,
      style: (feature) => {
        let style1 = new Style({
          image: new Photo({
            src: "https://birdseye-img.sysuimars.com/ai_result/2023/11/20/tree_4414/img_27572.jpg" + '?imageView2/1/w/300/interlace/1',
            radius: 19,
            shadow: 0,
            crop: true,
            onload: function () {
              that.gardenPointLayer.layer.changed();
            },
            displacement: [-1, -1],
            stroke: new Stroke({
              width: 2,
              color: "#fdfcfc00",
            }),
          }),
        });
        let style2 = new Style({
          image: new Photo({
            src: require("@/assets/img/map/garden-border.png"),
            radius: 24,
            shadow: 0,
            crop: false,
            onload: function () {
              that.gardenPointLayer.layer.changed();
            },
            displacement: [0, -6],
            stroke: new Stroke({
              width: 0,
              color: "#fdfcfc00",
            }),
          }),
        });
        let style3 = new Style({
          text: new Text({
            text: feature.get('farmName') || feature.get('mapInfo'),
            offsetX: 0,
            offsetY: -30,
            font: "bold 12px sans-serif",
            fill: new Fill({ color: "#fff" }), // 字体颜色
          }),
        });

        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // 矩形的参数
        const x = 150; // 矩形中心点的x坐标
        const y = 100; // 矩形中心点的y坐标
        const width = 98; // 矩形的宽度
        const height = 20; // 矩形的高度
        const cornerRadius = 8; // 圆角半径

        // 创建渐变
        const gradient = ctx.createLinearGradient(x - width / 2, y, x + width / 2, y);
        gradient.addColorStop(0, '#2199F8');   // 渐变起始颜色
        gradient.addColorStop(1, '#2199F8');  // 渐变结束颜色

        // 绘制圆角矩形
        ctx.beginPath();
        ctx.moveTo(x - width / 2 + cornerRadius, y - height / 2); // 左上角
        ctx.lineTo(x + width / 2 - cornerRadius, y - height / 2); // 上边
        ctx.arc(x + width / 2 - cornerRadius, y - height / 2 + cornerRadius, cornerRadius, -Math.PI / 2, 0); // 右上角
        ctx.lineTo(x + width / 2, y + height / 2 - cornerRadius); // 右边
        ctx.arc(x + width / 2 - cornerRadius, y + height / 2 - cornerRadius, cornerRadius, 0, Math.PI / 2); // 右下角
        ctx.lineTo(x - width / 2 + cornerRadius, y + height / 2); // 下边
        ctx.arc(x - width / 2 + cornerRadius, y + height / 2 - cornerRadius, cornerRadius, Math.PI / 2, Math.PI); // 左下角
        ctx.lineTo(x - width / 2, y - height / 2 + cornerRadius); // 左边
        ctx.arc(x - width / 2 + cornerRadius, y - height / 2 + cornerRadius, cornerRadius, Math.PI, -Math.PI / 2); // 左上角
        ctx.closePath();

        // 填充颜色
        ctx.fillStyle = gradient;
        ctx.fill();
        const newStyle = new Style({
          image: new Icon({
            src: canvas.toDataURL(),
            displacement: [0, 56],
          }),
        });


        return [style1, style2, newStyle, style3];
      },
    });

    this.gardenHallLayer = new KMap.VectorLayer("gardenHallLayer", 99, {
      minZoom: 6,
      maxZoom: 22,
      style: (feature) => {
        let style2 = new Style({
          image: new Icon({
            src: require("@/assets/img/map/hall.png"),
            scale: 0.4,
            anchor: [0.5, 1],
            displacement: [0, -36],
          }),
        });
        let style3 = new Style({
          text: new Text({
            text: feature.get('totalArea') ? feature.get('totalArea').toFixed(2) + '亩' : '--',
            offsetX: 0,
            offsetY: -30,
            font: "bold 12px sans-serif",
            fill: new Fill({ color: "#fff" }), // 字体颜色
          }),
        });
        let style4 = new Style({
          text: new Text({
            text: feature.get('districtName'),
            offsetX: 0,
            offsetY: -6,
            font: "bold 14px sans-serif",
            fill: new Fill({ color: "#2199F8" }), // 字体颜色
          }),
        });

        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // 矩形的参数
        const x = 150; // 矩形中心点的x坐标
        const y = 100; // 矩形中心点的y坐标
        const width = 58; // 矩形的宽度
        const height = 20; // 矩形的高度
        const cornerRadius = 4; // 圆角半径

        // 创建渐变
        const gradient = ctx.createLinearGradient(x - width / 2, y, x + width / 2, y);
        gradient.addColorStop(0, '#2199F8');   // 渐变起始颜色
        gradient.addColorStop(1, '#2199F8');  // 渐变结束颜色

        // 绘制圆角矩形
        ctx.beginPath();
        ctx.moveTo(x - width / 2 + cornerRadius, y - height / 2); // 左上角
        ctx.lineTo(x + width / 2 - cornerRadius, y - height / 2); // 上边
        ctx.arc(x + width / 2 - cornerRadius, y - height / 2 + cornerRadius, cornerRadius, -Math.PI / 2, 0); // 右上角
        ctx.lineTo(x + width / 2, y + height / 2 - cornerRadius); // 右边
        ctx.arc(x + width / 2 - cornerRadius, y + height / 2 - cornerRadius, cornerRadius, 0, Math.PI / 2); // 右下角
        ctx.lineTo(x - width / 2 + cornerRadius, y + height / 2); // 下边
        ctx.arc(x - width / 2 + cornerRadius, y + height / 2 - cornerRadius, cornerRadius, Math.PI / 2, Math.PI); // 左下角
        ctx.lineTo(x - width / 2, y - height / 2 + cornerRadius); // 左边
        ctx.arc(x - width / 2 + cornerRadius, y - height / 2 + cornerRadius, cornerRadius, Math.PI, -Math.PI / 2); // 左上角
        ctx.closePath();

        // 填充颜色
        ctx.fillStyle = gradient;
        ctx.fill();
        const newStyle = new Style({
          image: new Icon({
            src: canvas.toDataURL(),
            displacement: [0, 56],
          }),
        });


        return [style2, newStyle, style3, style4];
      },
    });
  }

  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.clickPointLayer.layer);
    this.kmap.addLayer(this.gardenPointLayer.layer);
    this.kmap.addLayer(this.gardenHallLayer.layer);
    if (isCapital) {
      // this.initData()
      const point = ["113.61652616170711,23.58399613872042", "113.61767554789421, 23.590079887444034", "113.62757101477101, 23.590796948574365", "113.62240816252164, 23.59499176519138"]
    } else {
      let point = new Feature(new Point(coordinate))
      this.clickPointLayer.addFeature(point)
    }
  }

  initData(taskList, label) {
    this.gardenPointLayer.source.clear();
    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, "farmPoint", "myGarden"))
      }
      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);
      }
    }
  }

  initDataHall(taskList) {
    this.gardenHallLayer.source.clear();
    if (taskList.length > 0) {  // 如果任务列表不为空，则添加任务点
      for (let item of taskList) {
        this.gardenHallLayer.source.addFeature(newPoint(item, "centerPoint", "hallGarden"))
      }
      this.kmap.getView().fit(this.gardenHallLayer.source.getExtent(), { padding: [60, 40, 30, 40] });
      const finalZoom = this.kmap.getView().getZoom();
      if (finalZoom > 18) {
        this.kmap.getView().setZoom(18);
      }
    }
  }
}

export default IndexMap;