-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1066 from geoadmin/feat-PB-1000-geotiff-support
PB-1000 : add support for local GeoTIFF import
- Loading branch information
Showing
19 changed files
with
243 additions
and
51 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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,58 @@ | ||
| import AbstractLayer, { LayerAttribution } from '@/api/layers/AbstractLayer.class' | ||
| import { InvalidLayerDataError } from '@/api/layers/InvalidLayerData.error' | ||
| import LayerTypes from '@/api/layers/LayerTypes.enum' | ||
|
|
||
| /** | ||
| * Metadata for an external Cloud-Optimized GeoTIFF layer | ||
| * | ||
| * @WARNING DON'T USE GETTER AND SETTER ! Instances of this class will be used a Vue 3 reactive | ||
| * object which SHOULD BE plain javascript object ! For convenience we use class instances but this | ||
| * has some limitations and javascript class getter and setter are not correctly supported which | ||
| * introduced subtle bugs. As rule of thumb we should avoid any public methods with side effects on | ||
| * properties, properties should change be changed either by the constructor or directly by setting | ||
| * them, not through a functions that updates other properties as it can lead to subtle bugs due | ||
| * to Vue reactivity engine. | ||
| */ | ||
| export default class GeoTIFFLayer extends AbstractLayer { | ||
| /** | ||
| * @param {String} geoTIFFConfig.fileSource The URL to access the GeoTIFF data. | ||
| * @param {Boolean} [geoTIFFConfig.visible=true] If the layer is visible on the map (or hidden). | ||
| * When `null` is given, then it uses the default value. Default is `true` | ||
| * @param {Number} [geoTIFFConfig.opacity=1.0] The opacity of this layer, between 0.0 | ||
| * (transparent) and 1.0 (opaque). When `null` is given, then it uses the default value. | ||
| * Default is `1.0` | ||
| * @param {String | null} [geoTIFFConfig.data=null] Data/content of the GeoTIFF file, as a | ||
| * string. Default is `null` | ||
| * @throws InvalidLayerDataError if no `geoTIFFConfig` is given or if it is invalid | ||
| */ | ||
| constructor(geoTIFFConfig) { | ||
| if (!geoTIFFConfig) { | ||
| throw new InvalidLayerDataError('Missing GeoTIFF layer data', geoTIFFConfig) | ||
| } | ||
| const { fileSource = null, visible = true, opacity = 1.0, data = null } = geoTIFFConfig | ||
| if (fileSource === null) { | ||
| throw new InvalidLayerDataError('Missing GeoTIFF file source', geoTIFFConfig) | ||
| } | ||
| const isLocalFile = !fileSource.startsWith('http') | ||
| const attributionName = isLocalFile ? fileSource : new URL(fileSource).hostname | ||
| const fileName = isLocalFile | ||
| ? fileSource | ||
| : fileSource.substring(fileSource.lastIndexOf('/') + 1) | ||
| super({ | ||
| name: fileName, | ||
| id: fileSource, | ||
| type: LayerTypes.GEOTIFF, | ||
| baseUrl: fileSource, | ||
| opacity: opacity ?? 1.0, | ||
| visible: visible ?? true, | ||
| attributions: [new LayerAttribution(attributionName)], | ||
| isExternal: true, | ||
| hasDescription: false, | ||
| hasLegend: false, | ||
| }) | ||
| this.isLocalFile = isLocalFile | ||
| this.fileSource = fileSource | ||
| this.isLoading = false | ||
| this.data = data | ||
| } | ||
| } |
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
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
53 changes: 53 additions & 0 deletions
53
src/modules/map/components/openlayers/OpenLayersGeoTIFF.vue
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,53 @@ | ||
| <script setup> | ||
| import WebGLTileLayer from 'ol/layer/WebGLTile' | ||
| import GeoTIFFSource from 'ol/source/GeoTIFF' | ||
| import { computed, inject, toRefs, watch } from 'vue' | ||
| import GeoTIFFLayer from '@/api/layers/GeoTIFFLayer.class' | ||
| import useAddLayerToMap from '@/modules/map/components/openlayers/utils/useAddLayerToMap.composable' | ||
| const props = defineProps({ | ||
| geotiffConfig: { | ||
| type: GeoTIFFLayer, | ||
| required: true, | ||
| }, | ||
| parentLayerOpacity: { | ||
| type: Number, | ||
| default: null, | ||
| }, | ||
| zIndex: { | ||
| type: Number, | ||
| default: -1, | ||
| }, | ||
| }) | ||
| const { geotiffConfig, parentLayerOpacity, zIndex } = toRefs(props) | ||
| const olMap = inject('olMap') | ||
| const source = computed(() => { | ||
| if (geotiffConfig.value.isLocalFile) { | ||
| return { blob: geotiffConfig.value.data } | ||
| } | ||
| return { url: geotiffConfig.value.fileSource } | ||
| }) | ||
| const opacity = computed(() => parentLayerOpacity.value ?? geotiffConfig.value.opacity) | ||
| const layer = new WebGLTileLayer({ | ||
| source: createLayerSource(), | ||
| opacity: opacity.value, | ||
| }) | ||
| useAddLayerToMap(layer, olMap, zIndex) | ||
| watch(opacity, (newOpacity) => layer.setOpacity(newOpacity)) | ||
| watch(source, () => layer.setSource(createLayerSource())) | ||
| function createLayerSource() { | ||
| return new GeoTIFFSource({ | ||
| convertToRGB: 'auto', | ||
| sources: [source.value], | ||
| }) | ||
| } | ||
| </script> | ||
| <template> | ||
| <slot /> | ||
| </template> |
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
Oops, something went wrong.