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!

Pages: 1

 

#1 Fri 31 May 2013 11:08

Achref_geo
Participant actif
Date d'inscription: 19 Feb 2012
Messages: 107

OpenLayers LayerSwitcher (en HTML)

Bonjour à tous,

Je souhaite dans mon application créer une légende HTML personnalisée, avec les icônes et en même temps elle gère l'affichage de mes couches vecteurs (au lieu du layerSwitcher).
J'ai essayé avec quelque chose comme ça :

Code:

<aside style="position:absolute;top:100px;left:950px;">
<form>
<input checked="checked" type="checkbox"  value="" onclick="map.addLayer(train);"/><label for="acces_01" >Réseau du bus</label>
<input checked="checked" type="checkbox"  value="" onclick="map.addLayer(stations);"/><label for="acces_01" >Stations de bus</label>
</form>    
</aside>

Mais ça n'a pas marché et la console m'envoi : "train is undifined"...
quelqu'un peut me corriger ?

Merci d'avance

Hors ligne

 

#2 Fri 31 May 2013 12:04

simon_g
Participant assidu
Lieu: Paris
Date d'inscription: 4 Oct 2006
Messages: 195
Site web

Re: OpenLayers LayerSwitcher (en HTML)

Bonjour,

Est-ce que ton objet map est défini globalement?

Sans l'intégralité du code, ca va être difficile de t'aider. Tu peux le poster sur http://jsfiddle.net/ par exemple

Dernière modification par simon_g (Fri 31 May 2013 12:04)

Hors ligne

 

#3 Fri 31 May 2013 12:30

Achref_geo
Participant actif
Date d'inscription: 19 Feb 2012
Messages: 107

Re: OpenLayers LayerSwitcher (en HTML)

Bonjour simon_g,

Tout d'abord merci pour ta disponibilité, si ça va mieux aider je poste mon le complet :

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>
        <title>GeoExt Popup Example</title>
        <style>
  #map {
     width: 900px;
     height: 500px;
      }
aside
{
position: relative;
width: 200px;
height: 200px;
background-color: #7FC6BC;
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 10px;
color: white;
font-size: 0.9em;
}
</style>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script>
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css" />
        <script src="http://mapquery.org/lib/openlayers/lib/OpenLayers.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://mapquery.org/lib/openlayers/theme/default/style.css"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="http://gis.nyc.gov/js-lib/geoext/1.0/lib/GeoExt/widgets/Popup.js"></script>
        <script type="text/javascript" src="http://localhost/MonTP/Lib/GeoExt/script/GeoExt.js"></script>
        <link rel="stylesheet" href="jquery-ui-1.8.14.custom.css" type="text/css">
        <script src="jquery-1.5.1.min.js"></script>
        <script src="jquery-ui-1.8.14.custom.min.js"></script>    </head>
        <script type="text/javascript">
        
        
//var popup, LONGUEUR, DES_LIGNE, NOM_RUE, PROP_LIGNE, OBS ;
//OpenLayers.Theme   = "http://localhost/MonTP/Lib/OpenLayers-2.12/theme/default/style.css";
OpenLayers.ImgPath = "http://localhost/MonTP/Lib/OpenLayers-2.12/img/";
    Ext.onReady(function() {
    
     var options = {
                    projection: new OpenLayers.Projection("EPSG:900913"),
                    controls: [new OpenLayers.Control.PanZoomBar(),                    
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.KeyboardDefaults(),
                        new OpenLayers.Control.Scale(),
                        new OpenLayers.Control.Attribution()  ],
                    maxResolution: 156543.0399,
                    numZoomLevels: 15,
                    maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34)
                   
                };
  var map = new OpenLayers.Map('map', options);
    
    var osmLayer = new OpenLayers.Layer.OSM("OpenStreetMap", "http://tile.openstreetmap.org/${z}/${x}/${y}.png", {
        'sphericalMercator': true
    });
   
     
    // create a vector layer, add a feature into it
    var train = new OpenLayers.Layer.Vector("ligne", {
                projection: new OpenLayers.Projection("EPSG:4326"),
                strategies: [new OpenLayers.Strategy.Fixed()],
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "http://localhost/OSM/data/trn.geojson",
                    format: new OpenLayers.Format.GeoJSON()
                }),
              'styleMap': new OpenLayers.StyleMap({
              'default': new OpenLayers.Style(
                  OpenLayers.Util.applyDefaults(
                      {'strokeColor': 'red', "strokeWidth": 4,'fillOpacity': 1},
                      OpenLayers.Feature.Vector.style['default']
                  )
              )
          })
            });        
    
         var station = new OpenLayers.Layer.Vector("Stations", {
                projection: new OpenLayers.Projection("EPSG:4326"),
                strategies: [new OpenLayers.Strategy.Fixed()],
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "http://localhost/PFE/st.gml",
                    format: new OpenLayers.Format.GML()
                }),
              'styleMap': new OpenLayers.StyleMap({
              'default': new OpenLayers.Style(
                  OpenLayers.Util.applyDefaults(
                      {'fillOpacity': 0.8,
                      externalGraphic: 'http://localhost/PFE/bus_icon/3.png'},
                      OpenLayers.Feature.Vector.style['default']
                  )
              )
          })
            });
                
    map.addLayer(osmLayer);
//    map.addLayer(train);
//    map.addLayer (station);
                map.setCenter(new OpenLayers.LonLat(10.2,36.8) 
                              .transform(
                                new OpenLayers.Projection("EPSG:4326"), 
                                new OpenLayers.Projection("EPSG:900913")
                              ), 12
                            );
                            
            });                
</script>
    </head>
    <body>
        <h1>Popup Example</h1>
        <div id="container"></div>
        <div id="diva" style="top:100px;left:950px; width: 200px;" ></div>
        <div id="map">
        </div>
        
<aside style="position:absolute;top:100px;left:950px;">
<form>
<input checked="checked" type="checkbox"  value="" onclick="map.addLayer(train);"/><label for="acces_01" >Réseau du bus</label><br>
<input checked="checked" type="checkbox"  value="" onclick="map.addLayer(station);"/><label for="acces_01" >Stations de bus</label>
</form>    
</aside>

</html>

J'espère que ça sera plus claire

Hors ligne

 

#4 Mon 03 June 2013 09:58

Achref_geo
Participant actif
Date d'inscription: 19 Feb 2012
Messages: 107

Re: OpenLayers LayerSwitcher (en HTML)

Bonjour,

Problème résolu avec cet exemple : http://geo.dianacht.de/tests/extlayer2.html

Bonne journée à tous

Hors ligne

 

 

Pages: 1

Pied de page des forums

Powered by FluxBB