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

Printemps des cartes 2024

Pages: 1

 

#1 Mon 03 May 2010 10:16

plouplou
Participant occasionnel
Date d'inscription: 3 Mar 2010
Messages: 30

[Openlayers] outil mesure

Bonjour,

je suis entrain d'intégrer tous les outils qui me sont nécessaires pour ma solution de webmapping basée sur openlayers et mapserver en observant la documentation générale sur le net et les codes sources des exemples du site d'openlayers. Malheureusement, après avoir réussi à introduire de nombreux outils dans mon fichier html tels que le zoom précedent/suivant, le pan, etc... tous issus des exemples openlayers, je n'arrive pas à intégrer l'outil de mesure développé dans l'exemple suivant :

http://openlayers.org/dev/examples/measure.html

Voici mon fichier html sans l'outil mesure (il fonctionne correctement)

Code:

<html>
<head>
<style type="text/css">
   #map {
        width: 700px;
        height: 600px;
        border: 1px solid black;
        background-color:#7391AD;
        }
   #name {
    height : 20px;
    width : auto;
   }
   #panel {
        right: 0px;
        height: 30px;
        width: 200px;
   }
   #panel div {
        float: left;
        margin: 5px;
   }
   #paneldiv {
            height: 80px;
        }
        #paneldiv div { 
            top: 10px; 
        }
   </style>
  <script src="./OpenLayers-2.9/OpenLayers.js"></script>
  <script type="text/javascript">
             function init() {
        var map;
        var options = { 
        projection: new OpenLayers.Projection("EPSG:27582"),
        displayProjection: new OpenLayers.Projection("EPSG:27582"),
        units: "m",
        numZoomLevels: 18,
        maxResolution: 156543.0339,
        maxExtent: new OpenLayers.Bounds(0, 1776000, 1100000, 2700000) 
        };
// Création du constructeur Map
            map = new OpenLayers.Map('map', options);
// Caractéristiques générales de la carte     
     //Ajout des options graph, zoom + apercu + échelle
            map.addControl(new OpenLayers.Control.PanZoomBar());
            map.addControl(new OpenLayers.Control.OverviewMap());
            map.addControl(new OpenLayers.Control.Scale());
     //ajout des coordonnées de la position du curseur
            map.addControl(new OpenLayers.Control.MousePosition({div: document.getElementById("mouseposition")}));
    //Caracteristiques de la carte
    // (2) Choix des couches
    //couche paWMS
     /* var paWMS = new OpenLayers.Layer.WMS( "OpenLayers WMS","http://192.168.3.85/cgi-bin/mapserv.exe?map=c:/ms4w/Apache/htdocs/cof/mapfile.map&", {layers: 'pa'});*/
    //couche depWFS        
        var depWFS = new OpenLayers.Layer.WFS( "dep WFS","http://192.168.3.85/cgi-bin/mapserv.exe?map=c:/ms4w/Apache/htdocs/cof/mapfile.map&", {typename: 'dep'},{'isBaseLayer':true});
            map.addLayer(/*paWMS,*/depWFS);
            if (!map.getCenter()) {
            map.setCenter(new OpenLayers.LonLat(500000,1800000));}
            
    // création du panneau de controle
    var panel1 = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
            map.addControl(panel1);
        var panel = new OpenLayers.Control.Panel({div: document.getElementById("panel")});
            map.addControl(panel);
    // création un contrôleur de navigation dans l’historique
        var history = new OpenLayers.Control.NavigationHistory();
            map.addControl(history);
            panel.addControls([history.next, history.previous]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            
     //Création du layer Editable de type vecteur
        vlayer = new OpenLayers.Layer.Vector( "Editable" );
     //Ajout du layer à la carte
            map.addLayer(vlayer);
    // Ajout de la barre d'outil de dessin
            map.addControl(new OpenLayers.Control.EditingToolbar(vlayer));
     /*Creation du layer Marker
        markers = new OpenLayers.Layer.Markers("Marker");
            map.addLayer(markers);
    //Creation du Marker
        feature = new OpenLayers.Feature(layer, new OpenLayers.LonLat(0,45));
            marker = feature.createMarker();
            markers.addMarker(marker);
            marker.events.register("mousedown", marker, mousedown);
    //Gestion des evenements
        function mousedown(evt) {
            popup = feature.createPopup(true);
            popup.setContentHTML("France");
            popup.setBackgroundColor("green");
            popup.setOpacity(0.6);
            markers.map.addPopup(popup);
     }*/
 }
  </script>
</head>
  <body onload="init()" >
    <div id="map"></div>
    <div id="mouseposition"></div>
    <div id="panel"></div>
    <div id="paneldiv" class="olControlNavToolbar"></div>
  </body>
</html>

Voici mon fichier html quand je rajoute l'outil mesure:

Code:

<<html>
<head>
<style type="text/css">
   #map {
        width: 700px;
        height: 600px;
        border: 1px solid black;
        background-color:#7391AD;
        }
   #name {
    height : 20px;
    width : auto;
   }
   #panel {
        right: 0px;
        height: 30px;
        width: 200px;
   }
   #panel div {
        float: left;
        margin: 5px;
   }
   #paneldiv {
            height: 80px;
        }
        #paneldiv div { 
            top: 10px; 
        }
         #controlToggle li {
            list-style: none;
        }
        p {
            width: 512px;
        }
        #options {
            position: relative;
            width: 512px;
        }
        #output {
            float: right;
        }
 
        /* avoid pink tiles */
        .olImageLoadError {
            background-color: transparent !important;
        }
   </style>
  <script src="./OpenLayers-2.9/OpenLayers.js"></script>
  <script type="text/javascript">  
   
             function init() {
        var map,measureControls;  
        var options = { 
        projection: new OpenLayers.Projection("EPSG:27582"),
        displayProjection: new OpenLayers.Projection("EPSG:27582"),
        units: "m",
        numZoomLevels: 18,
        maxResolution: 156543.0339,
        maxExtent: new OpenLayers.Bounds(0, 1776000, 1100000, 2700000) 
        };
// Création du constructeur Map
            map = new OpenLayers.Map('map', options);
// Caractéristiques générales de la carte    
     //Ajout des options graph, zoom + apercu + échelle
            map.addControl(new OpenLayers.Control.PanZoomBar());
            map.addControl(new OpenLayers.Control.OverviewMap());
            map.addControl(new OpenLayers.Control.Scale());
     //ajout des coordonnées de la position du curseur
            map.addControl(new OpenLayers.Control.MousePosition({div: document.getElementById("mouseposition")}));
            var sketchSymbolizers = {
                "Point": {
                    pointRadius: 4,
                    graphicName: "square",
                    fillColor: "white",
                    fillOpacity: 1,
                    strokeWidth: 1,
                    strokeOpacity: 1,
                    strokeColor: "#333333"
                },
                "Line": {
                    strokeWidth: 3,
                    strokeOpacity: 1,
                    strokeColor: "#666666",
                    strokeDashstyle: "dash"
                },
                "Polygon": {
                    strokeWidth: 2,
                    strokeOpacity: 1,
                    strokeColor: "#666666",
                    fillColor: "white",
                    fillOpacity: 0.3
                }
            };
            var style = new OpenLayers.Style();
            style.addRules([
                new OpenLayers.Rule({symbolizer: sketchSymbolizers})
            ]);
            var styleMap = new OpenLayers.StyleMap({"default": style});
            
            measureControls = {
                line: new OpenLayers.Control.Measure(
                    OpenLayers.Handler.Path, {
                        persist: true,
                        handlerOptions: {
                            layerOptions: {styleMap: styleMap}
                        }
                    }
                ),
                polygon: new OpenLayers.Control.Measure(
                    OpenLayers.Handler.Polygon, {
                        persist: true,
                        handlerOptions: {
                            layerOptions: {styleMap: styleMap}
                        }
                    }
                )
            };
            
            var control;
            for(var key in measureControls) {
                control = measureControls[key];
                control.events.on({
                    "measure": handleMeasurements,
                    "measurepartial": handleMeasurements
                });
                map.addControl(control);
            }
    //Caracteristiques de la carte
    // (2) Choix des couches
    //couche paWMS
     /* var paWMS = new OpenLayers.Layer.WMS( "OpenLayers WMS","http://192.168.3.85/cgi-bin/mapserv.exe?map=c:/ms4w/Apache/htdocs/cof/mapfile.map&", {layers: 'pa'});*/
    //couche depWFS        
        var depWFS = new OpenLayers.Layer.WFS( "dep WFS","http://192.168.3.85/cgi-bin/mapserv.exe?map=c:/ms4w/Apache/htdocs/cof/mapfile.map&", {typename: 'dep'},{'isBaseLayer':true});
            map.addLayer(/*paWMS,*/depWFS);
            if (!map.getCenter()) {
            map.setCenter(new OpenLayers.LonLat(500000,1800000));}
            
    // création du panneau de controle
    var panel1 = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
            map.addControl(panel1);
        var panel = new OpenLayers.Control.Panel({div: document.getElementById("panel")});
            map.addControl(panel);
    // création un contrôleur de navigation dans l’historique
        var history = new OpenLayers.Control.NavigationHistory();
            map.addControl(history);
            panel.addControls([history.next, history.previous]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            
     //Création du layer Editable de type vecteur
        vlayer = new OpenLayers.Layer.Vector( "Editable" );
     //Ajout du layer à la carte
            map.addLayer(vlayer);
    // Ajout de la barre d'outil de dessin
            map.addControl(new OpenLayers.Control.EditingToolbar(vlayer));
     /*Creation du layer Marker
        markers = new OpenLayers.Layer.Markers("Marker");
            map.addLayer(markers);
    //Creation du Marker
        feature = new OpenLayers.Feature(layer, new OpenLayers.LonLat(0,45));
            marker = feature.createMarker();
            markers.addMarker(marker);
            marker.events.register("mousedown", marker, mousedown);
    //Gestion des evenements
        function mousedown(evt) {
            popup = feature.createPopup(true);
            popup.setContentHTML("France");
            popup.setBackgroundColor("green");
            popup.setOpacity(0.6);
            markers.map.addPopup(popup);
     }*/
 }
 document.getElementById('noneToggle').checked = true;
        }
        
        function handleMeasurements(event) {
            var geometry = event.geometry;
            var units = event.units;
            var order = event.order;
            var measure = event.measure;
            var element = document.getElementById('output');
            var out = "";
            if(order == 1) {
                out += "measure: " + measure.toFixed(3) + " " + units;
            } else {
                out += "measure: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
            }
            element.innerHTML = out;
        }
 
        function toggleControl(element) {
            for(key in measureControls) {
                var control = measureControls[key];
                if(element.value == key && element.checked) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }
        
        function toggleGeodesic(element) {
            for(key in measureControls) {
                var control = measureControls[key];
                control.geodesic = element.checked;
            }
        }
  </script>
</head>
  <body onload="init()" >
    <div id="map"></div>
    <div id="mouseposition"></div>
    <div id="panel"></div>
    <div id="paneldiv" class="olControlNavToolbar"></div>
  </body>
</html>

Je pose donc la question suivante : le problème est il lié à une mauvaise incorporation du code de ma part ou à l'incompatibilité entre eux de certains outils issus des exemples du site d'openlayers.

Merci d'avance pour vos réponses

Dernière modification par plouplou (Mon 03 May 2010 10:35)

Hors ligne

 

#2 Mon 03 May 2010 10:35

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

Re: [Openlayers] outil mesure

Bonjour,

Non il n'y a pas de problème entre les différents contrôles d'OpenLayers à ma connaissance.

Par contre que veux tu dire par "je n'arrive pas à intégrer l'outil de mesure" ? Qu'est ce qui ne fonctionne pas ?

Merci,

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

 

#3 Mon 03 May 2010 10:39

plouplou
Participant occasionnel
Date d'inscription: 3 Mar 2010
Messages: 30

Re: [Openlayers] outil mesure

Merci pour cette première réponse donc c'est bien moi qui n'a pas bien placé le code de l'outil dans mon fichier.

Pour répondre à ta question,

Après avoir rajouté dans mon fichier html le code de l'outil de mesure récupéré via l'exemple ci-dessus du site d'openlayers, il m'est arrivé de plus rien voir du tout, j'ai alors remodifié le fichier et à ce moment les outils déjà installés fonctionnent, je vois l'interface d'utilisation de l'outil de mesure mais il ne fonctionne pas.

Dernière modification par plouplou (Mon 03 May 2010 10:53)

Hors ligne

 

#4 Mon 03 May 2010 11:09

plouplou
Participant occasionnel
Date d'inscription: 3 Mar 2010
Messages: 30

Re: [Openlayers] outil mesure

J'ai trouvé la solution, apriori c'était la taille de la carte défini dans les bornes "style" du fichier html qui posait problème

Code:

#map {
        width: 700px;
        height: 600px;
        border: 1px solid black;
        background-color:#7391AD;
        }

Merci en tout cas pour ton aide

Dernière modification par plouplou (Mon 03 May 2010 11:10)

Hors ligne

 

 

Pages: 1

Pied de page des forums

Powered by FluxBB