Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Printemps des cartes 2024

#1 Thu 30 July 2015 17:02

Cerise45
Participant actif
Date d'inscription: 31 Aug 2011
Messages: 132

Afficher des couches Geoserver sur Leaflet

Bonjour à tous,

Malgré des recherches sur le net et pas mal d'essais... je n'arrive pas à trouver l'erreur, c'est pourquoi je fait appel à vous..

J'utilise Leaflet et Geoserveur.
Je n'arrive pas à afficher un shapefile que j'ai publié sur GeoServer sur la page html / js où se trouve Leaflet.

Quelqu'un voit-il une erreur ?


Code:

                    var map = L.map('map').setView([4.477411, 21.309284], 3);
                    
    
                    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://www.osm.org">OpenStreetMap</a>' }).addTo(map);
                    
                    // Instantiation de différentes couches provenant de GeoServer
                    
                    var urbanareas = L.tileLayer.wms("http://localhost:8080/geoserver/Data", {
                        layers: 'Data:urbanareas',
                        format: 'image/png',
                        transparent: true
                    });
                    
                    L.addLayer(urbanareas).addTo(map);

Merci par avance...

Hors ligne

 

#2 Fri 07 August 2015 16:06

Cerise45
Participant actif
Date d'inscription: 31 Aug 2011
Messages: 132

Re: Afficher des couches Geoserver sur Leaflet

J'ai trouvé mes erreurs !
... Notamment grâce à la réponse à ce message : http://gis.stackexchange.com/questions/ … er-wms-map

Pour les débutants, qui comme moi, ont besoin d'aide, voici la solution:

Code:

                    var map = L.map('map').setView([4.477411, 21.309284], 3);
                    
    
                    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://www.osm.org">OpenStreetMap</a>' }).addTo(map);
                    
                    // Instantiation de différentes couches provenant de GeoServer
                    
                    var urbanareas = L.tileLayer.wms("http://localhost:8080/geoserver/data/wms", {
                        layers: 'data:urbanareas',
                        format: 'image/png',
                        transparent: true
                    });
                    
                    urbanareas.addTo(map);

Explications :
* l'URL "http://localhost...." correspond à ce qui se trouve dans l'URL de prévisualisation de la couche (sur Geoserver) avant les termes "?service=WMS..."
* urbanareas.addTo(map) avait été mélangé avec l'autre fonction L.addLayer(urbanareas)


J'espère que ce post en aidera certains !

Hors ligne

 

Pied de page des forums

Powered by FluxBB