Pages: 1
- Sujet précédent - [OpenLayers] Creation d'un arbre à couches sans couches WMS ni Json - Sujet suivant
#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
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
Pages: 1
- Sujet précédent - [OpenLayers] Creation d'un arbre à couches sans couches WMS ni Json - Sujet suivant