单击外部链接时显示和隐藏所有图层弹出窗口- openlayrs3

// 创建地图容器
var mapContainer = document.getElementById('map');

// 初始化地图
var map = new ol.Map({
  target: mapContainer,
  layers: [
    // 添加图层
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 0]),
    zoom: 2
  })
});

// 添加弹出窗口
var popup = new ol.Overlay({
  element: document.getElementById('popup'),
  positioning: 'bottom-center',
  stopEvent: false
});
map.addOverlay(popup);

// 监听地图点击事件
map.on('click', function(event) {
  // 遍历地图上的所有弹出窗口
  map.getOverlays().forEach(function(overlay) {
    // 隐藏弹出窗口
    overlay.setPosition(undefined);
  });
  
  // 显示点击位置的弹出窗口
  popup.setPosition(event.coordinate);
});

// 监听外部链接点击事件
var externalLink = document.getElementById('external-link');
externalLink.addEventListener('click', function(event) {
  // 遍历地图上的所有弹出窗口
  map.getOverlays().forEach(function(overlay) {
    // 隐藏弹出窗口
    overlay.setPosition(undefined);
  });
  
  // 阻止事件冒泡，避免地图点击事件被触发
  event.stopPropagation();
});