#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
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