I’m making a webGIS app based on Cesium Js. I have a node js server for all the server logic, a tomcat server hosting Geoserver to be able to load WMS layer on Cesium.
On my app I want to allow the user to visualize his own raster data (.tiff). So actually on the app the user can upload the data, all the information are saved into a database, the Geotiff goes to geoserver (thanks to geoserver RESTAPI) to make the WMS layer.
But the problem I have now is that I want to show the wms layer on the Cesium map after the user upload the data.
I know how to display wms on Cesium but when I make a function to get the geoserver layer info (stored in a postgresql database) and pass the info into the WMS function, nothing appears on the map.
Any though how to make appears wms on demand by the user ?
Here is my code for the wms function :
testWms = document.querySelector(‘#wms’)
// event to call on click the fetchLatestLayer function
testWms.addEventListener(‘click’, fetchLatestLayer);
// Function to add WMS layer to the Cesium map
function addWMSLayer(storename, layername) {
console.log(layername, storename)
const provider = new Cesium.WebMapServiceImageryProvider({
url: ‘http://localhost:8080/geoserver/wms’,
parameters: {
format: ‘image/png’,
transparent: ‘true’
},
layers: ${storename}:${layername}
});
const imageryLayer = new Cesium.ImageryLayer(provider);
viewer.imageryLayers.add(imageryLayer);
}
async function fetchLatestLayer() {
try {
const response = await axios.get(‘/latest-layer’);
const { storename, layername } = response.data;
console.log(‘Got latest layer:’, { storename, layername });
addWMSLayer(storename, layername);
} catch (error) {
console.error(‘Error fetching latest layer:’, error);
}
}