Skip to content

fix(examples): use correct syntax for loading 3dtiles in cesium #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shimoncohen merged 3 commits into from
Jun 25, 2026
Merged

fix(examples): use correct syntax for loading 3dtiles in cesium #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ee2952d
fix(examples): use correct syntax for loading 3dtiles in cesium
shimoncohen Jun 24, 2026
49ab1be
fix(examples): wrong parameters used for getting terrain from catalog
shimoncohen Jun 24, 2026
6e8d513
Merge branch 'main' into fix-3d-examples
shimoncohen Jun 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 29 additions & 32 deletions examples/cesium-3d/3d-model.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import {
LAYER_IMAGE_FORMAT
} from './config/raster-config.js';
import {
PRODUCT_ID as DEM_PRODUCT_ID,
PRODUCT_TYPE as DEM_PRODUCT_TYPE,
DEM_SCHEME
TERRAIN_PRODUCT_ID as DEM_TERRAIN_PRODUCT_ID,
TERRAIN_PRODUCT_TYPE as DEM_TERRAIN_PRODUCT_TYPE,
DEM_TERRAIN_SCHEME
} from './config/dem-config.js';
import {
PRODUCT_ID as MODEL_3D_PRODUCT_ID,
Expand All @@ -19,17 +19,35 @@ import { fetchWmtsTileTemplate } from './utils/wmts-utils.js';

Promise.all([
fetchWmtsTileTemplate(RASTER_PRODUCT_ID, RASTER_PRODUCT_TYPE, LAYER_IMAGE_FORMAT),
fetchServiceLink('dem', DEM_PRODUCT_ID, DEM_PRODUCT_TYPE, DEM_SCHEME),
fetchServiceLink('3d', DEM_TERRAIN_PRODUCT_ID, DEM_TERRAIN_PRODUCT_TYPE, DEM_TERRAIN_SCHEME),
fetchServiceLink('3d', MODEL_3D_PRODUCT_ID, MODEL_3D_PRODUCT_TYPE, MODEL_3D_SCHEME)
]).then(([raster, dem, model]) => {
]).then(async ([raster, dem, model]) => {
const demResource = new Cesium.Resource({
url: dem.url,
queryParameters: { token: TOKEN }
});
const modelResource = new Cesium.Resource({
url: model.url,
queryParameters: { token: TOKEN }
});

const [terrainProvider, tileset] = await Promise.all([
Cesium.CesiumTerrainProvider.fromUrl(demResource),
Cesium.Cesium3DTileset.fromUrl(modelResource, {
maximumScreenSpaceError: 5,
cullRequestsWhileMovingMultiplier: 120,
preloadFlightDestination: true,
preferLeaves: true,
skipLevelOfDetail: true
})
]);

const viewer = new Cesium.Viewer('cesiumContainer', {
baseLayer: new Cesium.ImageryLayer(
new Cesium.WebMapTileServiceImageryProvider({
url: new Cesium.Resource({
url: raster.template,
queryParameters: {
token: TOKEN
}
queryParameters: { token: TOKEN }
}),
layer: raster.name,
style: 'default',
Expand All @@ -38,34 +56,13 @@ Promise.all([
tilingScheme: new Cesium.GeographicTilingScheme()
})
),
terrainProvider: new Cesium.CesiumTerrainProvider({
url: new Cesium.Resource({
url: dem.url,
queryParameters: {
token: TOKEN
}
})
})
terrainProvider
});

viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: new Cesium.Resource({
url: model.url,
queryParameters: {
token: TOKEN
}
}),
maximumScreenSpaceError: 5,
cullRequestsWhileMovingMultiplier: 120,
preloadFlightDestination: true,
preferLeaves: true,
skipLevelOfDetail: true
})
);
viewer.scene.primitives.add(tileset);

viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(35.201436, 33.265378, 300),
destination: Cesium.Cartesian3.fromDegrees(34.28735, 31.33365, 300),
orientation: {
heading: Cesium.Math.toRadians(25.0),
pitch: Cesium.Math.toRadians(-10.0),
Expand Down
48 changes: 14 additions & 34 deletions examples/cesium-terrain/cesium.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,24 @@ import {
LAYER_IMAGE_FORMAT
} from './config/raster-config.js';
import {
PRODUCT_ID as DEM_PRODUCT_ID,
PRODUCT_TYPE as DEM_PRODUCT_TYPE,
DEM_SCHEME
TERRAIN_PRODUCT_ID as DEM_TERRAIN_PRODUCT_ID,
TERRAIN_PRODUCT_TYPE as DEM_TERRAIN_PRODUCT_TYPE,
DEM_TERRAIN_SCHEME
} from './config/dem-config.js';
import { fetchServiceLink } from './utils/catalog-client.js';
import { fetchWmtsTileTemplate } from './utils/wmts-utils.js';

Promise.all([
fetchWmtsTileTemplate(RASTER_PRODUCT_ID, RASTER_PRODUCT_TYPE, LAYER_IMAGE_FORMAT),
fetchServiceLink('dem', DEM_PRODUCT_ID, DEM_PRODUCT_TYPE, DEM_SCHEME)
]).then(([raster, dem]) => {
fetchServiceLink('3d', DEM_TERRAIN_PRODUCT_ID, DEM_TERRAIN_PRODUCT_TYPE, DEM_TERRAIN_SCHEME)
]).then(async ([raster, dem]) => {
const terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(
new Cesium.Resource({
url: dem.url,
queryParameters: { token: TOKEN }
})
);

const viewer = new Cesium.Viewer('cesiumContainer', {
baseLayer: new Cesium.ImageryLayer(
new Cesium.WebMapTileServiceImageryProvider({
Expand All @@ -28,18 +35,11 @@ Promise.all([
layer: raster.name,
style: 'default',
format: LAYER_IMAGE_FORMAT,
tileMatrixSetID: 'newGrids',
tileMatrixSetID: 'WorldCRS84',
tilingScheme: new Cesium.GeographicTilingScheme()
})
),
terrainProvider: new Cesium.CesiumTerrainProvider({
url: new Cesium.Resource({
url: dem.url,
queryParameters: {
token: TOKEN
}
})
})
terrainProvider
});

viewer.camera.flyTo({
Expand All @@ -50,24 +50,4 @@ Promise.all([
roll: 0.0
}
});

fetchWmtsTileTemplate('WORLD_MAP_BASE_THIN', 'RasterVectorBest', 'image/png').then(
({ template, name }) => {
viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider({
url: new Cesium.Resource({
url: template,
queryParameters: {
token: TOKEN
}
}),
layer: name,
style: 'default',
format: 'image/png',
tileMatrixSetID: 'newGrids',
tilingScheme: new Cesium.GeographicTilingScheme()
})
);
}
);
});
55 changes: 27 additions & 28 deletions examples/cesium-viewshed/viewshed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import {
LAYER_IMAGE_FORMAT
} from './config/raster-config.js';
import {
PRODUCT_ID as DEM_PRODUCT_ID,
PRODUCT_TYPE as DEM_PRODUCT_TYPE,
DEM_SCHEME
TERRAIN_PRODUCT_ID as DEM_TERRAIN_PRODUCT_ID,
TERRAIN_PRODUCT_TYPE as DEM_TERRAIN_PRODUCT_TYPE,
DEM_TERRAIN_SCHEME
} from './config/dem-config.js';
import {
PRODUCT_ID as MODEL_3D_PRODUCT_ID,
Expand Down Expand Up @@ -572,9 +572,29 @@ let pointB = Cesium.Cartesian3.fromDegrees(35.200014, 33.268811, 40); // Empire
let viewer;
Promise.all([
fetchWmtsTileTemplate(RASTER_PRODUCT_ID, RASTER_PRODUCT_TYPE, LAYER_IMAGE_FORMAT),
fetchServiceLink('dem', DEM_PRODUCT_ID, DEM_PRODUCT_TYPE, DEM_SCHEME),
fetchServiceLink('3d', DEM_TERRAIN_PRODUCT_ID, DEM_TERRAIN_PRODUCT_TYPE, DEM_TERRAIN_SCHEME),
fetchServiceLink('3d', MODEL_3D_PRODUCT_ID, MODEL_3D_PRODUCT_TYPE, MODEL_3D_SCHEME)
]).then(([raster, dem, model]) => {
]).then(async ([raster, dem, model]) => {
const demResource = new Cesium.Resource({
url: dem.url,
queryParameters: { token: TOKEN }
});
const modelResource = new Cesium.Resource({
url: model.url,
queryParameters: { token: TOKEN }
});

const [terrainProvider, tileset] = await Promise.all([
Cesium.CesiumTerrainProvider.fromUrl(demResource),
Cesium.Cesium3DTileset.fromUrl(modelResource, {
maximumScreenSpaceError: 5,
cullRequestsWhileMovingMultiplier: 120,
preloadFlightDestination: true,
preferLeaves: true,
skipLevelOfDetail: true
})
]);

viewer = new Cesium.Viewer('cesiumContainer', {
baseLayer: new Cesium.ImageryLayer(
new Cesium.WebMapTileServiceImageryProvider({
Expand All @@ -591,31 +611,10 @@ Promise.all([
tilingScheme: new Cesium.GeographicTilingScheme()
})
),
terrainProvider: new Cesium.CesiumTerrainProvider({
url: new Cesium.Resource({
url: dem.url,
queryParameters: {
token: TOKEN
}
})
})
terrainProvider
});

viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: new Cesium.Resource({
url: model.url,
queryParameters: {
token: TOKEN
}
}),
maximumScreenSpaceError: 5,
cullRequestsWhileMovingMultiplier: 120,
preloadFlightDestination: true,
preferLeaves: true,
skipLevelOfDetail: true
})
);
viewer.scene.primitives.add(tileset);

viewer.camera.flyTo({
destination: pointA,
Expand Down
2 changes: 1 addition & 1 deletion examples/config/3d-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { MAPCOLONIES_TILES_URL } from './config/common-config.js';

export var MODEL_3D_SCHEME = '3DTiles';
export var PRODUCT_ID = 'd03ee59f-1676-4059-84cb-a0f68f15aefe';
export var PRODUCT_ID = 'd124d1b5-dd6c-49ae-8b5c-0c18fd8aacfd';
export var PRODUCT_TYPE = '3DPhotoRealistic';
export var MODEL_3D_URL = `${MAPCOLONIES_TILES_URL}/api/3d/v1/b3dm/${PRODUCT_ID}/tileset.json`;
3 changes: 3 additions & 0 deletions examples/config/dem-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,7 @@ import { MAPCOLONIES_TILES_URL } from './config/common-config.js';
export var DEM_SCHEME = 'WCS';
export var PRODUCT_ID = 'srtm_100_30-aoi';
export var PRODUCT_TYPE = 'DTM';
export var DEM_TERRAIN_SCHEME = 'TERRAIN_QMESH';
export var TERRAIN_PRODUCT_ID = '33333333-3333-3333-3333-333333333333';
export var TERRAIN_PRODUCT_TYPE = 'QuantizedMeshDTMBest';
export var DEM_URL = `${MAPCOLONIES_TILES_URL}/api/dem/v1/terrains/${PRODUCT_ID}`;
Loading