index_adv_smart2.html

<html lang="en">

<head>
    <meta charset="utf-8">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.94/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.94/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="https://3dps.gis.lrg.tum.de/viewerCesiumNavigationMixin.min.js"> </script>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer" style="width: 100%; height:100%"></div>
    <script>
        // Component 1: Main Cesium 3D Viewer
        var viewer = new Cesium.Viewer('cesiumContainer', {
            baseLayerPicker: false,
            baseLayer: false,
            vrButton: false,
            geocoder: false,
            navigationHelpButton: false,
            selectionIndicator: false,
            shadows: false,
            timeline: true,
            sceneModePicker: false,
            terrainProvider: new Cesium.CesiumTerrainProvider({
                url: 'https://web3d.basemap.de/cesium/dgm5-mesh',
                credit: new Cesium.Credit("\u0026copy; 2023 basemap.de", true)
            }),
            imageryProvider: new Cesium.WebMapServiceImageryProvider({
                url: 'https://sgx.geodatenzentrum.de/wms_basemapde?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities',
                layers: "de_basemapde_web_raster_farbe",
                parameters: {
                    transparent: true,
                    format: "image/png",
                }
            })
        });

        viewer.extend(Cesium.viewerCesiumNavigationMixin, {});

        // Component 2: 3D Tileset
        var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
            url: 'https://web3d.basemap.de/cesium/buildings-fly/root.json'
        }));
        // === Settting the style of the 3D Tileset ===
        var cityStyle = new Cesium.Cesium3DTileStyle({
            color: {
                conditions: [
                    ["${surface} === 'wall'", "color('#f2f2f2')"],
                    ["${surface} === 'roof'", "color('#ff5c4d')"],
                    ["${surface} === 'bridge'", "color('#999999')"]
                ]
            },
        });
        tileset.style = cityStyle

        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(10.277367, 47.415311, 3500.0),
            orientation: {
                heading: Cesium.Math.toRadians(0.0),
                pitch: Cesium.Math.toRadians(-40.0),
                roll: 0.0
            }
        });
    </script>
</body>

</html>