Angular中动态创建OpenLayers控件时如何让mat-menu在正确位置弹出？

问题原因 #

你的问题出在两个核心错误上：

1. 坐标赋值写反：getPixelFromCoordinate返回的数组第一个值是水平坐标（对应left属性），第二个是垂直坐标（对应top属性），你当前代码把两个值赋值反了，导致动态控件的位置本身就不正确。
2. 菜单触发锚点不匹配：你当前触发菜单的MatMenuTrigger绑定在模板里的空div上，Angular会根据这个空div的位置计算菜单弹出位置，和你实际点击的动态控件位置完全不匹配，所以菜单跑到了右上角。

修复方案 #

HTML代码（删除无用的空触发div）

<mat-menu #menu="matMenu" yPosition="below" xPosition="before" [overlapTrigger]="false">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>
<app-map-openlayers></app-map-openlayers>

增加[overlapTrigger]="false"是可选优化，避免菜单覆盖触发控件

TS代码修改

首先补充导入依赖：

import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
import { CustomControl } from 'ol/control';
// 其他原有导入保持不变

组件属性调整：

// 改为获取mat-menu实例，而非原有模板上的trigger
@ViewChild('menu') matMenu: MatMenu;
map: ol.Map;
// 存储动态创建的控件和trigger，方便后续销毁避免重复
private contextMenuControl: CustomControl;
private menuTrigger: MatMenuTrigger;

方法逻辑调整：

private getContextMenuControl(east: number, north: number): CustomControl {
  // 先销毁已有菜单控件和trigger，避免重复创建残留
  if (this.contextMenuControl) {
    this.map.removeControl(this.contextMenuControl);
  }
  if (this.menuTrigger) {
    this.menuTrigger.destroy();
  }

  const element = document.createElement('div');
  element.className = 'ol-control button menu-opener';
  element.style.position = 'absolute';
  element.style.cursor = 'pointer';

  const pix = this.map.getPixelFromCoordinate([east, north]);
  pix[1] -= 40;
  // 修正坐标赋值
  element.style.left = `${pix[0]}px`;
  element.style.top = `${pix[1]}px`;

  // 给当前动态控件挂载MenuTrigger，将其作为菜单的触发锚点
  this.menuTrigger = new MatMenuTrigger(
    element,
    null,
    this.matMenu,
    null,
    null,
    null,
    null
  );

  element.addEventListener('click', (event) => {
    event.stopPropagation();
    this.menuTrigger.toggleMenu();
  }, false);

  return new CustomControl({ element: element });
}

// 要素点击调用逻辑保持不变
this.contextMenuControl = this.getContextMenuControl(east, north);
this.map.addControl(this.contextMenuControl);

内容的提问来源于stack exchange，提问作者char m