-
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.
PB-995: group all background and visible layer into one component each
like with OL, keeping all the logic for each group isolated from the main component
- Loading branch information
Showing
7 changed files
with
228 additions
and
182 deletions.
There are no files selected for viewing
26 changes: 26 additions & 0 deletions
26
src/modules/map/components/cesium/CesiumBackgroundLayer.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,26 @@ | ||
| <script setup> | ||
| import { computed } from 'vue' | ||
| import { useStore } from 'vuex' | ||
| import CesiumInternalLayer from '@/modules/map/components/cesium/CesiumInternalLayer.vue' | ||
| const store = useStore() | ||
| const backgroundLayersFor3D = computed(() => store.getters.backgroundLayersFor3D) | ||
| const projection = computed(() => store.state.position.projection) | ||
| </script> | ||
|
|
||
| <template> | ||
| <!-- | ||
| z-index can be set to zero for all, as only the WMTS | ||
| background layer is an imagery layer (and requires one), all other BG layer are | ||
| primitive layer and will ignore this prop | ||
| --> | ||
| <CesiumInternalLayer | ||
| v-for="(bgLayer, index) in backgroundLayersFor3D" | ||
| :key="bgLayer.id" | ||
| :layer-config="bgLayer" | ||
| :projection="projection" | ||
| :z-index="index" | ||
| /> | ||
| </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
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,74 @@ | ||
| <script setup> | ||
| import { computed } from 'vue' | ||
| import { useStore } from 'vuex' | ||
| import ExternalLayer from '@/api/layers/ExternalLayer.class' | ||
| import GeoAdminAggregateLayer from '@/api/layers/GeoAdminAggregateLayer.class' | ||
| import GeoAdminGeoJsonLayer from '@/api/layers/GeoAdminGeoJsonLayer.class' | ||
| import GeoAdminWMSLayer from '@/api/layers/GeoAdminWMSLayer.class' | ||
| import GeoAdminWMTSLayer from '@/api/layers/GeoAdminWMTSLayer.class' | ||
| import GPXLayer from '@/api/layers/GPXLayer.class' | ||
| import KMLLayer from '@/api/layers/KMLLayer.class' | ||
| import CesiumInternalLayer from '@/modules/map/components/cesium/CesiumInternalLayer.vue' | ||
| const store = useStore() | ||
| const visibleLayers = computed(() => store.getters.visibleLayers) | ||
| const layersConfig = computed(() => store.state.layers.config) | ||
| const projection = computed(() => store.state.position.projection) | ||
| const backgroundLayersFor3D = computed(() => store.getters.backgroundLayersFor3D) | ||
| const visibleImageryLayers = computed(() => | ||
| visibleLayers.value.filter(isImageryLayer).map((imageryLayer) => { | ||
| if (imageryLayer.idIn3d) { | ||
| return ( | ||
| layersConfig.value.find((layer) => layer.id === imageryLayer.idIn3d) ?? imageryLayer | ||
| ) | ||
| } | ||
| return imageryLayer | ||
| }) | ||
| ) | ||
| const visiblePrimitiveLayers = computed(() => visibleLayers.value.filter(isPrimitiveLayer)) | ||
| const startingZIndexForImageryLayers = computed( | ||
| () => backgroundLayersFor3D.value.filter(isImageryLayer).length | ||
| ) | ||
| function isImageryLayer(layer) { | ||
| return ( | ||
| layer instanceof GeoAdminWMTSLayer || | ||
| layer instanceof GeoAdminWMSLayer || | ||
| layer instanceof GeoAdminAggregateLayer || | ||
| layer instanceof ExternalLayer | ||
| ) | ||
| } | ||
| function isPrimitiveLayer(layer) { | ||
| return ( | ||
| layer instanceof GeoAdminGeoJsonLayer || | ||
| layer instanceof KMLLayer || | ||
| layer instanceof GPXLayer | ||
| ) | ||
| } | ||
| </script> | ||
| <template> | ||
| <!-- | ||
| Layers split between imagery and primitive type for correct zIndex ordering. | ||
| Only imagery layers require a z-index, we start to count them at 1 or 0 depending on the | ||
| background WMTS layer | ||
| --> | ||
| <CesiumInternalLayer | ||
| v-for="(layer, index) in visibleImageryLayers" | ||
| :key="layer.id" | ||
| :layer-config="layer" | ||
| :projection="projection" | ||
| :z-index="index + startingZIndexForImageryLayers" | ||
| /> | ||
| <CesiumInternalLayer | ||
| v-for="layer in visiblePrimitiveLayers" | ||
| :key="layer.id" | ||
| :layer-config="layer" | ||
| :projection="projection" | ||
| /> | ||
| </template> |
83 changes: 83 additions & 0 deletions
83
src/modules/map/components/cesium/utils/enhanceLabelStyle.js
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,83 @@ | ||
| import { Cesium3DTileStyle } from 'cesium' | ||
|
|
||
| /** | ||
| * Style to apply to our labels in 3D. It is a complete rip-off of | ||
| * https://github.com/geoadmin/mf-geoadmin3/blob/6a7b99a2cc9980eec27b394ee709305a239549f1/src/components/StylesService.js#L159-L233 | ||
| * | ||
| * @type {Cesium3DTileStyle} | ||
| */ | ||
| export default new Cesium3DTileStyle({ | ||
| show: true, | ||
| labelStyle: 2, | ||
| labelText: '${DISPLAY_TEXT}', | ||
| disableDepthTestDistance: Number.POSITIVE_INFINITY, | ||
| anchorLineEnabled: true, | ||
| anchorLineColor: "color('white')", | ||
| heightOffset: { | ||
| conditions: [ | ||
| ['${LOD} === "7"', 20], | ||
| ['${LOD} === "6"', 40], | ||
| ['${LOD} === "5"', 60], | ||
| ['${LOD} === "4"', 80], | ||
| ['${LOD} === "3"', 100], | ||
| ['${LOD} === "2"', 120], | ||
| ['${LOD} === "1"', 150], | ||
| ['${LOD} === "0"', 200], | ||
| ['true', '200'], | ||
| ], | ||
| }, | ||
| labelColor: { | ||
| conditions: [ | ||
| ['${OBJEKTART} === "See"', 'color("blue")'], | ||
| ['true', 'color("black")'], | ||
| ], | ||
| }, | ||
| labelOutlineColor: 'color("white", 1)', | ||
| labelOutlineWidth: 5, | ||
| font: { | ||
| conditions: [ | ||
| ['${OBJEKTART} === "See"', '"bold 32px arial"'], | ||
| ['${OBJEKTART} === "Alpiner Gipfel"', '"italic 32px arial"'], | ||
| ['true', '" 32px arial"'], | ||
| ], | ||
| }, | ||
| scaleByDistance: { | ||
| conditions: [ | ||
| ['${LOD} === "7"', 'vec4(1000, 1, 5000, 0.4)'], | ||
| ['${LOD} === "6"', 'vec4(1000, 1, 5000, 0.4)'], | ||
| ['${LOD} === "5"', 'vec4(1000, 1, 8000, 0.4)'], | ||
| ['${LOD} === "4"', 'vec4(1000, 1, 10000, 0.4)'], | ||
| ['${LOD} === "3"', 'vec4(1000, 1, 20000, 0.4)'], | ||
| ['${LOD} === "2"', 'vec4(1000, 1, 30000, 0.4)'], | ||
| ['${LOD} === "1"', 'vec4(1000, 1, 50000, 0.4)'], | ||
| ['${LOD} === "0"', 'vec4(1000, 1, 500000, 0.4)'], | ||
| ['true', 'vec4(1000, 1, 10000, 0.4)'], | ||
| ], | ||
| }, | ||
| translucencyByDistance: { | ||
| conditions: [ | ||
| ['${LOD} === "7"', 'vec4(5000, 1, 5001, 1)'], | ||
| ['${LOD} === "6"', 'vec4(5000, 1, 5001, 1)'], | ||
| ['${LOD} === "5"', 'vec4(5000, 1, 8000, 0.4)'], | ||
| ['${LOD} === "4"', 'vec4(5000, 1, 10000, 0.4)'], | ||
| ['${LOD} === "3"', 'vec4(5000, 1, 20000, 0.4)'], | ||
| ['${LOD} === "2"', 'vec4(5000, 1, 30000, 0.4)'], | ||
| ['${LOD} === "1"', 'vec4(5000, 1, 50000, 0.4)'], | ||
| ['${LOD} === "0"', 'vec4(5000, 1, 500000, 1)'], | ||
| ['true', 'vec4(5000, 1, 10000, 0.5)'], | ||
| ], | ||
| }, | ||
| distanceDisplayCondition: { | ||
| conditions: [ | ||
| ['${LOD} === "7"', 'vec2(0, 5000)'], | ||
| ['${LOD} === "6"', 'vec2(0, 5000)'], | ||
| ['${LOD} === "5"', 'vec2(0, 8000)'], | ||
| ['${LOD} === "4"', 'vec2(0, 10000)'], | ||
| ['${LOD} === "3"', 'vec2(0, 20000)'], | ||
| ['${LOD} === "2"', 'vec2(0, 30000)'], | ||
| ['${LOD} === "1"', 'vec2(0, 50000)'], | ||
| ['${LOD} === "0"', 'vec2(0, 500000)'], | ||
| ['${OBJEKTART} === "Alpiner Gipfel"', 'vec2(0, 100000)'], | ||
| ], | ||
| }, | ||
| }) |
Oops, something went wrong.