Skip to content

Commit 397319f

Browse files
pakbpakb
committed
WIP
1 parent 733c03e commit 397319f

File tree

5 files changed

+54
-49
lines changed

5 files changed

+54
-49
lines changed

‎packages/mapviewer/src/modules/map/components/maplibre/MaplibreInternalLayer.vue

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -30,48 +30,46 @@ function shouldAggregateSubLayerBeVisible(subLayer) {
3030
</script>
3131

3232
<template>
33-
<div>
34-
<MaplibreWMTSLayer
35-
v-if="layerConfig.type === LayerTypes.WMTS"
36-
:wmts-layer-config="layerConfig"
37-
/>
38-
<MaplibreWMSLayer
39-
v-if="layerConfig.type === LayerTypes.WMS"
40-
:wms-layer-config="layerConfig"
41-
/>
42-
<MaplibreGeoJSONLayer
43-
v-if="layerConfig.type === LayerTypes.GEOJSON"
44-
:layer-id="layerConfig.id"
45-
:data-url="layerConfig.geoJsonUrl"
46-
:style-url="layerConfig.styleUrl"
47-
:z-index="zIndex"
48-
/><!--
49-
Aggregate layers are some kind of a edge case where two or more layers are joint together but only one of them
50-
is visible depending on the map resolution.
51-
We have to manage aggregate layers straight here otherwise we won't be able to make a recursive call to this
52-
component in another child (that would be OpenLayersAggregateLayer.vue component, that doesn't work).
53-
See https://vuejs.org/v2/guide/components-edge-cases.html#Recursive-Components for more info
54-
-->
55-
<div v-if="layerConfig.type === LayerTypes.AGGREGATE">
56-
<!-- we can't v-for and v-if at the same time, so we need to wrap all sub-layers in a <div> -->
57-
<div
58-
v-for="aggregateSubLayer in layerConfig.subLayers"
59-
:key="aggregateSubLayer.subLayerId"
60-
>
61-
<maplibre-internal-layer
62-
v-if="shouldAggregateSubLayerBeVisible(aggregateSubLayer)"
63-
:layer-config="aggregateSubLayer.layer"
64-
:z-index="zIndex"
65-
/>
66-
</div>
33+
<MaplibreWMTSLayer
34+
v-if="layerConfig.type === LayerTypes.WMTS"
35+
:wmts-layer-config="layerConfig"
36+
/>
37+
<MaplibreWMSLayer
38+
v-if="layerConfig.type === LayerTypes.WMS"
39+
:wms-layer-config="layerConfig"
40+
/>
41+
<MaplibreGeoJSONLayer
42+
v-if="layerConfig.type === LayerTypes.GEOJSON"
43+
:layer-id="layerConfig.id"
44+
:data-url="layerConfig.geoJsonUrl"
45+
:style-url="layerConfig.styleUrl"
46+
:z-index="zIndex"
47+
/><!--
48+
Aggregate layers are some kind of a edge case where two or more layers are joint together but only one of them
49+
is visible depending on the map resolution.
50+
We have to manage aggregate layers straight here otherwise we won't be able to make a recursive call to this
51+
component in another child (that would be OpenLayersAggregateLayer.vue component, that doesn't work).
52+
See https://vuejs.org/v2/guide/components-edge-cases.html#Recursive-Components for more info
53+
-->
54+
<div v-if="layerConfig.type === LayerTypes.AGGREGATE">
55+
<!-- we can't v-for and v-if at the same time, so we need to wrap all sub-layers in a <div> -->
56+
<div
57+
v-for="aggregateSubLayer in layerConfig.subLayers"
58+
:key="aggregateSubLayer.subLayerId"
59+
>
60+
<maplibre-internal-layer
61+
v-if="shouldAggregateSubLayerBeVisible(aggregateSubLayer)"
62+
:layer-config="aggregateSubLayer.layer"
63+
:z-index="zIndex"
64+
/>
6765
</div>
68-
<!-- <OpenLayersKMLLayer-->
69-
<!-- v-if="layerConfig.type === LayerTypes.KML"-->
70-
<!-- :layer-id="layerConfig.id"-->
71-
<!-- :opacity="layerConfig.opacity"-->
72-
<!-- :url="layerConfig.getURL()"-->
73-
<!-- :z-index="zIndex"-->
74-
<!-- />-->
75-
<slot />
7666
</div>
67+
<!-- <OpenLayersKMLLayer-->
68+
<!-- v-if="layerConfig.type === LayerTypes.KML"-->
69+
<!-- :layer-id="layerConfig.id"-->
70+
<!-- :opacity="layerConfig.opacity"-->
71+
<!-- :url="layerConfig.getURL()"-->
72+
<!-- :z-index="zIndex"-->
73+
<!-- />-->
74+
<slot />
7775
</template>

‎packages/mapviewer/src/modules/map/components/maplibre/MaplibreMap.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ onMounted(() => {
3636
maxPitch: 75,
3737
})
3838
39+
mapLibreMap.once('load', () => {
40+
store.dispatch('mapModuleReady', dispatcher)
41+
})
42+
3943
// Click management
4044
let clickStartTimestamp = 0
4145
let lastClickDuration = 0

‎packages/mapviewer/src/modules/map/components/maplibre/MaplibreWMSLayer.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { WEBMERCATOR } from '@geoadmin/coordinates'
2+
import { LV95, WEBMERCATOR, WGS84 } from '@geoadmin/coordinates'
33
import { computed, onMounted, toRef } from 'vue'
44
import { useStore } from 'vuex'
55
@@ -10,7 +10,7 @@ import useAddTileLayer from '@/modules/map/components/maplibre/utils/useAddTileL
1010
1111
const { wmsLayerConfig } = defineProps({
1212
wmsLayerConfig: {
13-
type: [GeoAdminWMSLayer | ExternalWMSLayer],
13+
type: [GeoAdminWMSLayer, ExternalWMSLayer],
1414
required: true,
1515
},
1616
})
@@ -44,6 +44,7 @@ const layerSource = computed(() => ({
4444
`${baseUrl.value}&WIDTH=${tileSize}&HEIGHT=${tileSize}&BBOX={bbox-epsg-3857}&CRS=${WEBMERCATOR.epsg}`,
4545
],
4646
tileSize: tileSize,
47+
bounds: LV95.getBoundsAs(WGS84).flatten,
4748
}))
4849
const layer = computed(() => ({
4950
id: wmsLayerConfig.id,

‎packages/mapviewer/src/modules/map/components/maplibre/MaplibreWMTSLayer.vue

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup>
2-
import { WEBMERCATOR } from '@geoadmin/coordinates'
3-
import { computed, onMounted, toRef, toValue } from 'vue'
2+
import { LV95, WEBMERCATOR, WGS84 } from '@geoadmin/coordinates'
3+
import { computed, onMounted, toRef } from 'vue'
44
55
import ExternalWMTSLayer from '@/api/layers/ExternalWMTSLayer.class'
66
import GeoAdminWMTSLayer from '@/api/layers/GeoAdminWMTSLayer.class'
@@ -9,7 +9,7 @@ import { getWmtsXyzUrl } from '@/utils/layerUtils'
99
1010
const { wmtsLayerConfig } = defineProps({
1111
wmtsLayerConfig: {
12-
type: [GeoAdminWMTSLayer | ExternalWMTSLayer],
12+
type: [GeoAdminWMTSLayer, ExternalWMTSLayer],
1313
required: true,
1414
},
1515
})
@@ -18,10 +18,11 @@ const sourceId = computed(() => `source-${wmtsLayerConfig.id}`)
1818
const layerSource = computed(() => ({
1919
type: 'raster',
2020
tiles: [
21-
getWmtsXyzUrl(toValue(wmtsLayerConfig), WEBMERCATOR, {
21+
getWmtsXyzUrl(wmtsLayerConfig, WEBMERCATOR, {
2222
addTimestamp: true,
2323
}),
2424
],
25+
bounds: LV95.getBoundsAs(WGS84).flatten,
2526
tileSize: 256,
2627
}))
2728
const layer = computed(() => ({

‎packages/mapviewer/src/modules/menu/components/menu/MenuTray.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const singleModeSections = ref([
3838
])
3939
4040
const is3dMode = computed(() => store.state.cesium.active)
41+
const showMapLibre = computed(() => store.state.debug.showMapLibre)
4142
const showImportFile = computed(() => store.state.ui.importFile)
4243
const showDrawingOverlay = computed(() => store.state.drawing.drawingOverlay.show)
4344
const mapModuleReady = computed(() => store.state.app.isMapReady)
@@ -105,7 +106,7 @@ function addRefBySectionId(el) {
105106
@close-menu-section="onCloseMenuSection"
106107
/>
107108
<MenuPrintSection
108-
v-if="!is3dMode"
109+
v-if="!is3dMode && !showMapLibre"
109110
:ref="addRefBySectionId"
110111
@open-menu-section="onOpenMenuSection"
111112
/>

0 commit comments

Comments
 (0)