-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(globe): support single image layers (#486)
* feat(globe): add support for single image layers * chore(storage): remove tags from debug story * fix(globe): fix eslint warning * fix(use-globe-layer): use requestAnimationFrame only for single image layers
- Loading branch information
Showing
13 changed files
with
243 additions
and
151 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import {useEffect} from 'react'; | ||
| import { | ||
| GeographicTilingScheme, | ||
| UrlTemplateImageryProvider, | ||
| TextureMinificationFilter, | ||
| TextureMagnificationFilter, | ||
| SingleTileImageryProvider | ||
| } from 'cesium'; | ||
|
|
||
| import {GlobeImageLayerData} from '../types/globe-image-layer-data'; | ||
| import {GlobeLayerType} from '../types/globe-layer-type'; | ||
|
|
||
| // update layer image when url changes | ||
| export function useGlobeLayer( | ||
| viewer: Cesium.Viewer | null, | ||
| imageLayer: GlobeImageLayerData | null | ||
| ) { | ||
| useEffect(() => { | ||
| if (!viewer) { | ||
| return; | ||
| } | ||
|
|
||
| const layers = viewer.scene.imageryLayers; | ||
|
|
||
| if (imageLayer) { | ||
| const imageryProvider = getImageProvider(imageLayer); | ||
|
|
||
| imageryProvider.readyPromise.then(() => { | ||
| const newLayer = viewer.scene.imageryLayers.addImageryProvider( | ||
| imageryProvider | ||
| ); | ||
|
|
||
| // @ts-ignore | ||
| newLayer.minificationFilter = TextureMinificationFilter.NEAREST; | ||
| // @ts-ignore | ||
| newLayer.magnificationFilter = TextureMagnificationFilter.NEAREST; | ||
| newLayer.alpha = 1; | ||
|
|
||
| // remove and destroy old layers if they exist | ||
| // we do not clean it up in the useEffect clean function because we want | ||
| // to wait until the new layer is ready to prevent flickering | ||
| const layersToRemove: Cesium.ImageryLayer[] = []; | ||
|
|
||
| for (let i = 0; i < layers.length; i++) { | ||
| const layer = layers.get(i); | ||
| if (i !== 0 && layer !== newLayer) { | ||
| layersToRemove.push(layer); | ||
| } | ||
| } | ||
|
|
||
| const cleanAndCache = () => { | ||
| // eslint-disable-next-line max-nested-callbacks | ||
| layersToRemove.forEach(layer => layers.remove(layer, true)); | ||
|
|
||
| // preload next images | ||
| if (imageLayer.type === GlobeLayerType.Image) { | ||
| preloadNext(imageLayer.nextUrls); | ||
| } | ||
| }; | ||
|
|
||
| if (imageLayer.type === GlobeLayerType.Tiles) { | ||
| setTimeout(cleanAndCache, 500); | ||
| } else { | ||
| requestAnimationFrame(cleanAndCache); | ||
| } | ||
| }); | ||
| } else if (layers.length > 1) { | ||
| // remove old layers when no image should be shown anymore (except base map) | ||
| removeAllLayers(layers); | ||
| } | ||
| }, [viewer, imageLayer]); | ||
| } | ||
|
|
||
| function getImageProvider(imageLayer: GlobeImageLayerData) { | ||
| return imageLayer.type === GlobeLayerType.Tiles | ||
| ? new UrlTemplateImageryProvider({ | ||
| url: imageLayer.url, | ||
| tilingScheme: new GeographicTilingScheme(), | ||
| minimumLevel: 0, | ||
| maximumLevel: imageLayer.zoomLevels - 1, | ||
| tileWidth: 256, | ||
| tileHeight: 256 | ||
| }) | ||
| : new SingleTileImageryProvider({url: imageLayer.url}); | ||
| } | ||
|
|
||
| function removeAllLayers(layers: Cesium.ImageryLayerCollection) { | ||
| for (let i = 1; i < layers.length; i++) { | ||
| const layer = layers.get(i); | ||
| layers.remove(layer, true); | ||
| } | ||
| } | ||
|
|
||
| function preloadNext(urls: string[]) { | ||
| urls.forEach(url => { | ||
| const image = new Image(); | ||
| image.src = url; | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,27 @@ | ||
| import {GlobeLayerType} from '../../types/globe-layer-type'; | ||
|
|
||
| // Returns the url template for offline usage | ||
| export function getOfflineTilesUrl(): string { | ||
| export function getOfflineTilesUrl(type: GlobeLayerType): string { | ||
| if (!window.cfs) { | ||
| console.error('Calling electron function from a non-electron environment'); | ||
| return ''; | ||
| } | ||
|
|
||
| return window.cfs.getDownloadsPath( | ||
| 'downloads', | ||
| '{id}', | ||
| 'tiles', | ||
| '{timeIndex}', | ||
| '{z}', | ||
| '{x}', | ||
| '{reverseY}.png' | ||
| ); | ||
| return type === GlobeLayerType.Tiles | ||
| ? window.cfs.getDownloadsPath( | ||
| 'downloads', | ||
| '{id}', | ||
| 'tiles', | ||
| '{timeIndex}', | ||
| '{z}', | ||
| '{x}', | ||
| '{reverseY}.png' | ||
| ) | ||
| : window.cfs.getDownloadsPath( | ||
| 'downloads', | ||
| '{id}', | ||
| 'tiles', | ||
| '{timeIndex}', | ||
| 'full.png' | ||
| ); | ||
| } |
Oops, something went wrong.