Adding wms layers issue in ol-cesium

Hi,

I am using ol-cesium in visual studio project. I added WMS, Vector, WMTS layers in openlayers map.
I can see Vector and WMTS layers in both the viewer. But, I couldnot see any WMS in 3D (Cesium) Viewer. Please find below the attached images.

In 2D (Openlayers):
image

In 3D (Cesium):
image

But in node js project using webpack, it’s working. I have used same code.
In 2D (Openlayers):

In 3D (Cesium):
image

For both project, I am using same versions
image

Version details:-
Cesium: 1.70
Openlayers: 6.3.1
ol-cesium: 2.10

Also please find the small piece of code for adding wms layers in openlayers viewer for both nodejs and vs project
image

Please anyone help me.

In the version where the layer doesn’t appear, do you see any console or network errors?

Hi @omar,

In 3D Map (Cesium), WMS layer not showing. But, In 2D (Openlayers) layer is showing.

2D Map with console and network:

3D Map with console and network:

Please find below working code.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Sample Ol-Cesium</title>
    <!-- Openlayers -->

    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.70/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.70/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol-cesium@2.10.0/css/olcs.css">
    <script src="https://cdn.jsdelivr.net/npm/ol-cesium@2.10.0/dist/olcesium.js"></script>
    <style>
        html,
        body,
        #olCesMap {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }

        #btnSwitchMap {
            position: absolute;
            top: 10px;
            right: 50px;
            z-index: 2;
            padding: 4px;
        }
    </style>
</head>

<body>
    <div id="olCesMap">
        <button id="btnSwitchMap" onclick="cesViewer.setEnabled(!cesViewer.getEnabled());">Switch 2D/3D</button>
    </div>
    <script defer>
        var controls = ol.control.defaults({
            rotate: true,
            rotateOptions: {
                tipLabel: "Reset rotation. \nUse Alt+Shift+Drag to rotate the map."
            }
        });
        var interactions = ol.interaction.defaults({ altShiftDragRotate: true, pinchRotate: true });

        // Declaring Zoom level to further view
        var zoom = 3;
        // Declaring Map center
        var center = ol.proj.fromLonLat([-96.41778916767144, 39.90201978025539]);

        const basemapTileLayer = new ol.layer.Tile({
            title: 'BaseMaps',
            displayInLayerSwitcher: false,
            source: new ol.source.OSM({
                'url': "https://{a-c}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
            })
        });
        basemapTileLayer.set('name', 'tileLayer');


        //Map Creation
        //Create map, giving it a rotate to north control.
        var map = new ol.Map({
            controls: controls,
            interactions: interactions,
            target: 'olCesMap',
            layers: [basemapTileLayer],
            view: new ol.View({
                center: center,
                zoom: zoom
            })
        });

        //Cesium Viewer constructed based on Ol.Map
        var cesViewer = new olcs.OLCesium({
            map: map,
            sceneOptions: {
                mapProjection: new Cesium.WebMercatorProjection()
            }
        });

        //Cesium Viewer camera set-up
        //cesViewer.getCamera().setTilt(1.214017522847965);
        //cesViewer.getCamera().setAltitude(3000);

        //Cesium Viewer scene
        var scene = cesViewer.getCesiumScene();

        //Cesium Viewer enable
        cesViewer.setEnabled(false);

        //Cesium Viewer depthtest
        scene.globe.depthTestAgainstTerrain = true;


        /**
         * Add WMS Service Layer to Map
         * @param {String} url url
         * @param {String} layerName layer name
         * @param {String} extent extent
         */
        function addMapServerWMSService(url, layerName) {
            var wmsLayer = new ol.layer.Image({
                source: new ol.source.ImageWMS({
                    url: url,
                    params: {
                        'LAYERS': layerName,
                        'FORMAT': 'image/png'
                    }
                })
            });

            map.addLayer(wmsLayer);
        }

        addMapServerWMSService("https://ahocevar.com/geoserver/wms", "topp:states");
    </script>
</body>

</html>

It appears there are no errors from the screenshot you’ve posted. Have you checked the network tab to ensure that your application is making the requests to the correct server, and that those requests are succeeding?

Hi omar!

I am facing with exactly the same issue. On my network tab I see no WMS requests. Do you have any idea what’s going wrong?

Regards,
Zsolt

Hi, any progress in this issue?
The WMS respons images is 200 OK in 3d view but it only renders in 2d view. No errors.
WFS and GeoJSON works fine.
Best regards/ Micke

@mulfvik1

Welcome to the community! :fireworks: :rocket:

I just checked in with a few of our CesiumJS developers and I do not think that we have merged a pull request related to this issue.

What exact problem are you facing? What is your overall use case?

-Sam

Thank you @sam.rothstein :slight_smile:
Found this thread and thought to ask here but my issue might be related to the ol-cesium repo, anyway…
I have an webmap based on openlayers 6.5.0 and using ol-cesium 2.13.0/cesium 1.84.0 for 3d. Background maps is openstreetmap and a WMTS from geowebcache and they render properly in 3d view. Well, not quite because the WMTS is “jumping” offset when changing to 3d view but that is another issue and probably due to resolution config in GWC (but weird because openstreetmap uses the same resolutions and is rendering as it should). WFS and GeoJSON also renders properly in 3d. When it comes to WMS it doesnt render in 3d view, only in 2d view. Projection EPSG:3857 without any reprojections in client.
When requesting a WMS service in 3d view the response is 200 and the images are there but they does not show in viewer.
/Micke

1 Like

@mulfvik1

Thanks for providing some more details! It does indeed seems like this may be a problem with the ol-cesium repo. Do you think it’s worth writing up another issue on GitHub? It may also make sense to add the details that you shared on the community forum to the GitHub issue. Let me know what you think!

-Sam

Sounds good @sam.rothstein. Added my case to ol-cesium issue. If anyone else has similar problem, please add it there. The more the merrier and easier to solve :slight_smile:
https://github.com/openlayers/ol-cesium/issues/732
/Micke

1 Like

@mulfvik1

Thank you very much :rocket:

-Sam

Had some luck with the issue of WMTS from Geowebcache rendering a bit offset in ol-cesium 3D view and wanted to share it if someone else falls into this. The problem was the resolutions for EPSG:3857. Here are the proper ones: