Without changes or updates, cesium no longer loads the globe (sky still loads). The application is using Svelte, Vite and TypeScript, please find a snippet from package.json below
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-check --tsconfig ./tsconfig.json"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^1.0.9",
"@tsconfig/svelte": "^3.0.0",
"svelte": "^3.52.0",
"svelte-check": "^2.9.2",
"svelte-preprocess": "^4.10.7",
"tslib": "^2.4.0",
"typescript": "^4.8.4",
"vite": "^3.1.8"
},
"dependencies": {
"cesium": "^1.102.0"
}
Errors Recieved:
“ReferenceError: define is not defined”
- createVerticesFromHeightmap.js:1:1
- decodeDraco.js:1:1
Solutions tried
- Update all dependencies to their latest versions, including cesium.js (1.111.0) ContextOptions TypeScript fix by romejoe · Pull Request #11213 · CesiumGS/cesium · GitHub
- Downgrade cesium.js
- Using different imagery providers
- Using the in built local baselayer
// Offline basemap - https://github.com/CesiumGS/cesium/tree/main/Documentation/OfflineGuide - https://sandcastle.cesium.com/index.html?src=Offline.html&label=Beginner
const offlineBase = Cesium.ImageryLayer.fromProviderAsync(
Cesium.TileMapServiceImageryProvider.fromUrl(
Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
),
{} // https://cesium.com/learn/cesiumjs/ref-doc/ImageryProvider.html
);
- Loading a tileset
// Add Photorealistic 3D Tiles - https://sandcastle.cesium.com/?src=Google%20Photorealistic%203D%20Tiles.html
try {
const tileset = await Cesium.createGooglePhotorealistic3DTileset();
viewer.scene.primitives.add(tileset);
} catch (error) {
console.log(`Error loading Photorealistic 3D Tiles tileset.
${error}`);
}
});
- Creating a provider view model
// Create an empty array - http://www.phpmind.com/blog/2015/09/cesiumjs-how-to-set-default-imagelayer/
var providerViewModel = [];
providerViewModel.push(
// Push details about an image provider
new Cesium.ProviderViewModel({
name: "Open Street Map",
iconUrl: Cesium.buildModuleUrl(
"Widgets/Images/ImageryProviders/openStreetMap.png"
),
tooltip:
"OpenStreetMap (OSM) is a collaborative project to create a free editable map \
of the world.\nhttp://www.openstreetmap.org",
category: "Cesium ion",
creationFunction: function () {
return Cesium.createWorldImageryAsync({
style: Cesium.IonWorldImageryStyle.AERIAL,
});
},
})
);
viewer = new Viewer("cesiumContainer", {
// IMAGE PROVIDER
imageryProviderViewModels: providerViewModel, // Declare where to look for image providers
selectedImageryProviderViewModel: providerViewModel[0], // Selected this one
// UI
animation: false, //Show animation controls
baseLayerPicker: false, //Show base layer picker
fullscreenButton: false,
vrButton: false,
geocoder: false, //Show location search
homeButton: false,
infoBox: false,
sceneModePicker: false, //Show scene mode picker
selectionIndicator: false,
timeline: false, //Show Timeline
navigationHelpButton: false,
// EFFECTS?
shouldAnimate: true, // Animation on by default
scene3DOnly: true,
requestRenderMode: true, // Only render on request from entity, reduces CPU usage
maximumRenderTimeChange: Infinity, //Time in with a new frame is requested, depending on simulation time changes. (Set to a high value, such as Infinity, if no elements in your scene change with simulation time)
});
- Declaring the cesium types in tsconfig.app.json
{
"extends": "@tsconfig/svelte/tsconfig.json",
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Svelte",
"_version": "3.0.0",
"compilerOptions": {
/**
https://community.cesium.com/t/cesium-type-definitions-for-typescript/24738/4
**/
"types": [
"cesium"
],
"moduleResolution": "node",
"target": "es2017",
"useDefineForClassFields": true,
"resolveJsonModule": true,
"baseUrl": ".",
"verbatimModuleSyntax": true,
/**
To have warnings/errors of the Svelte compiler at the correct position,
enable source maps by default.
*/
"sourceMap": true,
"strict": false,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
/**
* Typecheck JS in `.svelte` and `.js` files by default.
* Disable checkJs if you'd like to use dynamic types in JS.
* Note that setting allowJs false does not prevent the use
* of JS in `.svelte` files.
*/
"allowJs": true,
"checkJs": true
},
"include": [
"src/**/*.d.ts",
"src/**/*.ts",
"src/**/*.js",
"src/**/*.svelte"
]
}
Any help would be greatly appreciated, thanks