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);
});