OpenLayers 3 如何使用不同的 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' : '';
        });

使用此代码，当我单击 "hotels" 图层的要素时，我无法单击 "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); 
              }
        }
      });
   });

OpenLayers 3 如何使用不同的 Geojson 源显示来自不同矢量图层的弹出窗口

OpenLayers3 how to display popups from different vector layers with diferrent Geojson source

openlayers