Newer
Older
Sébastien DA ROCHA
committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<template>
<div :class="['sidebar-container', { expanded }]">
<!-- <div class="sidebar-layers"></div> -->
<div @click="expanded = !expanded" class="layers-icon">
<!-- // ! svg point d'interrogation pas accepté par linter -->
<!-- <?xml version="1.0" encoding="iso-8859-1"?> -->
<svg
version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 491.203 491.203"
style="enable-background: new 0 0 491.203 491.203"
xml:space="preserve"
>
<g>
<g>
<path
d="M487.298,326.733l-62.304-37.128l62.304-37.128c2.421-1.443,3.904-4.054,3.904-6.872s-1.483-5.429-3.904-6.872
l-62.304-37.128l62.304-37.128c3.795-2.262,5.038-7.172,2.776-10.968c-0.68-1.142-1.635-2.096-2.776-2.776l-237.6-141.6
c-2.524-1.504-5.669-1.504-8.192,0l-237.6,141.6c-3.795,2.262-5.038,7.172-2.776,10.968c0.68,1.142,1.635,2.096,2.776,2.776
l62.304,37.128L3.905,238.733c-3.795,2.262-5.038,7.172-2.776,10.968c0.68,1.142,1.635,2.096,2.776,2.776l62.304,37.128
L3.905,326.733c-3.795,2.262-5.038,7.172-2.776,10.968c0.68,1.142,1.635,2.096,2.776,2.776l237.6,141.6
c2.526,1.494,5.666,1.494,8.192,0l237.6-141.6c3.795-2.262,5.038-7.172,2.776-10.968
C489.393,328.368,488.439,327.414,487.298,326.733z M23.625,157.605L245.601,25.317l221.976,132.288L245.601,289.893
L23.625,157.605z M23.625,245.605l58.208-34.68l159.672,95.2c2.524,1.504,5.668,1.504,8.192,0l159.672-95.2l58.208,34.68
L245.601,377.893L23.625,245.605z M245.601,465.893L23.625,333.605l58.208-34.68l159.672,95.2c2.524,1.504,5.668,1.504,8.192,0
l159.672-95.2l58.208,34.68L245.601,465.893z"
/>
</g>
</g>
</svg>
</div>
<div class="basemaps-title">
<h4>
Fonds cartographiques
<!-- <span data-tooltip="Il est possible pour chaque fond cartographique de modifier l'ordre des couches"
data-position="bottom left">
<i class="question circle outline icon"></i>
</span> -->
</h4>
</div>
<div v-for="basemap in baseMaps" :id="`list-${basemap.id}`"
:key="`list-${basemap.id}`" class="basemaps-items ui accordion styled">
<div :class="{ active: isActive(basemap) }" class="basemap-item title" @click="activateGroup(basemap)">{{basemap.title}}</div>
<div :class="{ active: isActive(basemap) }" class="content" data-basemap-index="0">
<div
v-for="(layer, index) in basemap.layers"
:key="basemap.id + '-' + layer.id + '-' + index"
class="layer-item transition visible"
>
<p
class="layer-handle-sort"
>
<i class="th icon"></i>{{layer.title}}
</p>
<label>Opacité <span>(%)</span></label>
<div class="range-container">
<!-- // todo : rendre réactif les valeurs et connectés avec store/Map -->
<input
@change="updateOpacity($event,layer)"
type="range"
min="0"
max="1"
:value="layer.opacity"
step="0.01"
/><output class="range-output-bubble">{{getOpacity(layer.opacity)}}</output>
</div>
<div class="ui divider"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapUtil } from "@/assets/js/map-util.js";
export default {
name: "SidebarLayers",
data() {
return {
baseMaps:[],
layers:[],
expanded: false,
};
},
methods: {
isActive(basemap){
return basemap.active!=undefined && basemap.active ;
},
activateGroup(basemap){
this.baseMaps.forEach(basemap=>basemap.active=false);
basemap.active=true;
basemap.title+=" ";//weird!! Force refresh
this.addLayers(basemap);
},
updateOpacity(event,layer){
console.log(event.target.value,layer)
mapUtil.updateOpacity(layer.id, event.target.value);
layer.opacity=event.target.value;
},
getOpacity(opacity){
return Math.round(parseFloat(opacity)*100);
},
addLayers(baseMap){
baseMap.layers.forEach(layer => {
var layerOptions=this.layers.find(l=>l.id==layer.id);
console.log(layerOptions)
layer = Object.assign(layer, layerOptions);
layer.options.basemapId = baseMap.id;
})
mapUtil.removeLayers(mapUtil.getMap());
// Reverse is done because the first layer in order has to be added in the map in last.
// Slice is done because reverse() changes the original array, so we make a copy first
mapUtil.addLayers(baseMap.layers.slice().reverse(), null, null);
}
},
mounted(){
this.baseMaps=this.$store.state.map.basemaps;
this.layers=this.$store.state.map.layers;
if(this.baseMaps.length>0){
this.baseMaps[0].active=true;
this.addLayers(this.baseMaps[0]);
}
else{
mapUtil.addLayers(null, this.$store.state.configuration.DEFAULT_BASE_MAP.SERVICE, this.$store.state.configuration.DEFAULT_BASE_MAP.OPTIONS);
}
}
};
</script>
<style>
@import "../../assets/styles/sidebar-layers.css";
.queryable-layers-dropdown {
margin-bottom: 1em;
}
.queryable-layers-dropdown > label {
font-weight: bold;
}
</style>