使用 OpenLayers 在自定义事件处理程序中触发 Map 事件

import Draw from 'ol/interaction/Draw';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';

// 创建一个用于绘制的 VectorSource 和 VectorLayer
const source = new VectorSource();
const vector = new VectorLayer({
  source: source,
});

// 创建 Draw 交互
const draw = new Draw({
  source: source,
  type: 'Polygon', // 可以是 'Point', 'LineString', 'Polygon', 'Circle'
});

// 添加 Draw 交互到 Map 对象
const map = new ol.Map({
  target: 'map',
  layers: [
    // ... 其他图层
    vector
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

map.addInteraction(draw);

// 假设 container 是一个非 OpenLayers Map 的 HTML 元素
$(container).on("click.ol", () => {
  if (this.measureHandler.viewerClick === true) {
    this.lastCoord = ol.proj.transform([this.measureHandler.clickCoords[0], this.measureHandler.clickCoords[1]], "EPSG:4326", "EPSG:3857");

    if (measureType !== "Polygon") {
      this.coords.push(this.lastCoord);
    } else {
      if (this.coords.length <= 1) {
        this.coords.splice(0, 0, this.lastCoord);
        this.coords.push(this.lastCoord);
      } else {
        this.coords.splice(this.coords.length - 1, 0, this.lastCoord);
      }
    }

    this.draw.appendCoordinates([this.lastCoord]);
  }
});

$(container).on("mousemove.ol", (evt) => {
  // ... 获取坐标逻辑 ...

  const olEvt = {
    map: this.map,
    pixel: this.measureHandler.pixelObj,
    coordinate: this.lastCoord,
    originalEvent: {
      pointerType: "mouse"
    },
    frameState: this.map.frameState
  };

  this.draw.handlePointerMove_(olEvt);
});

$(container).on("click.ol", () => {
  // ... 其他逻辑 ...

  if (measureType === "Circle") {
    if (this.clickCount === 0) {
      this.draw.appendCoordinates([this.lastCoord]);
      this.clickCount++;
    } else {
      this.draw.finishDrawing();
      this.clickCount = 0;
    }
  } else {
    this.draw.appendCoordinates([this.lastCoord]);
    this.clickCount++;
  }
});

this.measureHandler.containers.forEach((container, nr) => {
  $(container).on("click.ol", () => {
    if (this.measureHandler.viewerClick === true) {
      this.lastCoord = ol.proj.transform([this.measureHandler.clickCoords[0], this.measureHandler.clickCoords[1]], "EPSG:4326", "EPSG:3857");

      if (measureType !== "Polygon") {
        this.coords.push(this.lastCoord);
      } else {
        if (this.coords.length <= 1) {
          this.coords.splice(0, 0, this.lastCoord);
          this.coords.push(this.lastCoord);
        } else {
          this.coords.splice(this.coords.length - 1, 0, this.lastCoord);
        }
      }

      if (measureType === "Circle") {
        if (this.measureHandler.activePlugins[nr] !== "Ortofoto" && this.measureHandler.activePlugins[nr] !== "Ukosne" && this.measureHandler.activePlugins[nr] !== "OSMPlugin") {
          if (this.clickCount === 0) {
            this.draw.appendCoordinates([this.lastCoord]);
            this.clickCount++;
          } else {
            this.draw.finishDrawing();
            this.clickCount = 0;
          }
        }
      } else {
        this.draw.appendCoordinates([this.lastCoord]);
        this.clickCount++;
      }
    }
  });

  $(container).on("mousemove.ol", (evt) => {
    this.maps[nr].removeLayer(this.drawLayer);
    if (nr === 0) {
      this.map2.removeLayer(this.drawLayer);
      this.map2.addLayer(this.drawLayer);
    } else {
      this.map.removeLayer(this.drawLayer);
      this.map.addLayer(this.drawLayer);
    }
    this.maps[nr].addInteraction(this.draw);

    this.lastCoord = ol.proj.transform([this.measureHandler.moveCoords[0], this.measureHandler.moveCoords[1]], "EPSG:4326", "EPSG:3857");

    if (measureType !== "Polygon") {
      this.coords.pop();
      this.coords.push(this.lastCoord);
    } else {
      if (this.coords.length <= 1) {
        this.coords.pop();
        this.coords.push(this.lastCoord);
      } else {
        this.coords.splice(this.coords.length - 2, 1, this.lastCoord);
      }
    }

    if (nr === 0) {
      olEvt = {
        map: this.map2,
        pixel: this.measureHandler.pixelObj,
        coordinate: this.lastCoord,
        originalEvent: {
          pointerType: "mouse"
        },
        frameState: this.map2.frameState
      };
    } else {
      olEvt = {
        map: this.map,
        pixel: this.measureHandler.pixelObj,
        coordinate: this.lastCoord,
        originalEvent: {
          pointerType: "mouse"
        },
        frameState: this.map.frameState
      };
    }
    this.draw.handlePointerMove_(olEvt);
  });

  $(container).on("dblclick.ol", () => {
    this.draw.removeLastPoint();
    this.draw.finishDrawing();
    this.clickCount = 0;
  });
});