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