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
| function getLayers(){
var bounds = map.getBounds(); // je récupère l'emprise de la carte affichée à l'écran avec :
var bn = bounds._ne.lat; // la latitude et la longitude du coin NE
var be = bounds._ne.lng;
var bs = bounds._sw.lat; // la latitude et la longitude du coin SW
var bw = bounds._sw.lng;
var baselayers = []; // initialisation d'un tableau
$.ajax({ // appel AJAX à mon API LAYERS (api qui recense des fonds de carte qui demande ici 4 paramètres qui correspondent à l'emprise de la couche elle-même)
url: API_LAYERS+'api/layer/intersects.php?',
type:'GET',
datatype:'json',
data:{
"bw":bw,
"bs":bs,
"be":be,
"bn":bn
},
complete: function(res) {
if (checkAjaxError(res)) { // fonction que j'ai moi même créée pour débogage
var layer_res = res.responseJSON;
var layer_record = layer_res.layer; // je récupère les données sous forme JSON
for(i=0;i<layer_record.length;i++) //ici je cherche à boucler sur chaque layer qui intersectent l'emprise de la carte à l'écran
{
var record = layer_record[i];
var layer_item = { // je créé un élément JS qui correspond à ce que demande le module MapLibreGLBasemapsControl
id: record['id_flux'],
tiles: record['url'],
name: record['layername'],
sourceExtraParams: {
tileSize: 256,
attribution: record['layername'],
minzoom: 0,
maxzoom: 22
}
};
baselayers.push(layer_item); // j'injecte tous les éléments précédents dans le tableau que j'avais initialisé
}
}
}
})
return baselayers; // ici un console.log renvoie un tableau (celui que je cherche)
}
// C'est là que ça se complique...
// Je demande que quand la carte enregistre un changement, la fonction précédente soit appelée... Ca marche mais seulement dans les premières lignes
map.on('idle', function(){
getLayers();
console.log(getLayers()); // ce console.log me renvoie aussi mon tableau
// mais quand j'ajoute le module MapLibreGLBaseMapsControl, rien ne se passe et voila le code que je tente de mettre....
var basemapscontrol = new MaplibreGLBasemapsControl( // normalement, le tableau étant bien formé, il devrait afficher le module comme dans la démo, mais c'est pas le cas
{
basemaps: getLayers(),
initialBasemap: "OpenStreetMap",
expandDirection: "top"
});
map.addControl(basemapscontrol, 'bottom-right');
}) |
