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

Pour sa 21ème année, l’association GeoRezo a toujours besoin de vous !

10€ = 1 mois de frais bancaires ; 15€ = 12 mois de nom de domaine ; 30€ = 1 semaine de location des serveurs …

Faire un don 

Retrouver nos membres bienfaiteurs

#1 Mon 11 November 2013 15:19

GAILLOT Alexis
Participant actif
Lieu: REMIREMONT
Date d'inscription: 26 Mar 2009
Messages: 53

Geojson - Openlayers - affichage points et donnees attributai

Bonjour,
Je débute en Webmapping, et je m'appuie largement sur les exemples du site Openlayers. Je travaille actuellement avec une config minimaliste : base PostGIS - GeoJson - Openlayers - HTML - javascript (sans php pour kl'isntant), et sans serveur carto (on m'a conseillé de commencer par là).
J'utilise ogr2ogr pour créer un fichier geojson à partir d'une table postGIS. Pas de pb.
Pas de pb non plus pour l'affichage de ce geojson (points) avec OpenLayers (merci les exemples du site Openlayers).
Par contre, je voudrais afficher quelques données attributaires de mes points du geojson dans OpenLayers dans une infobulle (ou autre chose éventuellement), et là je galère. Par exemple je voudrais afficher pour chaque point le contenu des champs "texte", "voie" et "prises".

Voici à quoi ressemble mon geojson :

Code:

{
"type": "FeatureCollection","features":[
{"type":"Feature","properties":{"gid":337,"texte":"4","voie":"AVENUE DE STALINGRAD","prise":96},"geometry":{"type":"Point","coordinates":[2.318162526507632,48.809558104380514]}},
{"type":"Feature","properties":{"gid":363,"texte":"13","voie":"AVENUE JEAN JAURES","prise":162},"geometry":{"type":"Point","coordinates":[2.306448229212159,48.809618413621415]}},
{"type":"Feature","properties":{"gid":1063,"texte":"1","voie":"RUE DES COQUARTS","prise":98 },"geometry":{"type":"Point","coordinates":[2.312272384047124,48.790701295590139 ]}},
{"type":"Feature","properties":{"gid":1354,"texte":"3","voie":"RUE ABRAHAM LINCOLN","prise":110 },"geometry":{"type":"Point","coordinates":[2.318429794666995,48.791382077330702]} },
{"type":"Feature","properties":{"gid":1356,"texte":"1","voie":"RUE ABRAHAM LINCOLN","prise":115 },"geometry":{"type":"Point","coordinates":[2.317958393491166,48.790377238834381]} },
{"type":"Feature","properties":{"gid":1534,"texte":"16","voie":"AVENUE VICTOR HUGO","prise":187 },"geometry":{"type":"Point","coordinates":[2.321765210809853,48.803716995855659]} },
{"type":"Feature","properties":{"gid":1656,"texte":"2","voie":"ALLEE ANATOLE FRANCE","prise":126 },"geometry":{"type":"Point","coordinates":[2.313289415393208,48.802149783401838]} },
{"type":"Feature","properties":{"gid":1657,"texte":"4","voie":"ALLEE ANATOLE FRANCE","prise":126 },"geometry":{"type":"Point","coordinates":[2.313101057779703,48.802639036956549]} },
{"type":"Feature","properties":{"gid":1658,"texte":"6","voie":"ALLEE ANATOLE FRANCE","prise":128 },"geometry":{"type":"Point","coordinates":[2.31356868074614,48.803286393710032]} },
{"type":"Feature","properties":{"gid":1659,"texte":"8","voie":"ALLEE ANATOLE FRANCE","prise":128 },"geometry":{"type":"Point","coordinates":[2.313084059851697,48.803601599861331]} },
{"type":"Feature","properties":{"gid":2887,"texte":"1","voie":"RUE DE LA SARRAZINE","prise":100 },"geometry":{"type":"Point","coordinates":[2.311324769585922,48.789523753769373]} },
{"type":"Feature","properties":{"gid":2891,"texte":"0","voie":"MAIL DES TERTRES","prise":350 },"geometry":{"type":"Point","coordinates":[2.306314749882397,48.78733810668416]}}]}

Voici ma fonction javascript qui appelle le fichier geojson externe:

Code:

        function init(){
            map = new OpenLayers.Map( 'map' );
            layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
            map.addLayer(layer);
              map.setCenter( new OpenLayers.LonLat(lon, lat).transform( "EPSG:4326", "EPSG:3857" ) , zoom );

            /* geojson */
            var vector_layer = new OpenLayers.Layer.Vector("GeoJSON", {
                projection: "EPSG:4326",
                strategies: [new OpenLayers.Strategy.Fixed()],
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "bag1_site.geojson",
                    format: new OpenLayers.Format.GeoJSON()
                })            
            });
           map.addLayer(vector_layer);
        }

Pouvez-vous m'expliquer comment afficher les champs souhaités ?
Merci d'avance. Cordialement,
Alexis GAILLOT

Hors ligne

 

#2 Tue 19 November 2013 16:18

maxthethug
Participant occasionnel
Lieu: Chaumont
Date d'inscription: 15 Nov 2011
Messages: 21

Re: Geojson - Openlayers - affichage points et donnees attributai

Bonjour,

Ayant déjà eu affaire à ce genre de problématique, je ne saurais trop te conseiller de coupler OpenLayers à ExtJS et GeoExt qui sont deux librairies javascript qui à mon avis devraient répondre à tes besoins.

Voir par ici : http://geotribu.net/node/144 pour un petit tutoriel sur le site de geotribu et sinon tu auras des exemples d'utilisations de geoext et openlayers ici : http://geoext.org/examples.html#examples

Pour moi en gros le principe serait d'utiliser le protocole http que tu utilises pour charger un data FeatureStore via geoext et ensuite utiliser un select control avec openlayers pour sélectionner ta rue et afficher ta popup avec l'évènement onFeatureSelect

Ca a l'air vague comme ça mais ce que je te donne ici sont bien entendu des pistes de réflexion, il y a sûrement d'autres solutions wink

Hors ligne

 

Pied de page des forums

Powered by FluxBB