[GIS] I can’t see the WMS layer on Cesium Globe scene

cesiumgeoserver

After insert a WMS layer in my Cesium, I can see in my browser that the images are comming from Geoserver but they are not visible in the globe.

Here is the code ( commented lines are because I'm testing ):

var west = -45;
var south = -24;
var east = -42;
var north = -22;

var rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);

Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = rectangle;


var imageryProviderCHM = new Cesium.WebMapServiceImageryProvider({
    url : 'http://10.5.115.180:36213/geoserver/wms',
    layers: 'CHM:ElementosProntos',
    parameters : {
        transparent : true,
        tiled : true,
        format : 'image/png'
    }
});


var viewer = new Cesium.Viewer('cesiumContainer',{
    //sceneMode : Cesium.SceneMode.COLUMBUS_VIEW,
    //imageryProvider : false,
    //timeline : false,
});

//viewer.imageryLayers.removeAll();
viewer.imageryLayers.addImageryProvider( imageryProviderCHM  );


var terrainProvider = new Cesium.CesiumTerrainProvider({
    url : '/tilesets/test',
    credit : 'Dr. Who'
});

//var widget = new Cesium.CesiumWidget('cesiumContainer');
//widget.imageryLayers.addImageryProvider( imageryProviderCHM );
//widget.imageryLayers.addImageryProvider( provider );

//viewer.scene.terrainProvider = terrainProvider;

And here we can see the tiles comming from my geoserver and the area they must be:

enter image description here

What I'm doing wrong? Maybe layer order?

EDIT
A clue: My browser is throwing this in console: An error occurred in "N": Failed to obtain image tile X: 777 Y: 640 Level: XX.

Best Answer

Never mind!

It is a CORS problem. Using Chrome with a "CORS bypass" plugin makes all thing goes fine.

As permanent solution I follow @eg-novelt response here:

https://github.com/kartoza/docker-geoserver/issues/24

and now I can see all working very well in any browser.

Hello, for me what worked was a few extra init-params, in /usr/local/tomcat/conf/web.xml as follows:

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
    <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>If-Mofidied-Since,Range,Origin</param-value>
    </init-param>
</filter>

<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
Related Question