open layers悬浮在图标上显示弹框且点击图标后显示右侧弹框

要实现在 OpenLayers 中悬浮在图标上显示弹框，可以使用 Overlay 和 Popup 组件来实现。以下是一个示例代码：

// 创建一个 overlay
var overlay = new ol.Overlay({
  element: document.getElementById('popup-container'),
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
});

// 添加 overlay 到地图
map.addOverlay(overlay);

// 创建一个 icon feature
var iconFeature = new ol.Feature({
  geometry: new ol.geom.Point([0, 0])
});

// 创建一个 icon layer
var iconLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [iconFeature]
  }),
  style: new ol.style.Style({
    image: new ol.style.Icon({
      src: 'path/to/icon.png'
    })
  })
});

// 添加 icon layer 到地图
map.addLayer(iconLayer);

// 监听鼠标移动事件
map.on('pointermove', function(evt) {
  // 获取鼠标所在位置的 feature
  var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
    return feature;
  });

  // 如果存在 feature，则显示 overlay
  if (feature) {
    // 设置 overlay 的位置
    overlay.setPosition(evt.coordinate);

    // 显示 overlay
    overlay.getElement().style.display = 'block';
  } else {
    // 隐藏 overlay
    overlay.getElement().style.display = 'none';
  }
});

// 监听 feature 的点击事件
iconLayer.getSource().on('featureclicked', function(evt) {
  // 获取点击的 feature
  var feature = evt.target;

  // 显示右侧弹框
  // TODO: 显示右侧弹框的代码
});

// 给 icon feature 添加点击事件
iconFeature.on('click', function(evt) {
  // 触发 featureclicked 事件
  iconLayer.getSource().dispatchEvent({
    type: 'featureclicked',
    target: evt.target
  });
});

在上面的代码中，我们创建了一个 Overlay 组件用于显示悬浮弹框，并创建了一个 icon feature 和一个 icon layer。在地图上监听鼠标移动事件，如果鼠标所在位置有 feature，则显示悬浮弹框。在 icon layer 上监听 featureclicked 事件，当点击 feature 时触发该事件。在 icon feature 上添加点击事件，当点击 feature 时触发 featureclicked 事件。

如果要显示右侧弹框，可以在 iconLayer.getSource().on('featureclicked', function(evt) {}) 中添加相应的代码。您可以使用类似于上面创建 Overlay 的方式创建一个新的 Overlay 组件，并在点击 feature 时设置其位置并显示即可。