OpenLayers3, как отображать всплывающие окна из разных векторных слоев с различным источником Geojson

Question

попробуйте обновить мою карту с openlayers 2 до OL3 или выше. На моей карте есть несколько векторных слоев с разным источником Geojson. Для каждого из этих векторных слоев мне нужно всплывающее окно для отображения подробной информации о выбранном объекте. В настоящее время я могу отображать все свои слои без проблем, но когда появляется всплывающее окно, возникает какая-то проблема. Смотри ниже код:

var geoJSONFormat = new ol.format.GeoJSON();

var osmMap = new ol.layer.Tile({
  source: new ol.source.OSM({
    "url" : "https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png"
  })
});


var hotels = new ol.layer.Vector({
  id: 'hotels',
  source: new ol.source.Vector({
      format: new ol.format.GeoJSON(),
      url: 'hotels-geojson.php'
  }) 
});

var cwo = new ol.layer.Vector({
  id: 'cwo',
  source: new ol.source.Vector({
      format: new ol.format.GeoJSON(),
      url: 'source-of-cwo-in-geojson-format'
  }) 
});    

var element = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');    

var map = new ol.Map({
  layers: [osmMap, hotels, cwo],
  target: document.getElementById('map'),
  view: new ol.View({
    projection: 'EPSG:4326',
    center: [0,0],
    maxZoom: 19,
    zoom: 11
  })
});    

var popup = new ol.Overlay({
  element: element,
  positioning: 'bottom-left',
  stopEvent: false,
  offset: [0, 0]
});
map.addOverlay(popup);    

var hotelsfeature = null;
var cwofeature = null;   


 // display popup on click
    map.on('click', function(evt) {
  map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
    if (layer == hotels) {
      hotelsfeature = feature;
    }
   else if (layer == cwo){
      cwofeature = feature;

    }          

});

  if (hotelsfeature) {
    var geometry = hotelsfeature.getGeometry(); // access the geometry section of the Geojson
    var coord = geometry.getCoordinates(); // get the coordinates in the geometry section

    var element = '<h3>' + hotelsfeature.get('h_name') + '</h3>';        

    content.innerHTML = element;

     // add the content to the html
    popup.setPosition(coord); 

    var popWidth = $("#popup").outerWidth();            
    var popHeight = $("#popup").outerHeight();
    var mapWidth = $("#map").width();
    var mapHeight = $("#map").height();
    var distPopW = mapWidth - popWidth;
    var distPopH = mapHeight - popHeight;
    var pointPix =  map.getPixelFromCoordinate(coord);
    if (pointPix[0] > distPopW && pointPix[1] > distPopH) {
      $('#popup').removeClass();
      $('#popup').addClass('popleft');
      $('#popup').addClass('poptop');
      $('#popup').addClass('arrow-bottom-right');
    }
    else if (pointPix[0] > distPopW && pointPix[1] < distPopH ) {
      $('#popup').removeClass();
      $('#popup').addClass('popleft');
      $('#popup').addClass('popbottom');
      $('#popup').addClass('arrow-top-right');
    }
    else if (pointPix[0] < distPopW && pointPix[1] > distPopH ) {
      $('#popup').removeClass();
      $('#popup').addClass('poptop');
      $('#popup').addClass('popright');
      $('#popup').addClass('arrow-bottom-left');
    }
    else if (pointPix[0] < distPopW && pointPix[1] < distPopH  ) {
      $('#popup').removeClass();
      $('#popup').addClass('popbottom');
      $('#popup').addClass('popright');
      $('#popup').addClass('arrow-top-left');
    }
  }

  else if (cwofeature) {
    var geometry = cwofeature.getGeometry(); // access the geometry section of the Geojson
    var coord = geometry.getCoordinates(); // get the coordinates in the geometry section

    var element = '<h3>' + cwofeature.get('pla_short_name') + '</h3>';        

    content.innerHTML = element;

     // add the content to the html
    popup.setPosition(coord); 

    var popWidth = $("#popup").outerWidth();            
    var popHeight = $("#popup").outerHeight();
    var mapWidth = $("#map").width();
    var mapHeight = $("#map").height();
    var distPopW = mapWidth - popWidth;
    var distPopH = mapHeight - popHeight;
    var pointPix =  map.getPixelFromCoordinate(coord);
    if (pointPix[0] > distPopW && pointPix[1] > distPopH) {
      $('#popup').removeClass();
      $('#popup').addClass('popleft');
      $('#popup').addClass('poptop');
      $('#popup').addClass('arrow-bottom-right');
    }
    else if (pointPix[0] > distPopW && pointPix[1] < distPopH ) {
      $('#popup').removeClass();
      $('#popup').addClass('popleft');
      $('#popup').addClass('popbottom');
      $('#popup').addClass('arrow-top-right');
    }
    else if (pointPix[0] < distPopW && pointPix[1] > distPopH ) {
      $('#popup').removeClass();
      $('#popup').addClass('poptop');
      $('#popup').addClass('popright');
      $('#popup').addClass('arrow-bottom-left');
    }
    else if (pointPix[0] < distPopW && pointPix[1] < distPopH  ) {
      $('#popup').removeClass();
      $('#popup').addClass('popbottom');
      $('#popup').addClass('popright');
      $('#popup').addClass('arrow-top-left');
    }
  }    

});   


// change mouse cursor when over marker
map.on('pointermove', function(e) {
          if (e.dragging) return;
          var pixel = map.getEventPixel(e.originalEvent);
          var hit = map.hasFeatureAtPixel(pixel);

          map.getTarget().style.cursor = hit ? 'pointer' : '';
        });

С этим кодом, когда я нажимаю на элемент слоя «отели», я не могу щелкнуть затем на слое «cwo». Но если я сначала нажму на «cwo», сначала откроются всплывающие окна, то я также могу открыть функцию «hotels», но не могу вернуться к слою «cwo». Буду очень признателен, если кто-нибудь укажет мне правильное направление.

Answer 1

После нескольких часов попыток и перемещения вещей, я наконец-то заработал. При проверке того, какой слой нажат, создание всплывающего окна для слоя необходимо добавить непосредственно в условие. Ниже приведен код:

    map.on('click', function(evt) {
        map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
           if (layer === hotels) {
               hotelsfeature = feature;
               if (hotelsfeature) {
                    var geometry = hotelsfeature.getGeometry(); 
                    var coord = geometry.getCoordinates(); 
                    var element = '<h3>' + hotelsfeature.get('h_name') + '</h3>'; 

                    content.innerHTML = element;
                    popup.setPosition(coord);
               }
          }
          else if (layer === cwo){
              cwofeature = feature;
              if (cwofeature) {
                   var geometry = cwofeature.getGeometry(); 
                   var coord = geometry.getCoordinates(); 
                   var element = '<h3>' + cwofeature.get('pla_short_name') + '</h3>';  
                   content.innerHTML = element;
                   popup.setPosition(coord); 
              }
        }
      });
   });