GeoServerTerrainProvider is not defined

[AbishekFRK]

Hi, I was trying to use the terrain provider in one of my angular apps. But I'm facing the below issue. I use the geotiff translator in the repo to translate my 16 bit grayscale data and uploaded the layer as mentioned in the repo. Can you help me out with this.

note: I'm using cesium 1.122

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
declare let Cesium: any;
declare let GeoServerTerrainProvider: any; // Make sure this is globally available

@component({
selector: 'app-cesium',
templateUrl: './cesium.component.html',
styleUrls: ['./cesium.component.scss'],
})
export class CesiumComponent implements OnInit {
private viewer: Cesium.Viewer | undefined;

constructor(private router: Router) {}

ngOnInit(): void {
// Set Cesium base URL
Cesium.buildModuleUrl.setBaseUrl('/assets/Cesium/');

// Get the container element for Cesium Viewer
const cesiumContainer = document.getElementById('cesiumContainer');
if (!cesiumContainer) {
  console.error('Cesium container not found');
  return;
}

// Initialize the viewer with terrain and imagery providers
this.initializeViewer(cesiumContainer);

}

private async initializeViewer(container: HTMLElement): Promise {
try {
// Initialize GeoServer terrain provider
const terrainProvider = new GeoServerTerrainProvider({
url: 'http://localhost:8080/geoserver',
layerName: 'elevation:SRTM90', // Terrain layer from GeoServer
});

  // Initialize the WMS imagery provider with your 'world:map' layer
  const imageryProvider = new Cesium.WebMapServiceImageryProvider({
    url: 'http://localhost:8080/geoserver/world/wms', // WMS endpoint
    layers: 'world:map', // Your desired layer from GeoServer
    parameters: {
      service: 'WMS',
      version: '1.1.0',
      request: 'GetMap',
      styles: '',
      format: 'image/png',
      srs: 'EPSG:4326',
      transparent: true,
    },
    rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0), // Full world extent
    maximumLevel: 18, // Adjust as needed
  });

  // Set Cesium Viewer options
  const options = {
    imageryProvider: imageryProvider,
    baseLayerPicker: false,
    showRenderLoopErrors: true,
    animation: true,
    fullscreenButton: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: true,
    selectionIndicator: false,
    timeline: false,
    navigationHelpButton: false,
    navigationInstructionsInitiallyVisible: false,
    targetFrameRate: 30,
    terrainExaggeration: 1.0,
  };

  // Initialize Cesium Viewer
  this.viewer = new Cesium.Viewer(container, options);

  if (this.viewer) {
    // Assign the terrain provider to the viewer
    this.viewer.terrainProvider = terrainProvider;

    // Fly to the initial location
    this.goHome();
  } else {
    console.error('Cesium Viewer failed to initialize');
  }
} catch (error) {
  console.error('Error initializing Cesium Viewer:', error);
}

}

// Fly to a specific location on the map (default home view)
goHome(): void {
if (this.viewer) {
this.viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(
88.7402, // West Longitude
27.3448, // South Latitude
96.2845, // East Longitude
33.6511 // North Latitude
),
});
}
}

// Switch to 2D map view (if needed)
switchTo2D(): void {
this.router.navigate(['/home/map']);
}
}

also when I tried console log it says undefined

[kaktus40]

Hi, I don't work with angular but from your images and code, I understand that you didn't import GeoServerTerrainProvider ....

[AbishekFRK]

I Included the js file in the html file. But I even tried in cesium which had another issue

<title>Cesium Terrain with GeoServer</title> <script src="../../Build/Cesium/Cesium.js"></script> <script src="../../Build/Cesium/GeoserverTerrainProvider.iife.js"></script> <style> html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; background-color: #000; } </style>

<script> // Initialize Cesium Viewer console.log("Initializing Cesium Viewer..."); const viewer = new Cesium.Viewer('cesiumContainer', { timeline: false, animation: false, imageryProvider: false, baseLayerPicker: false }); console.log("Cesium Viewer initialized:", viewer);

    // Add WMS imagery layer
    console.log("Adding WMS imagery layer...");
    const imageryProvider = new Cesium.WebMapServiceImageryProvider({
        url: 'http://localhost:8080/geoserver/world/wms',
        layers: 'world:map',
        parameters: {
            service: 'WMS',
            version: '1.1.0',
            request: 'GetMap',
            format: 'image/png',
            transparent: true,
        },
        rectangle: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90)
    });
    viewer.imageryLayers.addImageryProvider(imageryProvider);
    console.log("WMS imagery layer added:", imageryProvider);

    // Add GeoServer terrain
    try {
        console.log("Adding GeoServer terrain...");
        const terrainProvider = new Cesium.GeoserverTerrainProvider({
            url: "http://localhost:8080/geoserver",
            layerName: "elevation:SRTM90",
        });
        viewer.terrainProvider = terrainProvider;
        console.log("GeoServer terrain added:", terrainProvider);
    } catch (error) {
        console.error("Failed to load GeoServer terrain provider:", error);
    }
</script>
<script>
    console.log("Checking GeoserverTerrainProvider:", Cesium.GeoserverTerrainProvider);
    Cesium.GeoserverTerrainProvider = Cesium.GeoserverTerrainProvider || window.GeoserverTerrainProvider;
    console.log("GeoserverTerrainProvider assigned:", Cesium.GeoserverTerrainProvider);
</script>    

[AbishekFRK]

The previous one was iife.js.
This is when js file is imported

[kaktus40]

did you try iife file and calling only GeoserverTerrainProvider instead of Cesium.GeoserverTerrainProvider?
In the source code, I create a async function nammed export default async function GeoserverTerrainProvider here and include the plugin in Cesium namespace (window as any).Cesium.GeoserverTerrainProvider = GeoserverTerrainProvider; here