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

Rencontres QGIS 2025

L'appel à participation est ouvert jusqu'au 19 janvier 2025!

#1 Thu 22 March 2012 11:38

lous.damien.pro
Juste Inscrit !
Date d'inscription: 30 Nov 2011
Messages: 2

[Openlayers] Problemes de mise en ligne de KML

Bonjour,

Je suis étudiant en Géomatique et je suis entrain de réaliser un projet dont le sujet et de mettre en ligne une carte de la commune de valbonne avec plusieurs objets tel que les panneaux de signalisations ou les bancs.

Je travaille donc sous openlayers et je dispose des logiciels MapInfo, Qgis et Google Earth.

Mon 1er probleme vient du fait que je ne peut selectionner un objet d'une couche uniquement lorsque toutes les autres couches sont décochées.

Le 2eme probleme est que lorsque je clique sur un objet la fenetre popup contient uniquement le terme Undefined.

Et enfin le 3eme et pas des moindre, il arrive que plusieurs panneaux soit sur le meme mat et ont donc les meme coordonnées. Je les ai legerement décalés les uns des autres mais ils se chevauchent encore et je ne peut cliquer que sur le 1er objet.

J'espere que vous pourrez m'apporter des solutions, je met le code de la page ci dessous:

Code:

<html>
  <head>
    <title>SIG Valbonne</title>
    <link rel="stylesheet" href="/OpenLayers-2.10/theme/default/style.css" type="text/css" />
    <style type="text/css">
    html, body {
            height: 100%;
        }
            #map{
                width : 100%;
                height : 95%;
                border : 1px solid black;
            }
            .olPopup p { margin:0px; font-size: .9em;}
        .olPopup h2 { font-size:1.2em; }
    </style>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyDabLe5R2Y5nXTJjqvQrCSa7wssnxRYzx4" type="text/javascript"></script>
    <script src="/OpenLayers-2.10/OpenLayers.js"></script>

    <script type="text/javascript">
        var map, select1; select2
        function init(){
             
            map = new OpenLayers.Map({
                    div: "map",
                    projection: new OpenLayers.Projection("EPSG:900913"),
                    displayProjection: new OpenLayers.Projection("EPSG:4326"),
                    units: "m",
                    maxResolution: 156543.0339,
                    maxExtent: new OpenLayers.Bounds(
                        -20037508, -20037508, 20037508, 20037508.34
                    )
                });
                
            var osm = new OpenLayers.Layer.OSM();            
            var gsat = new OpenLayers.Layer.Google("Google : orthophoto",{type: G_SATELLITE_MAP, 'sphericalMercator': true}); 
            var ghyb = new OpenLayers.Layer.Google( "Google : orthophoto + infos", { type: G_HYBRID_MAP , 'sphericalMercator': true} );
                
            map.addLayers([osm, gsat, ghyb]);
            
            var sign = new OpenLayers.Layer.GML("Panneaux de signalisation verticale", "cartqgis.kml", 
               {projection: map.displayProjection,
                format: OpenLayers.Format.KML, 
                formatOptions: {
                  extractStyles: true, 
                  extractAttributes: true,
                  maxDepth: 2
                }});
                
            map.addLayer(sign);
            var PMR = new OpenLayers.Layer.GML("Places stationnement PMR", "pmr.kml", 
               {projection: map.displayProjection,
                format: OpenLayers.Format.KML, 
                formatOptions: {
                  extractStyles: true, 
                  extractAttributes: true,
                  maxDepth: 2
                }});
                
            map.addLayer(PMR);
            var ecl = new OpenLayers.Layer.GML("Eclairage", "ecl.kml", 
               {projection: map.displayProjection,
                format: OpenLayers.Format.KML, 
                formatOptions: {
                  extractStyles: true, 
                  extractAttributes: true,
                  maxDepth: 2
                }});
                
            map.addLayer(ecl);
            var bati = new OpenLayers.Layer.GML("Bâtiments communaux", "bati.kml", 
               {projection: map.displayProjection,
                format: OpenLayers.Format.KML, 
                formatOptions: {
                  extractStyles: true, 
                  extractAttributes: true,
                  maxDepth: 2
                }});            
                
            map.addLayer(bati);
            var poub = new OpenLayers.Layer.GML("Poubelles", "poub.kml", 
               {projection: map.displayProjection,
                format: OpenLayers.Format.KML, 
                formatOptions: {
                  extractStyles: true, 
                  extractAttributes: true,
                  maxDepth: 2
                }});        
                
            map.addLayer(poub);
            var banc = new OpenLayers.Layer.GML("Bancs", "banc.kml", 
               {projection: map.displayProjection,
                format: OpenLayers.Format.KML, 
                formatOptions: {
                  extractStyles: true, 
                  extractAttributes: true,
                  maxDepth: 2
                }});        
                
            map.addLayer(banc);
            var bus = new OpenLayers.Layer.GML("Abribus", "bus.kml", 
               {projection: map.displayProjection,
                format: OpenLayers.Format.KML, 
                formatOptions: {
                  extractStyles: true, 
                  extractAttributes: true,
                  maxDepth: 2
                }});    
                
            map.addLayer(bus);
            var incen = new OpenLayers.Layer.GML("Bornes incendie", "incen.kml", 
               {projection: map.displayProjection,
                format: OpenLayers.Format.KML, 
                formatOptions: {
                  extractStyles: true, 
                  extractAttributes: true,
                  maxDepth: 2
                }});        
                
            map.addLayer(incen);
            var pass = new OpenLayers.Layer.GML("Passages piétons", "pass.kml", 
               {projection: map.displayProjection,
                format: OpenLayers.Format.KML, 
                formatOptions: {
                  extractStyles: true, 
                  extractAttributes: true,
                  maxDepth: 2
                }});    
                
                map.addLayer(pass);
                        
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.Navigation());
            map.addControl(    new OpenLayers.Control.PanZoomBar());
            map.addControl(    new OpenLayers.Control.MousePosition());
            map.addControl(    new OpenLayers.Control.Scale());
            map.addControl(    new OpenLayers.Control.ZoomBox());
            map.addControl(    new OpenLayers.Control.OverviewMap());

            map.setCenter(
                    new OpenLayers.LonLat(7.024, 43.63).transform(
                        new OpenLayers.Projection("EPSG:4326"),
                        map.getProjectionObject()
                    ), 
                    14
            );
            select = new OpenLayers.Control.SelectFeature(sign);
            select1 = new OpenLayers.Control.SelectFeature(bati);
            select2 = new OpenLayers.Control.SelectFeature(PMR);
            select3 = new OpenLayers.Control.SelectFeature(bus);
            select4 = new OpenLayers.Control.SelectFeature(incen);
            select5 = new OpenLayers.Control.SelectFeature(ecl);
            select6 = new OpenLayers.Control.SelectFeature(pass);
            select7 = new OpenLayers.Control.SelectFeature(poub);
            select8 = new OpenLayers.Control.SelectFeature(banc);
            
            sign.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect
            });
            
            bati.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect
            });
  
            PMR.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect
            });
            
            bus.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect
            });
            
            banc.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect
            });
            
            incen.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect
            });
            
            ecl.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect
            });
            
            pass.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect
            });
            
            poub.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect
            });
            
            map.addControl(select);
            select.activate();   
            map.addControl(select1);
            select1.activate(); 
            map.addControl(select2);
            select2.activate(); 
            map.addControl(select3);
            select3.activate(); 
            map.addControl(select4);
            select4.activate(); 
            map.addControl(select5);
            select5.activate(); 
            map.addControl(select6);
            select6.activate(); 
            map.addControl(select7);
            select7.activate(); 
            map.addControl(select8);
            select8.activate();

        }  
        function onPopupClose(evt) {
            select.unselectAll();
            select1.unselectAll();
            select2.unselectAll();
            select3.unselectAll();
            select4.unselectAll();
            select5.unselectAll();
            select6.unselectAll();
            select7.unselectAll();
            select8.unselectAll();
        }
        function onFeatureSelect(event) {
            var feature = event.feature;
            var selectedFeature = feature;
            var popup = new OpenLayers.Popup.FramedCloud("test", 
                feature.geometry.getBounds().getCenterLonLat(),
                new OpenLayers.Size(10,10),
                "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description,
                null, true, onPopupClose
            );
            feature.popup = popup;
            map.addPopup(popup);
        }
        function onFeatureUnselect(event) {
            var feature = event.feature;
            if(feature.popup) {
                map.removePopup(feature.popup);
                feature.popup.destroy();
                delete feature.popup;
            }
        }        
    </script>
  </head>
  <body onload="init()">
    <div id="map"></div>
  </body>

</html>

Hors ligne

 

#2 Wed 28 March 2012 14:28

lous.damien.pro
Juste Inscrit !
Date d'inscription: 30 Nov 2011
Messages: 2

Re: [Openlayers] Problemes de mise en ligne de KML

Apres un nombre incalculable de test, la plupart des problemes ont été résolus.

Malheureusement je ne sais toujours pas comment faire pour avoir la possibilité de cliquer sur une couche kml alors que les autres ne sont pas décochés.

Pouvez vous m'aider?

Hors ligne

 

#3 Fri 04 May 2012 16:13

Navrance
Juste Inscrit !
Date d'inscription: 24 Apr 2012
Messages: 4

Re: [Openlayers] Problemes de mise en ligne de KML

Je rencontre un probleme assez similaire, qui n'est pas encore ma priorité mais qui viendra sans doute, et j'ai pensé à chercher du côté d'un fallthrough (dans le format utilisé par ton layer il me semble) qui permet de laisser passer les clics sur le layer qui n'entrainent rien (par défaut, un clic sur le layer meme s'il n'y rien de visible est intercepté et n'est pas passé aux layers suivants).

J'aurais également une petite question, ton code

Code:

select.unselectAll();
            select1.unselectAll();
            select2.unselectAll();
            select3.unselectAll();
            select4.unselectAll();
            select5.unselectAll();
            select6.unselectAll();
            select7.unselectAll();
            select8.unselectAll();

a bien pour but de fermer toutes les popup ouvertes ? Je cherche actuellement à faire l'inverse (ie ouvrir toutes mes popup), des fonctions de ce type sont disponibles de base dans OpenLayers ?

Hors ligne

 

Pied de page des forums

Powered by FluxBB