|
Mise en place d'un sig web pour le suivi de l'urbanisation cas de la commune de Manouba( Télécharger le fichier original )par Boutheina Hamrouni Faculté des lettres des arts et des humanités de la Manouba - Master professionnel en géomatique 2016 |
2. Présentation de deuxième niveau de développementUne interface cartographique ReadyGXP est composée typiquement par quatre zones : ü Une visionneuse cartographique (Map Window), où la carte est affichée. ü Un panneau de couches (Layers Panel), où la liste des couches ajoutées est affichée. ü Une barre d'outils (Toolbar), outils de navigation (Zoom, Pan), d'exportation... ü Panneau de Légende (Legend Panel), où les styles des couches cochées sont affichés. a) Visionneuse cartographique La principale composante de l'espace de travail GeoExplorer est la Visionneuse cartographique, elle affiche la carte dans sa composition actuelle (superposition des couches cochées). Le contenu de la visionneuse est configuré via le panneau de couches. La composante clé ici c'est la carte (Map), une carte est générée en réunissant ces modules: ü Les Bibliothèques L'en-tête du document charge les fichiers JavaScript et CSS nécessaires et qui doivent être inclus dans la carte. Dans l'élément <head>, la bibliothèque JavaScript OpenLayers sont chargées (OpenLayers.js), suivi par une feuille de style par défaut (style.css) qui spécifie la façon dont les éléments liés à la carte sont organisés. <script src="openlayers/OpenLayers.js"></script> <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css"> ü Déclarations de style OpenLayers comporte une feuille de style par défaut, mais il ne connait pas encore connait la taille de notre Map. Pour cette raison, nous devons aussi inclure une déclaration de style pour réserver de la place sur la page pour notre Map en ajoutant l'élément <style>, la taille est exprimée en px (pixel). <style> #map-id { width: 900px; height: 400px; } </style> ü Code d'initialisation C'est là que nous déterminons le contenu de notre carte (c'est-à-dire les couches), en incluant un élément <script> au fond de notre <body> <script type="text/javascript"> var lon = 5; var lat = 40; var zoom = 5; var map, layer; function init(){ map = new OpenLayers.Map( 'map' ); layer = new OpenLayers.Layer.WMS( "Batiment", "http://localhost:8080/geoserver/Master_pro/wms?" , {layers: 'Batiment',}); map.addLayer(layer); map.addLayer(layer); map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); map.addControl( new OpenLayers.Control.LayerSwitcher() ); } </script> </script> ü Limiter l'affichage du map Ce la nous permet de cadrer notre map sur le territoire dont nous s'occupe, dont la carte sera afficher plein écran var bounds = new OpenLayers.Bounds(12784.276996671299, 87642.6828769998,19704.9701226713, 92017.35342499979); var options = { maxExtent: bounds, maxResolution: 27.033957523437508, controls: [], projection: "EPSG:22391", units: 'm' }; map = new OpenLayers.Map( 'map' , options ); ü Chargement du map La balise Map génère un élément qui va servir comme conteneur avec un attribut Id afin qu'on puisse y faire référence dans notre code. <body onLoad="init()"> <div id="map" class="smallmap"></div> b) Panneau de couches Le panneau de couches affiche une liste de toutes les couches actives dans GeoExplorer. La visibilité est activée par la case à cocher à côté de chaque entrée dans la liste, Il ya deux dossiers dans le panneau, les superpositions et les couches de base (cartes de fond), en plus des outils d'ajout et suppression. Les Overlays sont des couches configurées pour être transparentes afin qu'on puisse les superposer.
var map, layer, layer2 , layer3; function init(){ map = new OpenLayers.Map( 'map' ); layer = new OpenLayers.Layer.WMS( "Batiment", "http://localhost:8080/geoserver/Master_pro/wms?" , {layers: 'Batiment',}); layer2 = new OpenLayers.Layer.WMS( "Zone_d_Equipement", "http://localhost:8080/geoserver/Master_pro/wms?" , {layers: 'Zone_d_Equipement', transparent: 'true'} ); map.addLayer(layer2); layer3 = new OpenLayers.Layer.WMS( "Zone_d_Habitat", "http://localhost:8080/geoserver/Master_pro/wms?" , {layers: 'Zone_d_Habitat', transparent: 'true'} ); map.addLayer(layer3); c) Panneau de légende Le panneau légende affiche les informations de style pour chaque couche visible. Cette liste est générée directement à partir de la requête GetLegendGraphic WMS. Les styles proviennent directement des fichiers SLD affectés aux couches dans GeoServer. d) Barre d'outils (Panel) La barre d'outils contient des boutons qui permettent de réaliser certaines tâches : <style type="text/css"> .olControlMouseDefaultsItemActive { border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px; background-color: blue; background-image: url("OpenLayers-2.11/theme/default/img/pan_on.png");} .olControlMouseDefaultsItemInactive { border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px; background-color: orange; background-image: url("OpenLayers-2.11/theme/default/img/pan_off.png"); } .olControlDrawFeatureItemActive { border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px; background-image: url("OpenLayers-2.11/theme/default/img/draw_line_on.png"); } .olControlDrawFeatureItemInactive { border:2px solid #232323; float:left; height:18px; ü Déclarations de style margin-right:5px; width:18px; background-image: url("OpenLayers-2.11/theme/default/img/draw_line_off.png"); } .olControlZoomBoxItemInactive { border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px; background-color: orange; background-image: url("OpenLayers-2.11/img/drag-rectangle-off.png"); } .olControlZoomBoxItemActive { border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px; background-color: blue; background-image: url("OpenLayers-2.11/img/drag-rectangle-on.png"); } .olControlZoomToMaxExtentItemInactive { border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px; background-image: url("OpenLayers-2.11/img/zoom-world-mini.png"); } .style2 {position:relative; width: 400px; height: 20px; // border: 1px solid #ccc; left:200px; } .olControlZoomInItemInactive { border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px; background-color: blue; background:url("OpenLayers-2.11/img/icon_zoomin.png") ;} .olControlZoomOutItemInactive { background:url("OpenLayers-2.11/img/icon_zoomout.png") no-repeat; border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px; } .olControlZoomOutItemActive { background:url("OpenLayers-2.11/img/icon_zoomout.png") no-repeat; border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px; background-color: orange;} .olControlNavigationHistoryPreviousItemActive { background-position: 0 0; border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px;} .olControlNavigationHistoryPreviousItemInactive { background-position: 0 -24px; border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px;} .olControlNavigationHistoryNextItemActive { border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px;} .olControlNavigationHistoryNextItemInactive { border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px;} .olControlinfobuttonItemActive { background:url("OpenLayers-2.11/img/info.png"); border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px; background-color: orange; } .olControlinfobuttonItemInactive { background:url("OpenLayers-2.11/img/info.png"); border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px;} .olControlButton1ItemActive { background:url("OpenLayers-2.11/img/draw_point_on.png"); border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px;} .olControlButton1ItemInactive { background:url("OpenLayers-2.11/img/draw_point_off.png"); border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px;} .olControlButton2ItemActive { background:url("OpenLayers-2.11/img/draw_line_on.png"); border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px;} .olControlButton2ItemInactive { background:url("OpenLayers-2.11/img/draw_line_off.png"); border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px;} .olControlButton3ItemActive { background:url("OpenLayers-2.11/img/draw_polygon_on.png"); border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px;} .olControlButton3ItemInactive { background:url("OpenLayers-2.11/img/draw_polygon_off.png"); border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px;} .olControlButton4ItemActive { background:url("OpenLayers-2.11/img/zoom-plus-mini.png"); border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px;} .olControlButton4ItemInactive { background:url("OpenLayers-2.11/img/zoom-minus-mini.png"); border:2px solid #232323; float:left; height:18px; margin-right:5px; width:18px;} </style> var external_panel = new OpenLayers.Control.Panel({ div: document.getElementById('panel')}); var control_zoom_in = new OpenLayers.Control.ZoomIn(); var control_zoom_out = new OpenLayers.Control.ZoomOut(); map.addControl(control_zoom_in); map.addControl(control_zoom_out); external_panel.addControls([control_zoom_in, control_zoom_out]); external_panel.addControls([ new OpenLayers.Control.MouseDefaults( {title:'You can use the default mouse configuration'}), zb, new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to the max extent"}) ]); external_panel.addControls([nav.next, nav.previous]); var infobutton = new OpenLayers.Control.Button ({displayClass: 'olControlinfobutton', eventListeners: { 'activate' :ccc, 'deactivate': info_desactive },type: OpenLayers.Control.TYPE_TOGGLE , title: 'Information'}); external_panel.addControls(infobutton); var button1 = new OpenLayers.Control.Button ({displayClass: 'olControlButton1', eventListeners: { 'activate' : pointcreate, 'deactivate': point_desactive },type: OpenLayers.Control.TYPE_TOGGLE ,title: 'Crer un Point'}); external_panel.addControls(button1); var button2 = new OpenLayers.Control.Button ({displayClass: 'olControlButton2', eventListeners: { 'activate' : linecreate, 'deactivate': line_desactive },type: OpenLayers.Control.TYPE_TOGGLE ,title: 'Crer une Line'}); external_panel.addControls(button2); var button3 = new OpenLayers.Control.Button ({displayClass: 'olControlButton3', eventListeners: { ü Code d'initialisation
'activate' : polygoncreate, 'deactivate': polygon_desactive },type: OpenLayers.Control.TYPE_TOGGLE ,title: 'Crer un Polygone'}); external_panel.addControls(button3); var button4 = new OpenLayers.Control.Button ({displayClass: 'olControlButton4', eventListeners: { 'activate' : openform, 'deactivate': hideform },type: OpenLayers.Control.TYPE_TOGGLE ,title: 'recherche'}); external_panel.addControls(button4); map.addControl(external_panel); layer2 = new OpenLayers.Layer.WMS( "Batiment", "http://localhost:8080/geoserver/Master_pro/wms?" , {layers: 'Batiment', transparent: 'true'} ); vector_layer2 = new OpenLayers.Layer.Vector('recherche',{'displayInLayerSwitcher':false}); document.getElementById("overlay3").style.visibility='hidden'; document.getElementById("listelayer").selectedIndex = 0; } function ccc(){ info = { click: new OpenLayers.Control.WMSGetFeatureInfo({ url: 'http://localhost:8080/geoserver/Master_pro/wms', title: 'Identify features by clicking', infoFormat: 'text/html', queryVisible: true })} for (var i in info) { info[i].events.register("getfeatureinfo", this, infobuttonfunc); map.addControl(info[i]); } info.click.activate(); } function infobuttonfunc(response){ doc = response.text; newwindow=window.open("","information","height=250,width=450,toolbar=no,location=no,directories=no,status=yes,scrollbars=yes,resizable=yes","_self"); newwindow.document.write(doc); newwindow.document.close(); newwindow.focus();} function info_desactive (e){ map.events.remove('click');} function pointcreate(){ point= new OpenLayers.Control.DrawFeature(pointLayer,OpenLayers.Handler.Point); map.addControl(point); point.activate();} function point_desactive(){ point.deactivate();} function linecreate(){ line= new OpenLayers.Control.DrawFeature(lineLayer,OpenLayers.Handler.Path); map.addControl(line); line.activate();} function line_desactive(){ line.deactivate();} function polygoncreate(){ polygon= new OpenLayers.Control.DrawFeature(polygonLayer,OpenLayers.Handler.Polygon), map.addControl(polygon); polygon.activate();} function polygon_desactive(){ polygon.deactivate(); } ü Chargement du panel
<div id="panel" class="style2"></div> <div id="panel"></div> Après la création du code le résultat final seras comme le montre la figure ci-dessous (figure 27) :
Source : imprime écran Figure 27 : L'application client |
|
