0

I have a series of geojson files projected on a 2D map, for which it is possible to view the features by clicking on each polygon. The function is reported herebelow

function displayFeatureInfo(pixel) {
const feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
    return feature;
  });
  if (feature) {
  //display a popoup window (id="info") with features info
 }
 else {
  //do not show the popup (hides #info)
 }
}

map.on('click', function(evt) {
  if (evt.dragging) {
    //it doesn't show the info if I just drag the map
    info.style.display = 'none';
    return;
  }
  var pixel = map.getEventPixel(evt.originalEvent);
  displayFeatureInfo(pixel);
}); 

I have also a button to switch from a 2D view to a 3d view with ol-cesium

const ol3d = new olcs.OLCesium({
  map: map,
});
ol3d.setEnabled(false);
document.getElementById('btn-change3d').onclick = function() {
 if(!ol3d.getEnabled()) {
      const NewView =  new ol.View({
      projection: mercatorProjection,
      center: ol.proj.transform([-80, 20], 'EPSG:4326', 'EPSG:3857'),
      zoom: 3,
      maxZoom: 15,
      minZoom: 0,     
      }); 
    map.setView(NewView);
    //enable ol3d  
    ol3d.setEnabled(true);
 }
 else {
    ol3d.setEnabled(false)
    //returns to the 2D view
    map.setView(view);
 }
};

When I switch to the 3D view the function displayFeatureInfo(pixel) doesn't work anymore, although the filters to show/hide different layers or features within the layer's source are working fine. As I have very limited knowledge on Cesium, does somebody have any suggestion? I read the following post, but I am not sure how I can implement the suggested solution in my code

/UPDATE/

Here's the working code:

function displayFeatureInfo(pixel) {
  var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
        return feature;
      });

    if (ol3d && ol3d.getEnabled()) {
      var pickedObject = ol3d.getCesiumScene().pick(new Cesium.Cartesian2(pixel[0], pixel[1]));
      var feature = pickedObject.primitive.olFeature; 
    }


  if (feature) {
  //display a popoup window (id="info") with features info
 }
 else {
  //do not show the popup (hides #info)
 }
}

map.on('click', function(evt) {
  if (evt.dragging) {
    //it doesn't show the info if I just drag the map
    info.style.display = 'none';
    return;
  }
  var pixel = map.getEventPixel(evt.originalEvent);
  displayFeatureInfo(pixel);
}); 
Elena Politi
  • 161
  • 2
  • 18

0 Answers0