Discussion :

[saxrub]

Bonjour

C'est parti, je migre vers OL3+Ext OL3+SDK !

Voici ma page de test https://wnat.fr/Wnat_OpenLayer.php dans laquelle j'ai commencé à empiler les outils dont j'ai besoin.

Mais j'ai trois problèmes !

1 -Centrage et projection.

J'ai essayé plusieurs solutions pour pouvoir centrer la carte.
Dans la solution actuelle je recentre la carte une fois celle-ci affichée en 0,0.
Le recentre passe par une conversion de coordonnées.
Quand je passe les coordonnées et la projection lors de la création
center: [-1.3794, 43.6099],
projection : "WGS84"
la carte est bien centré mais les mailles 10x10km sont devenues rectangulaires à l'affichage.

2 - Cartouche des couches (LayerSwitcher)
Dans la page, j'ajoute 3 KML. Dans le cartouche qui liste les couches utilisées, seul le premier KML est correctement listé. Les autres ainsi que la couche OSM sont représentées par des numéros.

3 - Affichage des KML
Dans l'ancienne version V2, pour les KML https://wnat.fr/KML/Visiolittoral/kml_FR_40_133.kml et https://wnat.fr/KML/Visiolittoral/km...0_133_limi.kml, chaque localisation est matérialisée par une aiguille de couleur.
Dans la V3, c'est le nom des localités qui est affiché !

Questions :

1 - Comment indiquer une autre projection compréhensible par tous les composants de la carte ?
2 - Comment coder l'ajouter des KML et autres dans le LayerSwitcher ?
3 - KML, comment faire afficher les aiguilles en lieu et place du nom de la localité ?
4 - Comment récupérer l'emprise des trois KML afin de zoomer automatiquement sur l'emprise ?

A+
Pascal

[saxrub]

Rebonjour à tous

Concernant le point 3, j'arrive à afficher les icones, dans certaines conditions.

Si l'icone est référencée en url relative ou complète, les résultats sont différents.

La page test peut être accédée par plusieurs domaines ;

https://visiolittoral.fr/Wnat_OpenLayer.php
https://wnat.fr/Wnat_OpenLayer.php
Si le domaine correspond au domaine de l'URL, l'icone s'affiche, sinon selon le navigateur, une erreur du style wrong refferer est affichée.

Seule solution, coder le chemin en relatif depuis la racine du site (+ de 10000 kml à recalculer !).

Y aurait-il une autre solution ? Ne pourrais-je pas encoder l'image en base64 et la mettre dans le KML ?

Pascal

[Max_B]

Pour le point 4, c'est pas simple, j'ai un peu bossé la question pour migrer la page de suivi de balise sur iPhiGéNie.com.
Le principe est de retrouver les objet layer de OL3 pour pouvoir utiliser leur "extent". Ci dessous, un extrait de code en vrac pour donner des pistes :

La première fonction est un handler sur fin de modification du parcours. Sur iPhiGéNie.com les parcours sont évolutifs, rechargés régulièrement donc l'événement est le bon moment pour ça.

La seconde fonction retrouve les layer OL3 pour ajouter le handler (la première fonction).

Enfin, on invoque la seconde fonction au chargement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
var gpx_extent;
function set_extend(evt) {
	if (this.getState() == 'ready') {
		var extent = this.getExtent();
		if (!ol.extent.isEmpty(extent)) {
		    ol.extent.extend(gpx_extent, extent);
			nb_gpx--;
			if (nb_gpx == 0) { //On recadre la carte après avoir fait l'union de tous les entents
				var _map = map.getLibMap();
				_map.getView().fit(gpx_extent, _map.getSize());
			}
		}
	}
}

function GPX_check(gpev) {
		for (var id in gpev.layerAdded) {
			if (gpev.layerAdded[id].format == 'GPX') {
				for (var i = this._layers.length - 1; i >= 0; i--) {
					var l = this._layers[i];
					if (l.id == id) {
						var vector = l.obj;
						vector.getSource().on("change", set_extend);
					}
				}
			}
		}
}

map = Gp.Map.load(
	    "geoportail", // html div
	    {
			…
			 mapEventsOptions : {
				 "layerChanged" : GPX_check
			 }
	    }    
	) ;

[gcebelieu]

Bonjour Pascal

Quelques pistes pour ton point 3 :

Concernant le point 3, j'arrive à afficher les icones, dans certaines conditions.

Si l'icone est référencée en url relative ou complète, les résultats sont différents.

La page test peut être accédée par plusieurs domaines ;

https://visiolittoral.fr/Wnat_OpenLayer.php
https://wnat.fr/Wnat_OpenLayer.php
Si le domaine correspond au domaine de l'URL, l'icone s'affiche, sinon selon le navigateur, une erreur du style wrong refferer est affichée.

Seule solution, coder le chemin en relatif depuis la racine du site (+ de 10000 kml à recalculer !).

Y aurait-il une autre solution ?

Essaye de paramétrer le serveur où sont hébergées tes images de façon à ce qu'elles soient servies avec l'entête

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
Access-Control-Allow-Origin: *

cf. https://developer.mozilla.org/fr/doc...l-Allow-Origin pour une explication => cela devrait autoriser l'accès à tes images depuis n'importe qu'elle page web (peu importe le nom de domaine origine).

Ne pourrais-je pas encoder l'image en base64 et la mettre dans le KML ?

C'est aussi une solution. Mais ça ne devrait pas arranger les choses pour tes 10000 kml à recalculer...

Dans la V3, c'est le nom des localités qui est affiché !

Tu peux jouer sur ce comportement avec le paramètre showPointNames de la classe ol.format.KML (cf. https://openlayers.org/en/latest/api...ormat.KML.html )

[gcebelieu]

1 -Centrage et projection.

J'ai essayé plusieurs solutions pour pouvoir centrer la carte.
Dans la solution actuelle je recentre la carte une fois celle-ci affichée en 0,0.
Le recentre passe par une conversion de coordonnées.
Quand je passe les coordonnées et la projection lors de la création
center: [-1.3794, 43.6099],
projection : "WGS84"
la carte est bien centré mais les mailles 10x10km sont devenues rectangulaires à l'affichage.

Tu peux centrer ta carte en utilisant des coordonnées géographiques sans modifier la projection de ta carte avec la fonction ol.proj.fromLonLat(). Regarde par exemple l'usage qui en est fait dans l'exemple ici pour centrer la vue :

https://geoservices.ign.fr/documenta...mise-en-oeuvre

[gcebelieu]

2 - Cartouche des couches (LayerSwitcher)
Dans la page, j'ajoute 3 KML. Dans le cartouche qui liste les couches utilisées, seul le premier KML est correctement listé. Les autres ainsi que la couche OSM sont représentées par des numéros.

Là, c'est juste une erreur dans ton code : la config de chaque couche doit être dans un objet (tu oublies de fermer une accolade) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
var lsControl = new ol.control.LayerSwitcher({
        layers : [{
            layer: osmLyr,
            config: {
                title: "OSM",
                description: "Couche OpenStreet Map",
			}
            },
           {
            layer: Mailles,
            config: {
                title: "Mailles",
                description: "Mes mailles",
			}
            },
           {
            layer: Commune,
            config: {
                title: "Commune",
                description: "Ma commune",
			}
            },
           {
            layer: Limitrophes,
            config: {
                title: "Communes limitrophes",
                description: "Communes limitrophes",
            }
        }], 
        options : {
            collapsed: true
        }
    });

[saxrub]

Ca avance, les points 2 et 3 sont résolus. Pour le point 4, voir plus bas dans le message.

Point 2 : l'erreur de code est corrigée telle que l'a indiqué Gilles Cébélieu.

Point 3 : les images des kml ne s'affichent que dans certaines conditions.

Deux actions ont été faites par mon hébergeur.

1 - Par défaut, les images sont gérées dans un cache spécial. Un paramétrage a été fait pour laisser APACHE gérer tout seul les images.
2 - Pour que les navigateurs Firefox 57 et Chrome 62 puissent afficher les images hors domaine (votre page est dans le domaine xxxx.fr et les images href des kml dans le domaine yyyy.fr) il faut que le serveur APACHE autorise certaines options CORS.
Pour cela, il faut ajouter les lignes qui suivent dans le fichier .htaccess de la racine de votre site

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"

Point 4 :
L'idée est bonne je pense que l'action KML_check() n'est pas déclenchée au bon moment car aucun map.layerAdded n'est présents.
Sur quel événement doit-on déclenché une action après le chargement des layer de type KML ?

var gpx_extent;

function set_extend(evt) {
if (this.getState() == 'ready') {
var extent = this.getExtent();
if (!ol.extent.isEmpty(extent)) {
ol.extent.extend(gpx_extent, extent);
nb_gpx--;
if (nb_gpx == 0) { //On recadre la carte après avoir fait l'union de tous les entents
var _map = map.getLibMap();
_map.getView().fit(gpx_extent, _map.getSize());
}
}
}
}

function KML_check() {
for (var id in map.layerAdded) {
if (map.layerAdded[id].format == 'KML') {
for (var i = this._layers.length - 1; i >= 0; i--) {
var l = this._layers[i];
if (l.id == id) {
var vector = l.obj;
vector.getSource().on("change", set_extend);
}
}
}
}
}


map.once('postrender', function(event) {
// alert('Loaded once!');
KML_check();
});

Merci à tous.