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 Sun 14 October 2012 21:12

julien38
Participant occasionnel
Date d'inscription: 18 Oct 2008
Messages: 30

[OpenLayers] Creation d'un arbre à couches sans couches WMS ni Json

Bonjour,

Je travail actuellement sur une carte interactive basée sur openlayers. Je n'ai a afficher que des marqueurs par catégories (une couche par categorie de marqueurs) avec leur popup. Je récupère les coordonnées des marqueurs ainsi que le contenu html des popup via une base de données mysql. Je reussi bien à créer mes couches de marqueurs avec leur popup attitré correctement. Mais maintenant je souhaite organiser mon layerswitcher tel un arbre a couches. Quel est le meilleur moyen pour le faire? Openlayers permet-il simplement de faire ou dois-je passer absolument par une librairie?

J'ai déjà regarder l'exemple de GeoExt mais il utilise eux des couche wms. Puis-je l'adapter a mon cas?

Merci d'avance.

Voic le code de ma page :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title></title>
        <script src="http://openlayers.org/api/OpenLayers.js"></script>
         <script src="OpenLayers/toolTips.js" type="text/javascript"></script>
         <script src="js/jquery.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script type="text/javascript">

 <?php 
try {  
    $dbh = new PDO('mysql:host=xxx;dbname=xxx','xxx','xxx');  
    $rs = $dbh->query('SELECT * FROM marqueurs');  
    $obj = $rs->fetchAll();  
  
     // conversion en json  
    $json_output = json_encode($obj);

}  
catch(PDOException $e) {  
    echo $e->getMessage();  
}  
?>
var coordx = new Array;
var coordy = new Array;
description = new Array;
var marker = new Array;
function onLoad() {

obj = <?php echo $json_output; ?>  
      
    for (i in obj) {  
             coordx[i] = obj[i].x;
             coordy[i] = obj[i].y;
             description[i] = obj[i].contenu;

    }  
  
}  
        // JSON.parse(la_chaine_json)
        
        
            var lat=45.717556;
            var lon=4.835064;
            var zoom=15;
            var map;
 function cliqueDessus(evt) {
popup.toggle();
}                
    
            function init(){
            
onLoad();
        
                map = new OpenLayers.Map ("map", {
              
                    maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                    maxResolution: 156543.0399,
                    numZoomLevels: 15,
                    units: 'm',
                    projection: new OpenLayers.Projection("EPSG:900913"),
                    displayProjection: new OpenLayers.Projection("EPSG:4326")
                } );
 
 map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')}));
                map.addLayer(new OpenLayers.Layer.OSM());
 
                var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
 
                map.setCenter (lonLat, zoom);

                
//creation marqueurs                
                
AutoSizeAnchored = OpenLayers.Class(OpenLayers.Popup.Anchored, {            'autoSize': true});

markers = new OpenLayers.Layer.Markers("Métiers");
map.addLayer(markers);

var longlat, popupClass, popupContentHTML;
for (i = 0; i < coordx.length; i++) 
{ 
longlat = new OpenLayers.LonLat(coordx[i], coordy[i]).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
popupClass = AutoSizeAnchored;
popupContentHTML = description[i];
addMarker(longlat, popupClass, popupContentHTML);

function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {
            var feature = new OpenLayers.Feature(markers, ll); 
            feature.closeBox = closeBox;
            feature.popupClass = popupClass;
            feature.data.popupContentHTML = popupContentHTML;
            feature.data.overflow = (overflow) ? "auto" : "hidden";
                    
            var marker = feature.createMarker();

            var markerClick = function (evt) {
                if (this.popup == null) {
                    this.popup = this.createPopup(this.closeBox);
                    map.addPopup(this.popup);
                    this.popup.show();
                } else {
                    this.popup.toggle();
                }
                currentPopup = this.popup;
                OpenLayers.Event.stop(evt);
            };
            marker.events.register("mousedown", feature, markerClick);

            markers.addMarker(marker);
}
}

} 


          
            
        </script>
    </head>
    
    <body onload="init()">
    
     <div id="layerswitcher" class="olControlLayerSwitcher"></div>
        <div style="width:1000px; height:700px"  id="map" class="smallmap"></div>
        </div>
        <script type="text/javascript" src="js/ajax.js"></script>


    
        
            

        



  </body>
</html>

ps: je suis sur un serveur mutualisé OVH

Dernière modification par julien38 (Sun 14 October 2012 21:24)

Hors ligne

 

#2 Mon 15 October 2012 10:41

yo_haha
Participant occasionnel
Lieu: Martil
Date d'inscription: 28 Sep 2008
Messages: 47

Re: [OpenLayers] Creation d'un arbre à couches sans couches WMS ni Json

En effet, il y a la librairie ExtJS qui te permettra de faire cela avec un TreePanel. J'ai essayé de créer un arbre de couches avec le LayerContainer de GeoExt mais, j'avais des erreurs à cause d'un Layer Vector. J'ai basculé vers un TreePanel de ExtJs et je n'ai plus d'erreurs.

Dernière modification par yo_haha (Mon 15 October 2012 17:03)

Hors ligne

 

#3 Mon 15 October 2012 15:35

Yves
Membre du bureau
Lieu: Aix-les-Bains
Date d'inscription: 22 Mar 2006
Messages: 9869
Site web

Re: [OpenLayers] Creation d'un arbre à couches sans couches WMS ni Json

Bonjour,

yo_haha est de bon conseil ! En effet pas besoin de GeoExt et OpenLayers ne permet pas ce genre de chose (ce n'est pas l'objectif d'ailleurs).

Y.


Yves Jacolin, bénévole de l'association GeoRezo.net, agit au nom et pour le compte de l'association - Partageons ce qui nous départage !!  - GeoRezo vous aide ? Aidez GeoRezo !

Hors ligne

 

#4 Mon 15 October 2012 17:03

julien38
Participant occasionnel
Date d'inscription: 18 Oct 2008
Messages: 30

Re: [OpenLayers] Creation d'un arbre à couches sans couches WMS ni Json

Merci de vos réponses.

Donc avec extjs je pourrais créer un treepanel avec des couches de marqueurs créer à partir d'une base de données? les exemples que j'ai pu voir sur les treepanels utilise toujours des couches wms ors je n'ai pas de serveur carto. Avez-vous des exemples ou des tutoriels ?
Merci.

Hors ligne

 

#5 Mon 15 October 2012 17:14

yo_haha
Participant occasionnel
Lieu: Martil
Date d'inscription: 28 Sep 2008
Messages: 47

Re: [OpenLayers] Creation d'un arbre à couches sans couches WMS ni Json

Ci-dessous, tu trouveras un code exemple pour créer un treePanel avec un noeud racine invisible, un noeud de deuxième niveau nommé Markers et un noeud de troisième niveau de type feuille (sans enfants), nommé monMarker.
N'hésite pas à chercher dans la doc de ExtJs, elle est bien faite : http://docs.sencha.com/ext-js/3-4/ et la page des exemples : http://dev.sencha.com/deploy/ext-3.4.0/examples/

Code:

    tree = new Ext.tree.TreePanel({
        useArrows: true,
        animate: true,
        title: "Couches",
        enableDD: true,
        loader: new Ext.tree.TreeLoader(),
        root: {
            nodeType: "async",
            expanded : true,
            children: [{
                    text: 'Markers',
                    checked: true,
                    draggable: false,
                    leaf: false,
                    expanded: true,
                    singleClickExpand: true,
                    children: [{
                        text: 'monMarker',
                        draggable: true,
                        checked: true,
                        leaf: true,
                        listeners:{
                            'checkchange': function(node, checked){
                                    monMarker.setVisibility(checked);// monMarker est une couche de type Markers
                            }
                        }
                    }]
                    ,listeners:{
                        'checkchange': function(node, checked){
                            node.eachChild(function(n) {
                                n.getUI().toggleCheck(checked);
                            });
                        }
                    }
                }]
        },
        border: true,
                height: 300,
                autoScroll: true,
        containerScroll: true,
        rootVisible: false,
                lines: false
    });

Dernière modification par yo_haha (Mon 15 October 2012 17:15)

Hors ligne

 

#6 Tue 16 October 2012 15:57

julien38
Participant occasionnel
Date d'inscription: 18 Oct 2008
Messages: 30

Re: [OpenLayers] Creation d'un arbre à couches sans couches WMS ni Json

Merci pour le code et la doc.

Je vais donc creuser cette librairie ExtJS pour creer mon treepanel.

Hors ligne

 

#7 Fri 19 October 2012 19:08

julien38
Participant occasionnel
Date d'inscription: 18 Oct 2008
Messages: 30

Re: [OpenLayers] Creation d'un arbre à couches sans couches WMS ni Json

Bonjour,

J'ai réussi à créer mon tree Panel avec ExtJs mais je suis confronté à un autre problème. Je souhaite afficher une couche par marqueur. J'arrive à récupérer sans problème les coordonnées de chaque marqueur et de créer son propre pop up, par contre je voudrais insérer dans ma boucle la création des layers. Pour faire plus simple comment puis-je faire marcher ce code :

Code:

nom_couche = new OpenLayers.Layer.Markers();
map.addLayer(nom_couche);

dans ma boucle pour qu'a chaque marqueur il y est creation d'une nouvelle couche.

Voici ma boucle de création des marqueurs :

Code:

//creation marqueurs                
                
AutoSizeAnchored = OpenLayers.Class(OpenLayers.Popup.Anchored, {            'autoSize': true});

 
var longlat, popupClass, popupContentHTML;
for (i = 0; i < coordx.length-1; i++) 
{
nom_couche = new OpenLayers.Layer.Markers();
map.addLayer(nom_couche);  
longlat = new OpenLayers.LonLat(coordx[i], coordy[i]).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
popupClass = AutoSizeAnchored;
popupContentHTML = description[i];
addMarker(longlat, popupClass, popupContentHTML);

function addMarker(longlat , popupClass, popupContentHTML, closeBox, overflow) {
            var feature = new OpenLayers.Feature(nom_couche, longlat ); 
            feature.closeBox = closeBox;
            feature.popupClass = popupClass;
            feature.data.popupContentHTML = popupContentHTML;
            feature.data.overflow = (overflow) ? "auto" : "hidden";
                    
            var marker = feature.createMarker();

            var markerClick = function (evt) {
                if (this.popup == null) {
                    this.popup = this.createPopup(this.closeBox);
                    map.addPopup(this.popup);
                    this.popup.show();
                } else {
                    this.popup.toggle();
                }
                currentPopup = this.popup;
                OpenLayers.Event.stop(evt);
            };
            marker.events.register("mousedown", feature, markerClick);
            nom_couche.addMarker(marker);
            
}
}

Merci d'avance.

Dernière modification par julien38 (Fri 19 October 2012 19:10)

Hors ligne

 

Pied de page des forums

Powered by FluxBB