Using WebMapTileServiceImageryProvider as ImageryProvider from Geoserver

CesiumJS
1

I'm trying to use WebMapTileServiceImageryProvider as ImageryProvider from Geoserver layer. I'm seeing that the browser is requesting correctly the tiled images to the server (and the server sends to the browser the images), but I can't see anything on Cesium.

var viewer = new Cesium.Viewer(‘cesiumContainer’, {
    imageryProvider : new Cesium.WebMapTileServiceImageryProvider({
                url : ‘http://localhost:8080/geoserver/gwc/service/wmts’,
                layer : ‘PNOA_Mun_Com’,
                style : ‘default’,
                format : ‘image/jpeg’,
                tileMatrixSetID : ‘EPSG:4326’,
                tileMatrixLabels : [‘EPSG:4326:0’, ‘EPSG:4326:1’, ‘EPSG:4326:2’,‘EPSG:4326:3’,‘EPSG:4326:4’,‘EPSG:4326:5’,‘EPSG:4326:6’,‘EPSG:4326:7’,‘EPSG:4326:8’,‘EPSG:4326:9’],
                maximumLevel: 10,
                rectangle: new Cesium.Rectangle(
                   Cesium.Math.toRadians(-2),
                   Cesium.Math.toRadians(38),
                   Cesium.Math.toRadians(2),
                   Cesium.Math.toRadians(42)),
                tilingScheme: new Cesium.GeographicTilingScheme(),
                credit : new Cesium.Credit(‘PNOA’)
    }),
    baseLayerPicker : false
});

I'm using Hello World Cesium 1.51 SandCastle (https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/). I see the http request to the server, and the images on response, but Cesium is painting nothing.

Thanks in advanced:
F.Zuriaga

2

Does the browser console show any errors? Does this Sandcastle example work for you:

What happens if you remove the rectangle property? Or if you add it to the viewer after initialization and then run “flyTo” like in this example?

3

The browser console shows many errors, like "

An error occurred in “WebMapTileServiceImageryProvider”: Failed to obtain image tile X: 129 Y: 34 Level: 7.

An error occurred in “WebMapTileServiceImageryProvider”: Failed to obtain image tile X: 128 Y: 34 Level: 7.

An error occurred in “WebMapTileServiceImageryProvider”: Failed to obtain image tile X: 256 Y: 70 Level: 8.

An error occurred in “WebMapTileServiceImageryProvider”: Failed to obtain image tile X: 257 Y: 70 Level: 8.

…because the layer’s limits. But I see in the browser console request that works fine. I send you one screenshot.

capturaPeticiones.jpg
capturaPeticiones.jpg820×307 80.6 KB

Cesium is making the correct request to the server, and the server is sending the tiles to the browser. The problem is that I can’t see any tile of my layer on the map.

Regards:

F.Zuriaga

4

This is quite interesting. I wonder why it’s reporting a failure then. I think you can debug this by putting a console.log where the error is thrown:

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/ImageryLayer.js#L754

Perhaps print out the e error object. I would also check the requestImage here:

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/WebMapTileServiceImageryProvider.js#L235

Please update this thread if you make any progress here.

5

The console show errors because this tiles isn't on the server. It's
normal behavior. My problem is, why can't see on the map the tiles
that are correctly downloaded from the server?. I only see a blue
sphere, without any tile... I can't understand why, the tiles is
correctly downloaded from server.

6

Hi, finally, I find where is the problem. The problem is CORS, I add a proxy in my web server, and works fine. I thought that, if browser was able to download the image, Cesium would be able to drawn it. But not.

Thanks for your support.

F.Zuriaga

7

That’s very interesting, and thanks for posting your solution! I’m sure it’ll help others running into this.