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é ?

#1 Tue 01 May 2012 14:19

diouckk
Juste Inscrit !
Date d'inscription: 30 Apr 2012
Messages: 5

Openlayers Pop Up

Bonjour
Je suis debutant dans le webmapping. Je voudrai afficher des pop up sur openlayers j ai pas d erreur mais ca m affiche rien quand je click sur la carte. Est ce que quelqu un pourrait m aider svp?
j'ai peu t etre un code qui beug
voici le code



Code:

<head>
<style type="text/css">
        #map {
            width: 800px;
            height: 475px;
            border: 1px solid black;
        }
    </style>
   <title>OpenLayers opup</title>
        <script src="../lib/OpenLayers-2.11/OpenLayers.js"></script>
        <script type="text/javascript">    
   
   
        
        //============================================================================
        //                         <!--Debut du code JS--> 
        //Fonctionnalités de la carte : Ajout des contrôles classiques---->
        //                    options graph, zoom + apercu
        //============================================================================    
   
          var map, layer;  
                
        function load() {
            
        map = new OpenLayers.Map("map",  {
            
                controls:[
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.Permalink(),
                    new OpenLayers.Control.ScaleLine({geodesic: true}),
                    new OpenLayers.Control.Permalink('permalink'),
                    new OpenLayers.Control.MousePosition(),                    
                    new OpenLayers.Control.Attribution(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.OverviewMap(),
                    new OpenLayers.Control.MousePosition(),
                    new OpenLayers.Control.LayerSwitcher()],
                    
        projection: 'EPSG:4326',  
        displayProjection: new OpenLayers.Projection("EPSG:2154"),
        maxExtent: new OpenLayers.Bounds(257408.019880,6696351.951313,437613.880120,6838856.848687),
        maxResolution: 'auto',
        units: 'm'
        //numZoomLevels: 12,
                                    
            });
      
      
        //============================================================================
        //                         Choix des couches & servers
        //============================================================================            
            
         //var osmLayer = new OpenLayers.Layer.OSM("OpenStreetMap");
        //map.addLayer(osmLayer);
        commune = new OpenLayers.Layer.MapServer("commune", "http://localhost/cgi-bin/mapserv?map=/var/www/mapserver/mapfile/commune1.map&", 
                                                {layers:"commune",
                                                projection: new OpenLayers.Projection("EPSG:2154"),
                                                 "transparent": false,
                                                 visibility: true});
                                                map.addLayer(commune);
    
                                                                
                
                        
                                                
         //============================================================================
        //                 Fonction POP UP
        //============================================================================                                    
        
     info =  new OpenLayers.Control.WMSGetFeatureInfo({

                     url: "/cgi-bin/mapserv",
                     maxFeatures: 1,
                     title: 'Identify features by clicking',
                     queryVisible: true,
                     layers: [commune],
                     vendorParams: {

                         map: "commune.map",

                     },
                     eventListeners: {
                         getfeatureinfo: function(event) {
                             map.addPopup(new OpenLayers.Popup.FramedCloud(
                                     "chicken",
                                     map.getLonLatFromPixel(event.xy),
                                     null,
                                     event.text,
                                     null,
                                     true
                              )); //map.addPopup


                         } // getfeatureinfo
                     } // eventListeners

   });

   map.addControl(info);
   info.activate();
   


    
    
        //============================================================================
        //                 ZOOM initial de l'étendue de la carte
        //============================================================================            
            
            //map.setCenter(new OpenLayers.LonLat(-1,47), 8);
            map.zoomToMaxExtent();
        
        //============================================================================
        //                                 FIN du init
        //============================================================================            
            
   };
</script>
  </head>
  <body onload="load()">
    <div id='map' style='width: 50%; height: 75%;'>
  </body>
</html>

Dernière modification par diouckk (Tue 01 May 2012 14:21)

Hors ligne

 

#2 Thu 10 May 2012 22:45

gallab
Participant occasionnel
Lieu: Marseille
Date d'inscription: 28 May 2010
Messages: 19

Re: Openlayers Pop Up

Salut,
le post date un peu..mais je vais essayer de t'apporter mon aide.
Pour les popups, une piste:  regarde le code des exemples présent dans le zip d'openlayers
(examples/popups.html)

Sinon je viens de tester ton code, il affichait rien alors j'ai changé par rapport à ce que j'utilise moi :

ds les paramètres de la map..
-> si tu utilises OpenStreetMap alors il faut utilisé le sys. de proj google mercator (900913) :
       

Code:

 projection: 'EPSG:900913', // pas 4326 si t'utilises le fond OSM 
        displayProjection: new OpenLayers.Projection("EPSG:2154"),
        maxExtent: new OpenLayers.Bounds(257408.019880,6696351.951313,437613.880120,6838856.848687),

sinon bizarrement il semble que tu veuilles zoomer sur la Somalie..

Code:

 //map.setCenter(new OpenLayers.LonLat(-1,47), 8);
            map.zoomToMaxExtent();

pour pouvoir utiliser des coordonnées normaux en WGS84 (EPSG:4326) voilà le code:

Code:

     map.zoomToMaxExtent(); // ici j'ai inversé l'ordre d'appels des  fonctions maxextent et setcenter
    map.setCenter(   new OpenLayers.LonLat(-71.147, 42.472).transform( new OpenLayers.Projection("EPSG:4326"),  new OpenLayers.Projection("EPSG:900913") ), 12   );

à+


Gallien

Hors ligne

 

Pied de page des forums

Powered by FluxBB