Cesium terrain from url

CesiumJS
1

Hey there!

I want to integrate a national elevation model served from a URL into Cesium. I successfully implemented this using the ArcGIS SDK with the following code:

javascript

Copy code

const map = new Map({
  basemap: {
    baseLayers: [
      new TileLayer({
        url: "https://services.geodataonline.no/arcgis/rest/services/Geocache_UTM33_EUREF89/GeocacheBilder/MapServer",
      }),
    ],
  },
  ground: {
    layers: [
      new ElevationLayer({
        url: "https://services.geodataonline.no/arcgis/rest/services/Geocache_UTM33_EUREF89/GeocacheTerreng/ImageServer",
      }),
    ],
    navigationConstraint: { type: "stay-above" },
  },
  layers: [
    new SceneLayer({
      url: "https://services.geodataonline.no/arcgis/rest/services/Geoscene/GeosceneBygning2/SceneServer",
    }),
  ],
});

const map2D = new Map({
  basemap: {
    baseLayers: [
      new TileLayer({
        url: "https://services.geodataonline.no/arcgis/rest/services/Geocache_UTM33_EUREF89/GeocacheBilder/MapServer",
      }),
    ],
  },
});

However, when attempting to achieve the same functionality in Cesium, I’ve encountered several issues, particularly with spatial information errors and rendering problems where Cesium only displays a black screen with the terrain visible. Here is the code I used for Cesium:

javascript

Copy code

const CesiumViewer: React.FC = () => {
  Cesium.Ion.defaultAccessToken = "your_ion_token";
  Cesium.ArcGisMapService.defaultAccessToken = "your_arcgis_token";

  useEffect(() => {
    const initCesium = async () => {
      const viewer = new Cesium.Viewer("cesiumContainer", {
        terrain: Cesium.Terrain.fromWorldTerrain(),
        geocoder: true,
        homeButton: true,
        sceneModePicker: true,
        baseLayerPicker: true,
        navigationHelpButton: true,
        navigationInstructionsInitiallyVisible: true,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        vrButton: false,
        infoBox: true,
        selectionIndicator: true,
      });

      const osmBuildingsTileset = await Cesium.createOsmBuildingsAsync();
      viewer.scene.primitives.add(osmBuildingsTileset);

      viewer.scene.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(10, 60, 750),
        orientation: {
          heading: Cesium.Math.toRadians(20),
          pitch: Cesium.Math.toRadians(-20),
        },
        duration: 0,
      });

      IdentityManager.registerToken({
        server: "https://services.geodataonline.no/arcgis/rest/services",
        token: "your_arcgis_token",
      });

      const terrainProvider = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl(
        "https://services.geodataonline.no/arcgis/rest/services/Geocache_WMAS_WGS84/GeocacheTerreng/ImageServer",
        { token: "your_arcgis_token" }
      );

      viewer.scene.terrainProvider = terrainProvider;

      const esriImageryProvider = await Cesium.ArcGisMapServerImageryProvider.fromUrl(
        "https://services.geodataonline.no/arcgis/rest/services/Geocache_WMAS_WGS84/GeocacheTerreng/ImageServer"
      );

      viewer.imageryLayers.addImageryProvider(esriImageryProvider);
    };

    initCesium();
  }, []);

  return <div id="cesiumContainer" style={{ width: "100%", height: "100vh" }} />;
};

I’m experiencing difficulties with the ArcGISTiledElevationTerrainProvider in Cesium. The map either shows errors related to spatial information or renders incorrectly. Can you help me achieve the same functionality in Cesium as I have in the ArcGIS SDK?

Thanks!