Questions / Réponses realisées avec Copilot
LayerSwitcherLa classe LayerSwitcher est un contrôle OpenLayers permettant à l’utilisateur de gérer dynamiquement les couches d’une carte :
map.addControl(new LayerSwitcher(...)).import LayerSwitcher from "gpf-ext-ol/controls/LayerSwitcher";
const layerSwitcher = new LayerSwitcher({
layers: [
{
layer: myLayer,
config: {
title: "Ma couche",
description: "Description de la couche"
}
}
],
options: {
collapsed: false,
panel: true,
counter: true,
allowEdit: true,
allowGrayScale: true
}
});
map.addControl(layerSwitcher);
Vous pouvez écouter les événements pour réagir aux actions :
layerSwitcher.on("layerswitcher:add", e => console.log("Ajout couche", e.layer));
layerSwitcher.on("layerswitcher:remove", e => console.log("Suppression couche", e.layer));
layerSwitcher.on("layerswitcher:change:opacity", e => console.log("Opacité", e.opacity));
layerSwitcher.on("layerswitcher:change:visibility", e => console.log("Visibilité", e.visibility));
En résumé :
LayerSwitcher facilite la gestion interactive des couches sur une carte OpenLayers,
tout en offrant de nombreuses options de personnalisation et une API d’événements riche pour les développeurs.
ol.layer.Layer à gérer.Résumé :
Les options du LayerSwitcher permettent de personnaliser l’apparence, le comportement, les fonctionnalités et les actions disponibles pour chaque couche, afin d’adapter le widget à vos besoins cartographiques et ergonomiques.
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import {fromLonLat} from 'ol/proj';
import LayerSwitcher from 'src/packages/Controls/LayerSwitcher/LayerSwitcher.js';
// Création des couches
const osmLayer = new TileLayer({
source: new OSM(),
visible: true,
opacity: 1,
title: 'Fond OpenStreetMap'
});
const vectorLayer = new VectorLayer({
source: new VectorSource(),
visible: true,
opacity: 0.7,
title: 'Annotations'
});
// Création de la carte
const map = new Map({
target: 'map',
layers: [osmLayer, vectorLayer],
view: new View({
center: fromLonLat([2.35, 48.85]), // Paris
zoom: 12
})
});
// Ajout du LayerSwitcher avec options et métadonnées
const layerSwitcher = new LayerSwitcher({
layers: [
{
layer: osmLayer,
config: {
title: "Fond OpenStreetMap",
description: "Fond cartographique OSM",
locked: true // couche verrouillée
}
},
{
layer: vectorLayer,
config: {
title: "Annotations",
description: "Couches d’annotations éditables"
}
}
],
options: {
collapsed: false,
panel: true,
counter: true,
allowEdit: true,
allowGrayScale: true,
allowTooltips: true,
advancedTools: [
{
label: 'Exporter',
icon: '📤',
cb: (e, instance, layer, options) => {
alert("Export de la couche : " + layer.get("title"));
}
},
{
label: 'Info',
icon: '<svg width="16" height="16" fill="currentColor"><circle cx="8" cy="8" r="7" stroke="black" stroke-width="1" fill="none"/><text x="8" y="12" text-anchor="middle" font-size="10" fill="black">i</text></svg>',
// Pas de cb : déclenche l'événement layerswitcher:custom
}
]
}
});
map.addControl(layerSwitcher);
// Exemple d’écoute d’événements
layerSwitcher.on("layerswitcher:add", function (e) {
console.log("Couche ajoutée :", e.layer);
});
layerSwitcher.on("layerswitcher:remove", function (e) {
console.log("Couche supprimée :", e.layer);
});
layerSwitcher.on("layerswitcher:edit", function (e) {
alert("Edition de la couche : " + e.layer.get("title"));
});
layerSwitcher.on("layerswitcher:custom", function (e) {
alert("Action personnalisée sur : " + e.layer.get("title") + " (" + e.action + ")");
});
À placer dans une page HTML avec un conteneur :
<div id="map" style="width:100%;height:600px;"></div>
<script type="module" src="example-layerswitcher.js"></script>
Ce que montre cet exemple :
Cet exemple est prêt à l’emploi pour tester toutes les fonctionnalités principales du LayerSwitcher.
layerOptions dans le LayerSwitcherlayerOptionsL’objet layerOptions est une structure centrale utilisée en interne par le LayerSwitcher pour stocker toutes les informations et états associés à chaque couche affichée dans le widget.
layerOptions est construit dans la méthode privée _createLayerDiv(layerOptions) et lors de l’ajout d’une couche via addLayer ou _addMapLayers.
Il regroupe à la fois :
layer, id, opacity, visibility, etc.),layerOptions :ol.layer.Layer concerné.Résumé :
layerOptions est l’objet de référence pour chaque couche dans le LayerSwitcher : il regroupe toutes les données, états et références nécessaires à la gestion et à l’affichage de la couche dans le widget.
isInRange) dans la classe LayerSwitcherDans le widget LayerSwitcher, une couche peut apparaître « grisée » dans la liste des couches. Cela signifie que la couche n’est pas visible dans la vue courante de la carte, pour l’une des raisons suivantes :
Niveau de zoom inadapté :
La résolution actuelle de la carte (zoom) ne correspond pas à la plage de zoom définie pour la couche (minResolution/maxResolution).
Exemple : une couche n’est visible qu’à grande échelle, mais l’utilisateur est trop dézoomé.
Étendue géographique non couverte :
L’emprise actuelle de la carte (la zone affichée) ne recoupe pas l’étendue spatiale définie pour la couche (extent).
Exemple : la couche ne couvre que la France, mais l’utilisateur regarde l’Afrique.
La méthode isInRange(layer, map) vérifie ces deux critères :
Si l’un de ces cas est vrai, la couche est considérée comme « hors plage » et la classe CSS outOfRange est ajoutée à son élément DOM dans la liste.
Visuellement, cela la grise et affiche un message d’information au survol.
Résumé :
Une couche « grisée » dans le LayerSwitcher indique qu’elle n’est pas visible à cause du zoom ou de l’emprise courante. Cela améliore l’expérience utilisateur en rendant explicite la raison de l’absence de la couche sur la carte.
Dans le widget LayerSwitcher, une couche peut être affichée comme « verrouillée ».
Cela signifie que certaines actions sur cette couche sont désactivées pour l’utilisateur, généralement pour éviter sa suppression ou la modification de ses propriétés essentielles.
locked: true dans la configuration passée au LayerSwitcher.const layerSwitcher = new LayerSwitcher({
layers: [
{
layer: baseLayer,
config: {
title: "Fond de carte",
locked: true // Cette couche sera verrouillée
}
}
]
});
Résumé :
Une couche verrouillée dans le LayerSwitcher est protégée contre certaines actions utilisateur (suppression, édition, etc.), ce qui garantit la stabilité et la cohérence de la carte affichée.
Dans le widget LayerSwitcher, une couche peut être marquée comme « éditable ». Cela signifie que l’utilisateur a la possibilité de modifier le contenu ou le style de cette couche directement depuis l’interface du LayerSwitcher.
allowEdit: true dans la configuration du LayerSwitcher ou de la couche.const layerSwitcher = new LayerSwitcher({
layers: [
{
layer: vectorLayer,
config: {
title: "Annotations",
// L’option allowEdit peut aussi être définie globalement dans options
}
}
],
options: {
allowEdit: true // Active l’édition pour les couches compatibles
}
});
Résumé :
Une couche éditable dans le LayerSwitcher permet à l’utilisateur de modifier son contenu ou son style via l’interface, principalement pour les couches vecteur, ce qui enrichit l’interactivité et la personnalisation de la carte.
Dans le widget LayerSwitcher, certaines couches peuvent être affichées en mode « noir et blanc » (N&B), aussi appelé mode niveaux de gris.
Cette fonctionnalité permet de désaturer l’affichage d’une couche pour la rendre visuellement moins dominante ou pour mettre en valeur d’autres informations cartographiques superposées.
const layerSwitcher = new LayerSwitcher({
layers: [
{
layer: rasterLayer,
config: {
title: "Ortho N&B"
}
}
],
options: {
allowGrayScale: true // Active le bouton N&B pour les couches compatibles
}
});
Résumé :
Le mode N&B dans le LayerSwitcher permet d’afficher certaines couches en niveaux de gris, offrant ainsi une meilleure lisibilité et une personnalisation avancée de la carte pour l’utilisateur.
advancedTools dans le LayerSwitcheradvancedToolsL’option advancedTools du LayerSwitcher permet d’ajouter des boutons ou outils personnalisés pour chaque couche dans la liste des couches.
Ces outils offrent à l’utilisateur des actions avancées ou spécifiques, adaptées à vos besoins métier.
advancedTools est un tableau d’objets, chaque objet représentant un outil personnalisé.label : le texte affiché sur le bouton,icon : une icône SVG ou une URL d’image,cb : une fonction callback exécutée lors du clic sur l’outil (reçoit en paramètres l’événement, le LayerSwitcher, la couche concernée, et les options de l’outil),styles : des styles CSS personnalisés pour le bouton.const layerSwitcher = new LayerSwitcher({
layers: [
{
layer: myLayer,
config: {
title: "Ma couche"
}
}
],
options: {
advancedTools: [
{
label: "Exporter",
icon: "📤",
cb: (e, layerSwitcher, layer, options) => {
// Action personnalisée à exécuter
alert("Export de la couche : " + layer.get("title"));
},
styles: {
color: "blue"
}
}
]
}
});
advancedTools)L’option advancedTools permet d’ajouter une grande variété de boutons d’action personnalisés pour chaque couche dans le LayerSwitcher.
Voici quelques exemples concrets :
Bouton avec icône SVG inline
Permet d’ajouter un bouton avec une icône vectorielle personnalisée et une action JavaScript :
{
label: 'One',
icon: '<svg ...></svg>',
cb: (e, instance, layer, options) => {
console.log("Action One", e, instance, layer, options);
}
}
Bouton sans icône (icône par défaut)
Un simple bouton texte qui déclenche une action :
{
label: 'Two',
cb: (e, instance, layer, options) => {
console.log("Action Two", e, instance, layer, options);
}
}
Bouton avec icône depuis une URL
Pratique pour réutiliser des pictogrammes existants :
{
label: 'Three',
icon: 'url/vers/mon-icone.svg',
cb: () => window.history.back()
}
Bouton de notification ou d’intégration avec d’autres systèmes
Par exemple, pour publier un événement ou notifier l’application :
{
label: 'Four',
icon: '<svg ...></svg>',
cb: (e, instance, layer, options) => {
// Publier une notification, ouvrir un panneau, etc.
}
}
Bouton stylisé
Vous pouvez personnaliser le style du bouton via la propriété styles :
{
label: 'Exporter',
icon: '📤',
cb: (e, instance, layer, options) => {
alert("Export de la couche : " + layer.get("title"));
},
styles: {
color: "blue"
}
}
Bouton avec un icone dsfr
Permet d'utiliser les icones du DSFR :
{
label: 'Exporter',
icon: 'fr-icon-export',
cb: (e, instance, layer, options) => {
alert("Export de la couche : " + layer.get("title"));
},
styles: {
color: "blue"
}
}
Si l’option cb n’est pas renseignée dans un objet advancedTools, le bouton est tout de même affiché et, lors du clic, un événement personnalisé est déclenché par le LayerSwitcher (généralement layerswitcher:custom).
Cet événement contient les informations sur le bouton cliqué, la couche concernée, etc.
Exemple d’utilisation :
layerSwitcher.on("layerswitcher:custom", (e) => {
// e contient : event, layerSwitcher, layer, options (du bouton)
console.log("Action custom déclenchée :", e);
});
Cela permet de centraliser la gestion des actions non définies directement par une fonction cb, et d’ajouter des comportements dynamiques ou contextuels selon le bouton cliqué.
Résumé :
L’option advancedTools du LayerSwitcher permet d’ajouter facilement des boutons d’action personnalisés pour chaque couche, afin d’enrichir l’interface et de proposer des fonctionnalités avancées adaptées à vos besoins.
Le LayerSwitcher propose une option allowTooltips qui permet d’afficher des info-bulles (tooltips) sur les éléments de l’interface, afin d’améliorer l’ergonomie et l’accessibilité.
setMap), si l’option allowTooltips est activée, le module ToolTips initialise un conteneur HTML dédié pour les info-bulles.<div> positionné en absolu, stylisé pour ressembler à une info-bulle classique.data-tooltip contenant le texte à afficher.ToolTips ajoute des écouteurs d’événements mouseenter et mouseleave sur ces éléments :
mouseenter), le contenu du tooltip est affiché près du curseur.mouseleave), le tooltip disparaît.const layerSwitcher = new LayerSwitcher({
options: {
allowTooltips: true // Active l’affichage des tooltips
}
});
Résumé :
Les tooltips dans le LayerSwitcher sont des info-bulles contextuelles qui s’affichent au survol des éléments, facilitant la compréhension et l’utilisation du gestionnaire de couches, notamment pour les utilisateurs novices ou en situation de handicap.