Appronfondir - Custom Layer¶
Les Customs Layers permettent de personnaliser la représentation et les interactions que l’on a avec les layers de façon plus avancée que ce que l’on peut faire avec le fichier de configuration XML.
Dans chacune des deux méthodes présentées dans la suite de cette page les customs layers ont pour base commune la classe CustomLayer
présente dans le fichier custom.js
.
Les méthodes suivantes sont à utiliser dans le fichier maLayer.js
qui est dans l’arborescence suivante :
/apps
├── ma_carte1
│ ├── addons
│ │ ├── couche1
│ │ │ ├── control
│ │ │ └── layer
│ │ │ └── malayer.js
│ │ └── couche2
│ │ ├── control
│ │ └── layer
│ ├── data
│ ├── css
│ ├── sld
│ ├── img
│ ├── templates
│ └── ma_carte1.xml
└── ma_carte2
Première Méthode : Définition Simple¶
Cette solution permet de rapidement mettre en place un custom layer mais ne permet pas de travailler avec des variables ou des méthodes privées.
1 // Définition de la couche représentant le custom layer
2 const aerial = new ol.layer.Tile({
3 source: new ol.source.XYZ({
4 url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
5 maxZoom: 20
6 })
7 });
8
9 // Votre code ici
10 ...
11
12 /* Créer le custom layer à partir du code ci-dessus */
13 // Le custom layer aura pour id "monCustomLayer" et pour couche aerial définit dans l'exemple
14 new CustomLayer("monCustomLayer", aerial);
Tous les paramètres de la classe CustomLayer
ne sont pas nécessaires seul l’ID et la couche (layer) sont indispensables.
Ajouter des fonctions et des variables¶
Une fonction privée ne sera pas accessible en dehors du code de la classe alors qu’une fonction publique sera accessible depuis n’importe où ce qui peut entrainer des conflits avec d’autres fonctions de l’application si l’on ne fait pas attention.
Pour les variables et fonctions de classe publique¶
Il faut définir un nouvel attribut pour la classe CustomControl
de la manière suivante :
1 ...
2 // Initialiser l'objet avec les fonctions init() et destroy() et l'id de couche "monLayer".
3 var monLayer = new CustomLayer("monLayer",aerial);
4
5 // Une fois créé on peut ajouter des propriétés (une propriété peut être une fonction ou une variable)
6
7 // Ajouter une fonction
8 monLayer.maNouvelleFonction = function(){
9 // Votre Code ici
10 ...
11 }
12
13 // Ajouter une variable
14 monLayer.maNouvelleVariable = "je suis un exemple";
Ces attributs seront alors publics et accessibles depuis l’extérieur.
Deuxième Méthode : Création d’une sous-classe¶
La création d’une sous-classe permet de mieux structurer le code et de faciliter l’ajout de fonctions et variables privées sans avoir à modifier la classe parent CustomLayer
. Ell se présente comme suit :
1 const aerial = new ol.layer.Tile({
2 source: new ol.source.XYZ({
3 url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
4 maxZoom: 20
5 })
6 });
7 // Classe qui étend la classe 'CustomLayer' et décrit le custom Layer
8 class MonCustomLayer extends CustomLayer {
9
10 // Initialiser le custom layer
11 constructor(id, layer, legend, handle = false) {
12
13 // Initialiser les attributs de la classe parent
14 super(id, layer, legend, handle);
15
16 }
17 }
18 // Créer le Custom Layer
19 new MonCustomLayer("monCustomLayer",aerial);
La classe MonCustomLayer
hérite de la classe CustomLayer
et doit donc utiliser le constructor()
parent pour créer un objet en spécifiant au minimum l’ID et la layer.
Ajouter des fonctions et des variables¶
Pour empêcher de potentiels bugs on peut ajouter à la classe MonCustomLayer
(vue dans la partie précédente) des fonctions privées ou publiques.
Une fonction privée ne sera pas accessible en dehors du code de la classe alors qu’une fonction publique sera accessible depuis n’importe où ce qui peut entraîner des conflits avec d’autres fonctions de l’application si l’on ne fait pas attention.
Pour les variables et fonctions de classe publique¶
Directement en ajoutant dans le code de la classe MonCustomLayer
:
1 // Classe qui étend la classe et décrit le custom Layer
2 class MonCustomLayer extends CustomLayer {
3 constructor(id, layer, legend, handle = false, nouvelleVariable) {
4
5 // Initialiser les attributs de la classe parent
6 super(id, layer, legend, handle);
7
8 // Ajout d'une variable publique qui prend en valeur le paramètre de constructor "nouvelleVariable"
9 this.nouvelleVariable = nouvelleVariable;
10
11 }
12 maFonctionPublique(){
13 // Votre code ici
14 ...
15 }
16 }
17 // Créer l'objet layer avec l'id 'monLayer' qui est le nom de la couche
18 new MonCustomLayer("monLayer",aerial);
Cette fonction sera appelable grâce à monobjet.maFonctionPublique()
et l’on peut bien sûr y passer des paramètres.
Concernant la variable elle est de la même façon accessible grâce à monobjet.nouvelleVariable
.
Pour les variables et fonctions de classe privée¶
Une fonction privée est définie en dehors du code de la classe MonCustomLayer
et déclarée comme une constante
:
1 // Fonction privée non utilisable en dehors de ce code
2 const maFonctionPrivée = function(){
3 // Votre code ici
4 ...
5 }
6 // Classe qui étend la classe et décrit le custom Layer
7 class MonCustomLayer extends CustomLayer {
8 ...
9 maFonctionPublique(){
10 maFonctionPrivée();
11 // Votre code ici
12 ...
13 }
14 }
15 // Créer l'objet layer avec l'id 'monLayer' qui est le nom de la couche
16 new MonCustomLayer("monLayer",aerial);
Cette fonction sera appelable grâce à maFonctionPrivée()
seulement dans ce bout de code et donc on peut par exemple l’utiliser dans une fonction publique (ici maFonctionPublique()
).
Pour ajouter une variable de classe privée il faut ajouter le « # » avant le nom de la variable et la déclarer avant la fonction constructor()
:
...
// Classe qui étend la classe et décrit le custom Layer
class MonCustomLayer extends CustomLayer {
// Déclaration de la variable Privée
#maVariablePrivee;
constructor(id, layer, legend, handle = false,maVariablePrivee = "valeurParDefaut") {
// Initialiser les attributs de la classe parent
super(id, layer, legend, handle);
// Initialiser #maVariablePrivee
this.#maVariablePrivee = maVariablePrivee
...
}
...
}
// Initialiser un objet avec la chaine de caractères "maVariablePrivee" dans la variable de classe privée #maVariablePrivee et l'id de couche "monLayer".
new MonCustomLayer("monLayer",aerial);
Si vous voulez quand pouvoir accéder et modifier la valeur de cette variable en dehors de ce code mais de manière plus sécuriser il faut déclarer une fonction get()
pour récupérer la valeur et une fonction
set(valeur)
pour la modifier :
...
// Classe qui étend la classe et décrit le custom Layer
class MonCustomLayer extends CustomLayer {
// Déclaration de la variable Privée
#maVariablePrivee;
constructor(id, layer, legend, handle = false,maVariablePrivee = "valeurParDefaut") {
// Initialiser les attributs de la classe parent
super(id, layer, legend, handle);
// Initialiser #maVariablePrivee
this.#maVariablePrivee = maVariablePrivee
...
}
// Fonction pour récupérer la valeur de #maVariablePrivee
getMaVariablePrivee(){
return this.#maVariablePrivee;
}
// Fonction pour modifier la valeur de #maVariablePrivee
setMaVariablePrivee(valeur){
this.#maVariablePrivee = valeur;
}
}
// Initialiser un objet avec la chaîne de caractères "maVariablePrivee" dans la variable de classe privée #maVariablePrivee et l'id de couche "monLayer".
new MonCustomLayer("monLayer",aerial);
Interactions customLayer et mviewer¶
Depuis le customLayer il est possible de communiquer et d’interagir avec la carte et d’une façon plus générale avec mviewer. Vous pouvez ainsi mobiliser toutes les méthodes publiques dans votre développement. Pour en savoir plus, consultez, dans la documentation développeur, la partie « Les fonctions publiques de mviewer ».