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>
