Le portail francophone de la géomatique

geobrie · Wed 03 December 2014 13:03

Bonjour,

Je souhaiterais savoir s'il est possible de définir plusieurs "map.zoomToMaxExtent();" pour avoir la possibilité de zoomer sur différentes parties de la carte, c'est l'utilisateur qui pourra choisir les différentes parties de la carte à afficher (à zoomer) avec par exemple un menu ou des choix à cocher.

Merci

Yves · Wed 03 December 2014 13:58

Bonjour,

Oui, tu peux faire un tableau JavaScript et pour chaque entrée un extent qui sera utilisé dans la méthode zoomToExtent() (et non pas zoomToMaxExtent() ). La liste déroulante permet d'activer la cellule du tableau qui va bien.

C'est plus du JavaScript que du OpenLayers

Code:

var mesExtents = [OpenLayers.Bounds(-180,-90,180,90), OpenLayers.Bounds(-10, 5, 10,6)];

map.zoomToExtent(zoomToExtent[0]);

Y.

geobrie · Wed 03 December 2014 14:18

Bien merci, donc a priori c'est possible, je vais tenter de m'en sortir avec tes explications mais je sens que je vais patauger : D

geobrie · Wed 03 December 2014 15:25

Re bonjour Yves

Bon je t’avoue que je galère un peu, je suis un peu faible en Java, tu pourrais me donner des pistes supplémentaires.

Un grand merci

geobrie · Fri 05 December 2014 17:14

Bonjour,

Je suis désolé mais je vais avoir besoin de votre une fois de plus car je n'ai pas trouver la soulution à mon problème, bon d'accord je ne dois être doué !!!!

Un grand merci pour votre aide

geobrie · Mon 08 December 2014 10:33

Bonjour,

Je suis toujours en panne, quelqu'un aurait-il une idée sur la solution à Yves, loin de moi l'idée de vous demander quelque chose de tout fait mais sur ce coup j'avoue une petite faiblesse.

Merci

PA · Mon 08 December 2014 21:34

Bonsoir,

Le bout de code que vous propose Yves vous montre comment stocker les emprises dans un tableau.

La deuxième ligne est l'instruction en JS pour modifier l'emprise de la carte en utilisant la première valeur [0] du tableau.

Voici un autre exemple (rapidement trouvé) pour vous permettre de comprendre un peu mieux le fonctionnement :
http://forum.webrankinfo.com/javascript … 76449.html

Commencez peut-être par créer des boutons ou des liens et essayer de modifier l'emprise en appelant directement la fonction map.zoomToExtent() avec une valeur d'emprise.

Si vous débutez en JavaScript, il faut commencer par le début :
http://www.w3schools.com/js/
http://www.codecademy.com/en/tracks/javascript

Bon courage

geobrie · Tue 09 December 2014 15:05

Bonjour,

Merci pour cette réponse, je me penche dessus tout de suite.

Merci

geobrie · Wed 10 December 2014 12:20

Bonjour,

Je patine toujours pour trouver la solution. Avec vos différentes pistes j'ai pris la décisions de créer des boutons

Code:

<button onclick="fonction();">Extent 1</button>

qui devront appeler une fonction mais je ne trouve pas d’exemple de ce type de fonction. J'ai bien une piste sur les exemples mis à disposition par le site de Openlayers :
http://dev.openlayers.org/examples/pola … tions.html

Mais je n'ai pas trouvé la méthode pour l'adapter.

Dernière modification par geobrie (Wed 10 December 2014 12:29)

geobrie · Thu 08 January 2015 16:08

Bonjour,

A ce jour je n'ai toujours pas trouvé de solution, auriez-vous une idée ?

Merci

Cornet Jérémie · Fri 09 January 2015 01:50

Bonjour,
Il s'agit de javascript assez basique.
Je vous conseillerai fortement de suivre des tutoriels dédiés au javascript en général puis à openlayers en particulier.

Avec un select par exemple, il faut capturer l'évènement change et envoyer à une fonction dédiée au zoom.
On stocke dans les options les extents sous formes de chaine avec séparateur virgule

Code:

<select onChange="myExtent(this);">
  <option value="-180,-90,180,90">Tout</option>
  <option value="-10, 5, 10,6">Mon zoom</option>
</select>

Code:

function myExtent(my_select){
    //transfo de l'extent sous forme de texte en tableau
    var bounds_coords = my_select.value.split(",");
    
    //On zoome sur cette extent (NB : zoomToExtent accepte comme paramètre un OpenLayers.Bounds ou un tableau des coordonnées des 4 points)
   map.zoomToExtent(bounds_coords);
    
}

geobrie · Fri 09 January 2015 09:40

Bonjour,

Merci pour la réponse. J'ai essayé ce code mais ça ne semble pas fonctionner, je pense que j'ai mal placé les différents éléments, pouvez-vous m'aider. Je suis désolé j'avoue mon incompétence, mais je suis assez coincé par le temps sur ce projet.

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="http://dev.openlayers.org/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://dev.openlayers.org/examples/style.css" type="text/css">
<title>Cartographie</title>

<style type="text/css">
        html, body {
            height: 100%;
        }
        #map {
            width: 100%;
            height: 80%;
            border: 1px solid black;
        }
        .olPopup p { margin:0px; font-size: .9em;}
        .olPopup h2 { font-size:1.2em; }
    </style>

<script src="http://dev.openlayers.org/OpenLayers.js";></script>
<script type="text/javascript"> 
        
function init(){                
                var options = { 
controls: [
               new OpenLayers.Control.LayerSwitcher(),
               
            ],                
                maxExtent: bounds,                
                projection: "EPSG:2154",
                allOverlays: true,
            };

map = new OpenLayers.Map('map', options);/*création d'une carte */

var carte1 = new OpenLayers.Layer.WMS("carte1","http://site.net/cgi-bin/mapserv?map=/home/site/www/propriete/htdocs/propriete.map&",

                       {
                        srs: 'EPSG:2154',
                        layers: 'carte1',
                        transparent: true,
                        format:'image/png',
                        },
                        {isBaseLayer: true, visibility: true}

                    );
var carte3 = new OpenLayers.Layer.WMS("carte2","http://site.net/cgi-bin/mapserv?map=/home/site/www/propriete/htdocs/propriete.map&",

                       {
                        srs: 'EPSG:2154',
                        layers: 'carte2',
                        transparent: true,
                        format:'image/png',
                        },
                        {isBaseLayer: false, visibility: true}
                        );
                        
var carte3 = new OpenLayers.Layer.WMS("carte3","http://site.net/cgi-bin/mapserv?map=/home/site/www/propriete/htdocs/propriete.map&",

                       {
                        srs: 'EPSG:2154',
                        layers: 'carte3',
                        transparent: true,
                        format:'image/png',
                        });
                        
                    
                    map.addLayers([carte1, carte2, carte3]);                    
                   function myExtent(my_select){
                   //transfo de l'extent sous forme de texte en tableau
                   var bounds_coords = my_select.value.split(",");
    
                   //On zoome sur cette extent (NB : zoomToExtent accepte comme paramètre un OpenLayers.Bounds ou un tableau des coordonnées des 4 points)
                   map.zoomToExtent(bounds_coords);}}


</script>
</head>
<h1 id="title">Carte</h1><br />
<body onload="init()"><p> 
</p>
 <div style="width:100%; height:60%;border:1px black solid;"id="map"></div>
 <select onChange="myExtent(this);">
  <option value="820461,6786349,1048185,6915665">Tout</option>
  <option value="820421,6808284,830172,6813734">carte1</option>
</select>
 <a href="javascript:history.back()" class="btn btn-primary">
            <span class="glyphicon glyphicon-circle-arrow-left"></span> Retour
        </a>
</body>
</html>

Merci

geobrie · Mon 12 January 2015 09:15

Bonjour,

J'avoue mon incompétence mais j'ai un réel besoin pour avancer dans mon projet, pourriez-vous me corriger cela me retirerait un grosse épine du pied

UN GRAND MERCI

Cornet Jérémie · Mon 12 January 2015 13:43

Bonjour,

Il vous faut apprendre quelques bases de developpement javascript, a minima

- utilisation de la console javascript du navigateur pour débuguer
http://www.alsacreations.com/astuce/lir … cript.html

- portée des variables (pour savoir où placer myExtent dans ce cas)
http://msdn.microsoft.com/fr-fr/library … 94%29.aspx
NB : en javascript tout est une variable objet donc écrire

Code:

fonction MaFonction(v1){
    
}

équivaut à écrire :

Code:

var MaFonction = function(v1){

}

La portée fonctionne exactement de la même manière pour une fonction que pour une variable.

geobrie · Mon 12 January 2015 14:29

Je suis bien conscient que votre objectif n'est pas de donner des solutions clef en main, mais on ne peut pas être tous des experts. Dans ce projet j'essaye de me débrouiller avec le peu de connaissance que j'ai acquis par mes propres moyens, ce n'est pas mon métier de base et il m'est difficile de passer trop de temps à apprendre le java script, dans un premier temps je doit faire avec les exemples que je glane sur le web. C'est pour cette raison que je me tourne vers vous. Dans un premier temps je suis obligé de me tourner vers vous avec ce travail important pour lequel je vous sollicite.

Merci pour votre aide

geobrie · Mon 12 January 2015 15:41

Help Me Please

Cornet Jérémie · Mon 12 January 2015 23:52

Je ne ferais pas le travail à votre place, ça s'est sûr.

Pour en revenir à votre problème :
Si je parle de la portée des variables c'est parce que vous avez copié la fonction myExtent dans la fonction init ce qui veut dire qu'elle n'est disponible que dans cette fonction. Hors, elle est appelée depuis l'évènement du select donc elle a besoin d'être disponible gloablement.
Il suffit de la déclarer après init pour cela.

Si je vous parle de la console javascript, c'est parce qu'il y a plusieurs petits problèmes dans le code qui vont apparaître dans la console et seront facilement corrigeables. C'est un bien petit investissement de comprendre comment l'utiliser...

Dernière modification par Cornet Jérémie (Tue 13 January 2015 04:27)

geobrie · Tue 13 January 2015 14:36

Un grand merci Jérémie ça fonctionne, je te demande de bien vouloir m'excuser si j'ai été un peu insistant, mais comme tu peux le voir mes connaissances sont assez limitées et mon activité professionnelle ne me laisse pas beaucoup de temps pour acquérir toutes les connaissances que je devrait. En plus je me suis engagé sur ce projet auprès d'un tiers, je n'aurais certainement pas dû, sans mesurer l’importance des connaissances qu'il me fallait.

Merci Jérémie

Communauté	Ressources	L'emploi	Le marché	L'association	Fils RSS
Forum Blogs Wiki Planet Sites amis	Agenda Biblio Fiches AMO-CNIG Paris PCGIS Téléchargements	Offres d'emploi Banque de CV Formations Démarche Métiers	Geo-Entreprises Geo-Communiqué Appels d'offres	L'association Qui sommes-nous ? Nous aider Bienfaiteurs Partenaires Historique Statuts	Tout le site Job Géomatique Services GeoBlogs ...	Faire un don Mentions légales

Le portail francophone de la géomatique

Annonce

#1 Wed 03 December 2014 13:03

Openlayers Différent map.zoomToMaxExtent

#2 Wed 03 December 2014 13:58

Re: Openlayers Différent map.zoomToMaxExtent

Code:

#3 Wed 03 December 2014 14:18

Re: Openlayers Différent map.zoomToMaxExtent

#4 Wed 03 December 2014 15:25

Re: Openlayers Différent map.zoomToMaxExtent

#5 Fri 05 December 2014 17:14

Re: Openlayers Différent map.zoomToMaxExtent

#6 Mon 08 December 2014 10:33

Re: Openlayers Différent map.zoomToMaxExtent

#7 Mon 08 December 2014 21:34

Re: Openlayers Différent map.zoomToMaxExtent

#8 Tue 09 December 2014 15:05

Re: Openlayers Différent map.zoomToMaxExtent

#9 Wed 10 December 2014 12:20

Re: Openlayers Différent map.zoomToMaxExtent

Code:

#10 Thu 08 January 2015 16:08

Re: Openlayers Différent map.zoomToMaxExtent

#11 Fri 09 January 2015 01:50

Re: Openlayers Différent map.zoomToMaxExtent

Code:

Code:

#12 Fri 09 January 2015 09:40

Re: Openlayers Différent map.zoomToMaxExtent

Code:

#13 Mon 12 January 2015 09:15

Re: Openlayers Différent map.zoomToMaxExtent

#14 Mon 12 January 2015 13:43

Re: Openlayers Différent map.zoomToMaxExtent

Code:

Code:

#15 Mon 12 January 2015 14:29

Re: Openlayers Différent map.zoomToMaxExtent

#16 Mon 12 January 2015 15:41

Re: Openlayers Différent map.zoomToMaxExtent

#17 Mon 12 January 2015 23:52

Re: Openlayers Différent map.zoomToMaxExtent

#18 Tue 13 January 2015 14:36

Re: Openlayers Différent map.zoomToMaxExtent

Pied de page des forums