feiniao-farm-h5/src/views/old_mini/agri_services/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";
import VectorLayer from "ol/layer/Vector";

/**
 * @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.gardenHallLayer = new KMap.VectorLayer("gardenHallLayer", 99, {
      minZoom: 6,
      maxZoom: 22,
      style: (feature) => {
        let style2 = new Style({
          image: new Icon({
            src: require("@/assets/img/home/farm-point.png"),
            scale: 0.5,
            anchor: [0.5, 1],
            displacement: [0, -36],
          }),
        });
        let style3 = new Style({
          text: new Text({
            text: feature.get('shortName') || '--',
            offsetX: 0,
            offsetY: -30,
            font: "bold 12px 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, '#fff');   // 渐变起始颜色
        gradient.addColorStop(1, '#fff');  // 渐变结束颜色

        // 绘制圆角矩形
        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];
      },
    });
  }

  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");
    this.kmap.addLayer(this.clickPointLayer.layer);
    this.kmap.addLayer(this.gardenHallLayer.layer);
    
    // 添加点击事件
    this.addGardenHallClick();
  }

  // 添加服务大厅图层点击事件
  addGardenHallClick() {
    let that = this;
    this.kmap.on("singleclick", (evt) => {
      that.kmap.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
        if (layer instanceof VectorLayer && layer.get("name") === "gardenHallLayer") {
          // 获取点击的要素数据
          const featureData = feature.getProperties();
          // 触发点击事件回调
          if (that.onGardenHallClick) {
            that.onGardenHallClick(featureData, evt);
          }
          return feature;
        }
      });
    });
  }

  // 设置点击事件回调
  setGardenHallClickCallback(callback) {
    this.onGardenHallClick = callback;
  }

  initDataHall(taskList) {
    this.gardenHallLayer.source.clear();
    if (taskList.length > 0) {  // 如果任务列表不为空，则添加任务点
      for (let item of taskList) {
        try{
          this.gardenHallLayer.source.addFeature(newPoint(item, "point", "hallGarden"))
        }catch(error){
          console.log('error');
        }
      }
      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;