求助：整合JSFiddle示例为地图添加自定义右键菜单及弹窗选项

我已经把你提到的两个OpenLayers示例整合完成，并且给自定义右键菜单添加了「添加弹窗」的选项，点击后会在右键触发的位置生成弹窗。下面是完整的可运行代码，同时我会拆解几个关键实现步骤：

<!DOCTYPE html>
<html>
<head>
  <title>OpenLayers Right Click Menu with Popup</title>
  <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
  <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
  <style>
    /* 右键菜单样式 */
    .ol-popup-menu {
      position: absolute;
      background-color: white;
      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
      padding: 10px;
      border-radius: 4px;
      font-family: sans-serif;
      cursor: default;
      z-index: 1000;
    }
    .ol-popup-menu-item {
      padding: 5px 15px;
      margin: 2px 0;
    }
    .ol-popup-menu-item:hover {
      background-color: #f0f0f0;
    }
    /* 弹窗样式 */
    .ol-popup {
      position: absolute;
      background-color: white;
      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
      padding: 15px;
      border-radius: 10px;
      border: 1px solid #cccccc;
      bottom: 12px;
      left: -50px;
      min-width: 280px;
    }
    .ol-popup:after, .ol-popup:before {
      top: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }
    .ol-popup:after {
      border-top-color: white;
      border-width: 10px;
      left: 48px;
      margin-left: -10px;
    }
    .ol-popup:before {
      border-top-color: #cccccc;
      border-width: 11px;
      left: 48px;
      margin-left: -11px;
    }
    .ol-popup-closer {
      text-decoration: none;
      position: absolute;
      top: 2px;
      right: 8px;
    }
    .ol-popup-closer:after {
      content: "✖";
    }
  </style>
</head>
<body>
  <div id="map" class="map"></div>

  <script>
    // 初始化地图
    var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([37.41, 8.82]),
        zoom: 4
      })
    });

    // 创建右键菜单容器
    var menu = document.createElement('div');
    menu.className = 'ol-popup-menu';
    menu.style.display = 'none';
    document.body.appendChild(menu);

    // 添加菜单选项的工具函数
    function addMenuItem(text, callback) {
      var item = document.createElement('div');
      item.className = 'ol-popup-menu-item';
      item.textContent = text;
      item.addEventListener('click', callback);
      menu.appendChild(item);
    }

    // 保留原示例的缩放菜单选项
    addMenuItem('Zoom In', function() {
      var view = map.getView();
      view.setZoom(view.getZoom() + 1);
      menu.style.display = 'none';
    });

    addMenuItem('Zoom Out', function() {
      var view = map.getView();
      view.setZoom(view.getZoom() - 1);
      menu.style.display = 'none';
    });

    // 新增「添加弹窗」菜单选项
    var currentPopup = null; // 用于管理弹窗实例，避免重复创建
    addMenuItem('添加弹窗', function() {
      // 先移除已有弹窗，避免页面中存在多个弹窗
      if (currentPopup) {
        map.removeOverlay(currentPopup);
      }
      // 执行你提供的弹窗创建代码
      currentPopup = new ol.Overlay.Popup({
        element: document.createElement('div')
      });
      map.addOverlay(currentPopup);
      // 将弹窗定位到右键点击的坐标
      currentPopup.setPosition(clickCoordinate);
      // 给弹窗添加标准样式和内容
      var popupElement = currentPopup.getElement();
      popupElement.className = 'ol-popup';
      popupElement.innerHTML = `
        <a href="#" class="ol-popup-closer"></a>
        <p>这是右键点击位置的自定义弹窗</p>
      `;
      // 绑定弹窗关闭事件
      popupElement.querySelector('.ol-popup-closer').addEventListener('click', function(e) {
        e.preventDefault();
        map.removeOverlay(currentPopup);
        currentPopup = null;
      });
      // 关闭右键菜单
      menu.style.display = 'none';
    });

    // 存储右键点击的坐标
    var clickCoordinate;

    // 监听地图右键点击事件，显示菜单
    map.on('contextmenu', function(e) {
      e.preventDefault();
      clickCoordinate = e.coordinate;
      // 计算菜单在页面中的显示位置
      var pixel = e.pixel;
      var mapSize = map.getSize();
      menu.style.left = pixel[0] + 'px';
      menu.style.top = pixel[1] + 'px';
      // 处理菜单超出地图边界的情况
      if (pixel[0] + menu.offsetWidth > mapSize[0]) {
        menu.style.left = (pixel[0] - menu.offsetWidth) + 'px';
      }
      if (pixel[1] + menu.offsetHeight > mapSize[1]) {
        menu.style.top = (pixel[1] - menu.offsetHeight) + 'px';
      }
      menu.style.display = 'block';
    });

    // 点击地图空白处关闭右键菜单
    map.on('click', function() {
      menu.style.display = 'none';
    });
  </script>
</body>
</html>

关键实现说明： #

1. 右键菜单整合：保留了你提供的第二个示例中的缩放功能，同时通过工具函数addMenuItem快速新增「添加弹窗」选项，保持代码的可扩展性。
2. 弹窗管理逻辑：
   • 新增currentPopup变量来追踪当前弹窗实例，避免重复创建多个弹窗；每次点击「添加弹窗」时会先清理旧弹窗。
   • 将弹窗位置绑定到右键点击时获取的clickCoordinate，确保弹窗精准出现在点击位置。
   • 给弹窗添加了OpenLayers标准的弹窗样式和关闭按钮，提升交互体验。
3. 菜单位置优化：添加了边界检测逻辑，当右键点击位置靠近地图边缘时，菜单会自动调整位置避免超出可视范围。

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