Skip to content

Commit 3a8712b

Browse files
lowzonenoselowzonenose
authored
feat(LayerSwitcher) : Verrouiller une couche (#414)
1 parent 6032e38 commit 3a8712b

File tree

4 files changed

+269
-6
lines changed

4 files changed

+269
-6
lines changed

‎DRAFT_CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ __DATE__
1616
* ✨ [Added]
1717

1818
- Territories : Ajout d'un menu option pour permettre de charger une configuration des territoires (#408)
19+
- LayerSwitcher : Option pour verrouiller une couche (#414)
1920

2021
* 🔨 [Changed]
2122

‎samples-src/pages/tests/LayerSwitcher/pages-ol-layerswitcher-modules-dsfr-locklayers.html‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
{{#extend "ol-sample-modules-dsfr-layout"}}
2+
3+
{{#content "vendor"}}
4+
5+
<link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlLayerSwitcher.css" />
6+
<script src="{{ baseurl }}/dist/modules/GpfExtOlLayerSwitcher.js"></script>
7+
<script src="{{ baseurl }}/dist/modules/GpfExtOlLayers.js"></script>
8+
{{/content}}
9+
10+
{{#content "head"}}
11+
<title>Sample openlayers LayerSwitcher</title>
12+
{{/content}}
13+
14+
{{#content "style"}}
15+
<style>
16+
div#map {
17+
width: 100%;
18+
height: 500px;
19+
}
20+
</style>
21+
{{/content}}
22+
23+
{{#content "body"}}
24+
<h2>Ajout du gestionnaire de couches avec formulaire d'ajout de couche</h2>
25+
<!-- map -->
26+
<div id="map">
27+
</div>
28+
<div style="display: flex;flex-direction: column;align-items: center;width: 210px;">
29+
<button type="button" class="fr-btn" id="lockMapsLayer">Verouiller une couche Map</button>
30+
<button type="button" class="fr-btn" id="lockOSMLayer">Verouiller une couche OSM</button>
31+
<button type="button" class="fr-btn" id="lockVTLayer">Verouiller une couche Tuiles Vecteur</button>
32+
<br>
33+
<button type="button" class="fr-btn" id="unlockMapsLayer">Deverouiller une couche Map</button>
34+
<button type="button" class="fr-btn" id="unlockOSMLayer">Deverouiller une couche OSM</button>
35+
<button type="button" class="fr-btn" id="unlockVTLayer">Deverouiller une couche Tuiles Vecteur</button>
36+
</div>
37+
{{/content}}
38+
39+
{{#content "js"}}
40+
<script type="text/javascript">
41+
var map;
42+
var layerSwitcher;
43+
var lockMapsLayer, lockOSMLayer, lockVTLayer;
44+
var unlockMapsLayer, unlockOSMLayer, unlockVTLayer;
45+
var osm, maps, ortho, vt;
46+
47+
var createMap = function() {
48+
// on cache l'image de chargement du Géoportail.
49+
document.getElementById('map').style.backgroundImage = 'none';
50+
51+
osm = new ol.layer.Tile({
52+
source : new ol.source.OSM(),
53+
opacity : 0.8
54+
});
55+
ortho = new ol.layer.GeoportalWMTS({
56+
layer : "ORTHOIMAGERY.ORTHOPHOTOS",
57+
olParams : {
58+
visible : true,
59+
opacity : 0.8,
60+
grayscale : true
61+
}
62+
});
63+
maps = new ol.layer.Tile({
64+
source : new ol.source.GeoportalWMTS({
65+
layer: "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2"
66+
}), // , zIndex : 0
67+
grayscale : false
68+
});
69+
vt = new ol.layer.GeoportalMapBox({
70+
layer : "PLAN.IGN",
71+
style : "standard"
72+
},{
73+
visible : true,
74+
opacity : 0.8,
75+
grayscale : true
76+
}
77+
);
78+
79+
// Création de la map
80+
map = new ol.Map({
81+
target : "map",
82+
view : new ol.View({
83+
center : [288074.8449901076, 6247982.515792289],
84+
zoom : 6
85+
}),
86+
layers : [
87+
osm,
88+
ortho,
89+
maps,
90+
vt
91+
]
92+
});
93+
94+
// Appel du LayerSwitcher
95+
layerSwitcher = new ol.control.LayerSwitcher({
96+
options : {
97+
position : "bottom-right",
98+
collapsed : false,
99+
panel : true,
100+
counter : true
101+
}
102+
});
103+
104+
// Evenement
105+
layerSwitcher.on("layerswitcher:lock", function (e) {
106+
console.warn("layer", e, e.layer, e.locked);
107+
});
108+
layerSwitcher.on("layerswitcher:change:locked", function (e) {
109+
console.warn("layer", e, e.layer, e.locked);
110+
});
111+
maps.on("change:locked", (e) => {
112+
console.warn("layer", e, e.key, e.target.get("locked"));
113+
});
114+
115+
// Ajout du LayerSwitcher à la carte
116+
map.addControl(layerSwitcher);
117+
118+
};
119+
120+
Gp.Services.getConfig({
121+
customConfigFile : "{{ configurl }}",
122+
callbackSuffix : "",
123+
// apiKey: "{{ apikey }}",
124+
timeOut : 20000,
125+
onSuccess : createMap
126+
});
127+
128+
lockMapsLayer = function() {
129+
layerSwitcher.lockLayer(maps, true);
130+
};
131+
lockOSMLayer = function() {
132+
layerSwitcher.lockLayer(osm, true);
133+
};
134+
lockVTLayer = function() {
135+
layerSwitcher.lockLayer(vt, true);
136+
};
137+
138+
unlockMapsLayer = function() {
139+
maps.set("locked", false);
140+
};
141+
unlockOSMLayer = function() {
142+
osm.set("locked", false);
143+
};
144+
unlockVTLayer = function() {
145+
vt.set("locked", false);
146+
};
147+
148+
document.getElementById("lockMapsLayer").onclick = lockMapsLayer;
149+
document.getElementById("lockOSMLayer").onclick = lockOSMLayer;
150+
document.getElementById("lockVTLayer").onclick = lockVTLayer;
151+
document.getElementById("unlockMapsLayer").onclick = unlockMapsLayer;
152+
document.getElementById("unlockOSMLayer").onclick = unlockOSMLayer;
153+
document.getElementById("unlockVTLayer").onclick = unlockVTLayer;
154+
</script>
155+
{{/content}}
156+
157+
{{/extend}}

‎src/packages/CSS/Controls/LayerSwitcher/GPFlayerSwitcher.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ div[id^=GPlayerSwitcher-] [draggable] {
1515
-webkit-user-drag: element;
1616
}
1717

18+
div[id^=GPlayerSwitcher_ID_][disabled] {
19+
pointer-events: none;
20+
opacity: 0.5;
21+
}
22+
1823
/* Manage opening of the components through hiden checkboxes */
1924

2025
div[id^=GPlayerSwitcher-] input[type="checkbox"] + button + dialog {

‎src/packages/Controls/LayerSwitcher/LayerSwitcher.js‎

Lines changed: 106 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ var logger = Logger.getLogger("layerswitcher");
6464
* @fires layerswitcher:change:position
6565
* @fires layerswitcher:change:grayscale
6666
* @fires layerswitcher:change:style
67+
* @fires layerswitcher:change:locked
6768
* @example
6869
* map.addControl(new ol.control.LayerSwitcher(
6970
* [
@@ -112,6 +113,9 @@ var logger = Logger.getLogger("layerswitcher");
112113
* LayerSwitcher.on("layerswitcher:change:style", function (e) {
113114
* console.warn("layer", e.layer, e.name, e.url);
114115
* });
116+
* LayerSwitcher.on("layerswitcher:change:locked", function (e) {
117+
* console.warn("layer", e.layer, e.locked);
118+
* });
115119
*/
116120
class LayerSwitcher extends Control {
117121

@@ -308,6 +312,7 @@ class LayerSwitcher extends Control {
308312
var opacity = layer.getOpacity();
309313
var visibility = layer.getVisible();
310314
var grayscale = layer.get("grayscale");
315+
var locked = layer.get("locked");
311316
var isInRange = this.isInRange(layer, map);
312317
var layerOptions = {
313318
layer : layer,
@@ -318,6 +323,7 @@ class LayerSwitcher extends Control {
318323
opacity : opacity != null ? opacity : 1,
319324
visibility : visibility != null ? visibility : true,
320325
grayscale : grayscale,
326+
locked : locked,
321327
inRange : isInRange != null ? isInRange : true,
322328
title : config.title != null ? config.title : (layerInfos._title || id),
323329
description : config.description || layerInfos._description || null,
@@ -364,6 +370,10 @@ class LayerSwitcher extends Control {
364370
"change:grayscale",
365371
(e) => this._updateLayerGrayScale(e)
366372
);
373+
this._listeners.updateLayerLocked = layer.on(
374+
"change:locked",
375+
(e) => this._updateLayerLocked(e)
376+
);
367377

368378
if (this._layers[id].onZIndexChangeEvent == null) {
369379
this._layers[id].onZIndexChangeEvent = layer.on(
@@ -494,10 +504,32 @@ class LayerSwitcher extends Control {
494504
/**
495505
* Lock a layer, so it cannot be removed or modified from layerSwitcher
496506
* @param {ol.layer.Layer} layer - layer to be locked
507+
* @param {Boolean} locked - true if locked
497508
* @fires layerswitcher:lock {@link LayerSwitcher#LOCK_LAYER_EVENT}
498-
* @todo
499509
*/
500-
lockLayer (layer) {}
510+
lockLayer (layer, locked) {
511+
if (!layer) {
512+
return;
513+
}
514+
515+
var layerID = layer.gpLayerId;
516+
var layerDiv = document.getElementById(this._addUID("GPlayerSwitcher_ID_" + layerID));
517+
if (layerDiv) {
518+
locked ? layerDiv.setAttribute("disabled", true) : layerDiv.removeAttribute("disabled");
519+
}
520+
521+
layer.set("locked", locked);
522+
523+
/**
524+
* event triggered when a layer is locked or unlocked
525+
* @event layerswitcher:lock
526+
*/
527+
this.dispatchEvent({
528+
type : this.LOCK_LAYER_EVENT,
529+
layer : this._layers[layerID],
530+
locked : locked
531+
});
532+
}
501533

502534
/**
503535
* Collapse or display control main container
@@ -675,10 +707,13 @@ class LayerSwitcher extends Control {
675707
* @private
676708
*/
677709
this._layerId = 0;
678-
/** true if widget is collapsed, false otherwise */
710+
/**
711+
* collapse mode
712+
* true if widget is collapsed, false otherwise
713+
*/
679714
this.collapsed = (this.options.collapsed !== undefined) ? this.options.collapsed : true;
680715
/**
681-
* div qui contiendra les div des listes.
716+
* Layer list (DOM).
682717
* @type {DOMElement}
683718
* @private
684719
*/
@@ -871,6 +906,22 @@ class LayerSwitcher extends Control {
871906
* })
872907
*/
873908
this.CHANGE_LAYER_GRAYSCALE_EVENT = "layerswitcher:change:grayscale";
909+
/**
910+
* event triggered when a layer is locked or unlocked
911+
* @event layerswitcher:change:locked
912+
* @defaultValue "layerswitcher:change:locked"
913+
* @group Events
914+
* @param {Object} type - event
915+
* @param {Object} layer - layer
916+
* @param {Object} locked - new locked value
917+
* @param {Object} target - instance LayerSwitcher
918+
* @public
919+
* @example
920+
* LayerSwitcher.on("layerswitcher:change:locked", function (e) {
921+
* console.log(e.layer, e.locked);
922+
* })
923+
*/
924+
this.CHANGE_LAYER_LOCKED_EVENT = "layerswitcher:change:locked";
874925
}
875926

876927
/**
@@ -995,6 +1046,7 @@ class LayerSwitcher extends Control {
9951046
var opacity = layer.getOpacity();
9961047
var visibility = layer.getVisible();
9971048
var grayscale = layer.get("grayscale");
1049+
var locked = layer.get("locked");
9981050
var isInRange = this.isInRange(layer, map);
9991051
var layerOptions = {
10001052
layer : layer,
@@ -1004,6 +1056,7 @@ class LayerSwitcher extends Control {
10041056
opacity : opacity != null ? opacity : 1,
10051057
visibility : visibility != null ? visibility : true,
10061058
grayscale : grayscale,
1059+
locked : locked,
10071060
inRange : isInRange != null ? isInRange : true,
10081061
title : layerInfos._title || id,
10091062
description : layerInfos._description || null,
@@ -1017,6 +1070,7 @@ class LayerSwitcher extends Control {
10171070
this._layers[id].opacity = layer.getOpacity();
10181071
this._layers[id].visibility = layer.getVisible();
10191072
this._layers[id].grayscale = layer.get("grayscale");
1073+
this._layers[id].locked = layer.get("locked");
10201074
this._layers[id].inRange = this.isInRange(layer, map);
10211075
}
10221076
// on met à jour le compteur
@@ -1035,6 +1089,10 @@ class LayerSwitcher extends Control {
10351089
"change:grayscale",
10361090
(e) => this._updateLayerGrayScale(e)
10371091
);
1092+
this._listeners.updateLayerLocked = layer.on(
1093+
"change:locked",
1094+
(e) => this._updateLayerLocked(e)
1095+
);
10381096

10391097
var self = this;
10401098
setTimeout(() => {
@@ -1636,7 +1694,7 @@ class LayerSwitcher extends Control {
16361694
}
16371695

16381696
/**
1639-
* togglegreyscale
1697+
* update greyscale
16401698
* @param {Event} e - Event
16411699
* @fires layerswitcher:change:grayscale {@link LayerSwitcher#CHANGE_LAYER_GRAYSCALE_EVENT}
16421700
* @private
@@ -1823,8 +1881,9 @@ class LayerSwitcher extends Control {
18231881
layer : this._layers[id]
18241882
});
18251883
}
1884+
18261885
/**
1827-
* togglegreyscale
1886+
* toggle greyscale layer
18281887
* @param {Event} e - Event
18291888
* @private
18301889
*/
@@ -1848,6 +1907,47 @@ class LayerSwitcher extends Control {
18481907
layer.set("grayscale", toGreyScale);
18491908
}
18501909

1910+
/**
1911+
* update locked layer
1912+
* @param {Event} e - Event
1913+
* @fires layerswitcher:change:locked {@link LayerSwitcher#CHANGE_LAYER_LOCKED_EVENT}
1914+
* @private
1915+
*/
1916+
_updateLayerLocked (e) {
1917+
var id = e.target.gpLayerId;
1918+
var layer = this._layers[id].layer;
1919+
var locked = layer.get("locked");
1920+
1921+
var layerDiv = document.getElementById(this._addUID("GPlayerSwitcher_ID_" + id));
1922+
if (layerDiv) {
1923+
locked ? layerDiv.setAttribute("disabled", true) : layerDiv.removeAttribute("disabled");
1924+
}
1925+
1926+
/**
1927+
* event triggered when an locked layer is changed
1928+
* @event layerswitcher:change:locked
1929+
*/
1930+
this.dispatchEvent({
1931+
type : this.CHANGE_LAYER_LOCKED_EVENT,
1932+
locked : locked,
1933+
layer : this._layers[id]
1934+
});
1935+
}
1936+
1937+
/**
1938+
* toggle locked layer
1939+
* @param {Event} e - Event
1940+
* @private
1941+
*/
1942+
_onToggleLayerLockedClick (e) {
1943+
var divId = e.target.id; // ex GPvisibilityPicto_ID_26
1944+
var layerID = SelectorID.index(divId); // ex. 26
1945+
var layer = this._layers[layerID].layer;
1946+
1947+
var locked = (e.target.ariaPressed === "true");
1948+
layer.set("locked", locked);
1949+
}
1950+
18511951
/**
18521952
* zoom to extent
18531953
* @fixme dot it for other user data

0 commit comments

Comments
 (0)