diff --git a/examples/cesium-3d/3d-model.js b/examples/cesium-3d/3d-model.js index 9698ebd..3acfdc4 100644 --- a/examples/cesium-3d/3d-model.js +++ b/examples/cesium-3d/3d-model.js @@ -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, @@ -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', @@ -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), diff --git a/examples/cesium-terrain/cesium.js b/examples/cesium-terrain/cesium.js index 1424df5..1cb9ed7 100644 --- a/examples/cesium-terrain/cesium.js +++ b/examples/cesium-terrain/cesium.js @@ -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({ @@ -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({ @@ -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() - }) - ); - } - ); }); diff --git a/examples/cesium-viewshed/viewshed.js b/examples/cesium-viewshed/viewshed.js index 874cfeb..5ae716c 100644 --- a/examples/cesium-viewshed/viewshed.js +++ b/examples/cesium-viewshed/viewshed.js @@ -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, @@ -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({ @@ -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, diff --git a/examples/config/3d-config.js b/examples/config/3d-config.js index a37e778..c448ac5 100644 --- a/examples/config/3d-config.js +++ b/examples/config/3d-config.js @@ -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`; diff --git a/examples/config/dem-config.js b/examples/config/dem-config.js index a8159de..d319540 100644 --- a/examples/config/dem-config.js +++ b/examples/config/dem-config.js @@ -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}`; diff --git a/examples/index.json b/examples/index.json index 40b1734..07b5c0b 100644 --- a/examples/index.json +++ b/examples/index.json @@ -272,7 +272,7 @@ ] }, "3D Model": { - "displayName": "3D Model (South Lebanon)", + "displayName": "3D Model", "description": "Composes the full MapColonies 3D stack: WMTS imagery, DEM terrain and a photo-realistic 3D Tiles mesh, all aligned in one scene.\n\nReference for end-to-end 3D scene assembly — shows the loading order and provider config that makes imagery, terrain and meshes line up correctly.", "files": [ "cesium-3d/3d-model.js",