S'abonner à un flux RSS
MediaWiki:GeoportalSaisie.js
De WikiRésilience
Note : après avoir enregistré vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : Maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac) ;
- Google Chrome : Appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac) ;
- Internet Explorer : Maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ;
- Opera : Videz le cache dans Outils → Préférences.
/* * Copyright (c) 2008-2013 Institut National de l'information Geographique et forestiere France, released * under the BSD license. */ /** * Property: viewer * {<Geoportal.Viewer>} the viewer global instance. */ viewer= null; /** * Function: initMap * Load the application. Called when all information have been loaded by * <loadAPI>(). */ function initMap() { //The api is loaded at this step //L'api est chargée à cette étape //add translations translate(); //options for creating viewer: var options= { // default value // valeur par défaut //mode:'normal', // default value // valeur par défaut //territory:'FXX', // default value // valeur par défaut //displayProjection:'IGNF:RGF93G' // only usefull when loading external resources // utile uniquement pour charger des resources externes */ //proxy:'/geoportail/api/xmlproxy'+'?url=' zoom:7 }; // viewer creation of type <Geoportal.Viewer> // création du visualiseur du type <Geoportal.Viewer> // HTML div id, options viewer= new Geoportal.Viewer.Default('viewerDiv', OpenLayers.Util.extend( options, // API keys configuration variable set by // <Geoportal.GeoRMHandler.getConfig> // variable contenant la configuration des clefs API remplie par // <Geoportal.GeoRMHandler.getConfig> window.gGEOPORTALRIGHTSMANAGEMENT===undefined? {'apiKey':'1711091050407331029'} : gGEOPORTALRIGHTSMANAGEMENT) ); if (!viewer) { // problem ... OpenLayers.Console.error(OpenLayers.i18n('new.instance.failed')); return; } viewer.addGeoportalLayers([ 'ORTHOIMAGERY.ORTHOPHOTOS', 'GEOGRAPHICALGRIDSYSTEMS.MAPS'], { }); viewer.getMap().setCenterAtLonLat(3.1009, 45.7768, viewer.viewerOptions.defaultZoom); // cache la patience - hide loading image viewer.div.style[OpenLayers.String.camelize('background-image')]= 'none'; viewer.setInformationPanelVisibility(false); viewer.setLayersPanelVisibility(false); viewer.openToolsPanel(false); // on stocke les éléments du formulaire viewer.setVariable('GeoXYFormLon', OpenLayers.Util.getElement('GeoXYFormLon')); viewer.setVariable('GeoXYFormLat', OpenLayers.Util.getElement('GeoXYFormLat')); viewer.setVariable('Description', OpenLayers.Util.getElement('Description')); var pictos= document.getElementsByName('style_picto'); for (var i= 0, l= pictos.length; i<l; i++) { // cross-browser ? pictos[i].onclick= function() { // this===bouton radio viewer.removeVariable('selectedPicto'); viewer.setVariable('selectedPicto', this.value); //console.log("onclick : "+viewer.getVariable('selectedPicto')) ; } if (pictos[i].checked) { viewer.setVariable('selectedPicto', pictos[i].value); //console.log("picto[i].checked : "+viewer.getVariable('selectedPicto')) ; } } var e= OpenLayers.Util.getElement('validation'); e.onclick= savePoint; e= OpenLayers.Util.getElement('remove_feature'); e.onclick= removePoint; e= OpenLayers.Util.getElement('save_layer'); e.onclick= saveLayer; e= OpenLayers.Util.getElement('raz'); e.onclick= hideExport; e= OpenLayers.Util.getElement('layer_kml'); viewer.setVariable('export', e); viewer.getMap().addControl(new OpenLayers.Control.LoadingPanel()); var tbx= viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0]; var searchbar= new Geoportal.Control.SearchToolbar({ div: OpenLayers.Util.getElement(tbx.id+'_search'), geonamesOptions: { setZoom: Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme, layerOptions: { name: 'PositionOfInterest:OPENLS;Geocode', maximumResponses:100, formatOptions: { } } } }); viewer.getMap().addControl(searchbar); /*-------------------------------------------déclaration de vlayer-------------------------------------*/ var vlayer= new OpenLayers.Layer.Vector('dessin',{ externalProjection: OpenLayers.Projection.CRS84.clone(),//projection propre à la couche internalProjection: viewer.getMap().getProjection(),//projection de la carte displayInLayerSwitcher:false,//ne pas afficher dans le gestionnaire des couches supportedFormats:{// formats d'enregistrement (ici uniquement kml) kml:{ formatClass: OpenLayers.Format.KML, options:{ mime: 'application/vnd.google-earth.kml' } } }, supportedProjections:{ kml:['CRS:84'] }, styleMap: new OpenLayers.StyleMap({ // par défaut: le dessin avec le picto sélectionné "default": new OpenLayers.Style( OpenLayers.Util.applyDefaults({ 'externalGraphic': "${getUrl}", 'graphicOpacity': 1.0, 'graphicWidth': 21, 'graphicHeight': 25 }, OpenLayers.Feature.Vector.style["default"]), { context: { getUrl: function(feature){ var url=feature.attributes.pictoUrl; return url; } } } ), // temporaire : on n'affiche rien ! "temporary" : new OpenLayers.Style( OpenLayers.Util.extend({ display:'none' }, OpenLayers.Feature.Vector['temporary']) ), // sélectionné : le dessin avec le marqueur rouge "select": new OpenLayers.Style( OpenLayers.Util.applyDefaults({ 'externalGraphic': 'http://api.ign.fr/geoportail/api/js/2.0.3/img/marker.png', 'graphicOpacity': 0.8, 'graphicWidth': 21, 'graphicHeight': 25 }, OpenLayers.Feature.Vector.style["select"]) ) }, { extendDefault:false } ), eventListeners:{ "featureunselected": function(e) { //console.log(e); if (e.feature.style) { delete e.feature.style; e.feature.style= null; } if (e.feature.popup) { viewer.getMap().removePopup(e.feature.popup); delete e.feature.popup; e.feature.popup= null; } if (e.feature.attributes['saved']===false) { this.destroyFeatures(e.feature) ; raz(); return ; } // Ne pas regenerer le picto //e.feature.attributes.pictoUrl=viewer.getVariable('selectedPicto').value; this.drawFeature(e.feature,'default'); // remise à zéro du formulaire : raz(); }, "beforefeatureadded": function(e) { //this===vlayer===e.feature.layer ! //désélection : viewer.getVariable('selectCntrl').unselectAll(); }, "featureselected": function(e) { //console.log("select"); //this===vlayer===e.feature.layer ! // destruction du style pour utiliser le style de la couche en mode "sélectionné" if (e.feature.style) { delete e.feature.style; e.feature.style= null; } this.drawFeature(e.feature,'select'); //console.log(e.feature); if (!e.feature.attributes.description) { e.feature.attributes.description="Rentrer ma description"; } e.feature.popup= new OpenLayers.Popup.FramedCloud( "pp1000", e.feature.geometry.getBounds().getCenterLonLat(), new OpenLayers.Size(50,70), e.feature.attributes.description, null, true ); viewer.getMap().addPopup(e.feature.popup); //rafraichissement du formulaire de saisie : updateXYForm(e.feature); } } }); viewer.getMap().addLayer(vlayer); viewer.setVariable('points', vlayer); /*-------------------------------------------Controle pour la saisie d'objets(ctrl+mousedown)-------------------------------------*/ var draw_feature= new OpenLayers.Control.DrawFeature( vlayer, OpenLayers.Handler.Point, { autoActivate:true, callbacks:{ done: function (geometry) { //this.layer=== var vlayer= viewer.getVariable('points'); var attributes= { //sauvegarde du type du picto courant: 'pictoUrl' : viewer.getVariable('selectedPicto'), 'description': "", 'saved' : false, 'creation' : true }; // Creer le nouveau point var feature= new OpenLayers.Feature.Vector(geometry, attributes); this.layer.addFeatures([feature]); updateXYForm(feature); viewer.getVariable('selectCntrl').select(feature); } }, handlerOptions:{ keyMask: OpenLayers.Handler.MOD_CTRL } } ); viewer.getMap().addControl(draw_feature); /*-------------------------------------------mise à jour du formulaire-------------------------------------------------------*/ function updateXYForm (feature, pix) { if (!feature || !feature.geometry || !feature.geometry.x || !feature.geometry.y) { return; } var pt= feature.geometry.clone(); if (pt) { pt.transform(viewer.getMap().getProjection(),feature.layer.externalProjection); viewer.getVariable('GeoXYFormLon').value= pt.x; viewer.getVariable('GeoXYFormLat').value= pt.y; viewer.getVariable('Description').value= feature.attributes['description']; viewer.setVariable('selectedPicto', feature.attributes['pictoUrl']) ; //console.log("updateXYForm : "+viewer.getVariable('selectedPicto')) ; var pictos= document.getElementsByName('style_picto'); for (var i= 0, l= pictos.length; i<l; i++) { //console.log(pictos[i].value + ' - ' + feature.attributes['pictoUrl']) ; if (pictos[i].value==feature.attributes['pictoUrl']) { pictos[i].checked= true ; } else { pictos[i].checked= null ; } } delete pt; } } function dragPoi (feature, pix) { viewer.getVariable('selectCntrl').unselectAll(); viewer.getVariable('selectCntrl').select(feature); updateXYForm (feature, pix); } /*-------------------------------------------Controle pour le deplacement----------------------------------*/ var drag_control= new OpenLayers.Control.DragFeature( viewer.getVariable('points'), { onDrag:dragPoi, onComplete:updateXYForm } ); viewer.getMap().addControl(drag_control); drag_control.activate(); /*-------------------------------------------Controle pour la selection d'objets----------------------------------*/ var select_feature= new OpenLayers.Control.SelectFeature( viewer.getVariable('points'), { clickout: true, // Unselect features when clicking outside any feature. Default is true. toggle: true, multiple: false, hover: false, toggleKey: null, // ctrl key removes from selection multipleKey: null, // shift key adds to selection box: false, unselect: function(feature) { // si on est en création d'un point, le mode clickout appelle // unselect, ce qu'on ne veut pas. if (feature.attributes.creation===true) { feature.attributes.creation= false ; return ; } var layer = feature.layer; // Store feature style for restoration later this.unhighlight(feature); OpenLayers.Util.removeItem(layer.selectedFeatures, feature); layer.events.triggerEvent("featureunselected", {feature: feature}); this.onUnselect.call(this.scope, feature); } } ); viewer.getMap().addControl(select_feature); select_feature.activate(); viewer.setVariable('selectCntrl', select_feature); } /** * Function: loadAPI * Load the configuration related with the API keys. * Called on "onload" event. * Call <initMap>() function to load the interface. */ function loadAPI() { // wait for all classes to be loaded // on attend que les classes soient chargées if (checkApiLoading('loadAPI();',['OpenLayers','Geoportal','Geoportal.Viewer','Geoportal.Viewer.Default'])===false) { return; } // load API keys configuration, then load the interface // on charge la configuration de la clef API, puis on charge l'application Geoportal.GeoRMHandler.getConfig(['1711091050407331029'], null,null, { onContractsComplete: initMap }); } // assign callback when "onload" event is fired // assignation de la fonction à appeler lors de la levée de l'évènement // "onload" window.onload= loadAPI; /*-------------------------------------------Réinitialisation du formulaire---------------------------------------*/ function raz(){ viewer.getVariable('Description').value= ""; viewer.getVariable('GeoXYFormLon').value= ""; viewer.getVariable('GeoXYFormLat').value= ""; hideExport(); } /*-------------------------------------------Réinitialisation du formulaire---------------------------------------*/ function hideExport(){ viewer.getVariable('export').value= ""; viewer.getVariable('export').style.display= 'none'; } /*-------------------------------------------validation du formulaire---------------------------------------------*/ function savePoint(){ var vlayer= viewer.getVariable('points'); if (vlayer.selectedFeatures) { if (vlayer.selectedFeatures.length>0) { vlayer.selectedFeatures[0].attributes['description']= viewer.getVariable('Description').value; vlayer.selectedFeatures[0].popup.contentHTML = viewer.getVariable('Description').value; vlayer.selectedFeatures[0].attributes['saved']= true ; vlayer.selectedFeatures[0].attributes.pictoUrl= viewer.getVariable('selectedPicto'); //console.log("savePoint : "+viewer.getVariable('selectedPicto')) ; vlayer.selectedFeatures[0].popup.draw(); } } } /*-------------------------------------------Suppression du point selectionné-------------------------------------*/ function removePoint() { var vlayer= viewer.getVariable('points'); if (vlayer.selectedFeatures) { if (vlayer.selectedFeatures.length>0) { if (vlayer.selectedFeatures[0].style) { delete vlayer.selectedFeatures[0].style; vlayer.selectedFeatures[0].style= null; } if (vlayer.selectedFeatures[0].popup) { viewer.getMap().removePopup(vlayer.selectedFeatures[0].popup); delete vlayer.selectedFeatures[0].popup; vlayer.selectedFeatures[0].popup= null; } vlayer.destroyFeatures(vlayer.selectedFeatures[0]); } } raz(); } /*-------------------------------------------Enregistrement des points--------------------------------------------*/ function saveLayer(){ //je recupère tous les points de cette couche var vlayer= viewer.getVariable('points'); var all_features= vlayer.features.slice(0); var prj=vlayer.supportedProjections['kml'][0]; var prt= true; var opts= OpenLayers.Util.extend({},vlayer.supportedFormats['kml'].options); OpenLayers.Util.applyDefaults(opts,{ internalProjection: viewer.getMap().getProjection().clone(), externalProjection: new OpenLayers.Projection(prj) }); var fw= new vlayer.supportedFormats['kml'].formatClass(opts); var str= fw.write(all_features,prt); var center = viewer.getMap().getCenter(); var zomm = viewer.getMap().getZoom(); var projIni = viewer.getMap().getProjection(); var projGeo = new OpenLayers.Projection("EPSG:4326"); center.transform( projIni, projGeo); var lat = center.lat ; var lon = center.lon ; var str2="<geoportal:map\n" +" instance=\"map1\" \n" +" width=\"400px\" height=\"400px\" \n" +" defaultLayers=\"['ORTHOIMAGERY.ORTHOPHOTOS','GEOGRAPHICALGRIDSYSTEMS.MAPS']\" \n" +" defaultLayersOptions=\"{'GEOGRAPHICALGRIDSYSTEMS.MAPS':{opacity:0.5}}\" \n" +" layerSwitcherMode=\"off\" \n" +" toolboxMode=\"off\" \n" +" infoPanelMode=\"false\" \n" +" mode=\"mini\" \n" +" lon="+lon+" lat="+lat+" zoom="+zomm+" \n" +"> \n" +"<html> \n" +" var stylePopup= new OpenLayers.StyleMap({ \n" +" \"default\": new OpenLayers.Style( \n" +" OpenLayers.Util.applyDefaults({ \n" +" 'externalGraphic': \"${getUrl}\", \n" +" 'graphicOpacity': 1.0,'graphicWidth': 21,'graphicHeight': 25 \n" +" }, OpenLayers.Feature.Vector.style[\"default\"]), \n" +" { \n" +" context: { \n" +" getUrl: function(feature){ \n" +" var url=feature.attributes.pictoUrl; \n" +" return url; \n" +" } \n" +" } \n" +" } \n" +" ), \n" +" }); \n" +" var lPopups= new OpenLayers.Layer.Vector(\"Projets\", { \n" +" styleMap:stylePopup, opacity:1.0, visibility:true \n" +" }); \n" +" map1.getMap().addLayer(lPopups); \n" +"\n" +" var clickOptions= { \n" +" onSelect: function(f) { \n" +" if (f.attributes.description) { \n" +" f.popup= new OpenLayers.Popup.FramedCloud( \n" +" \"id\", \n" +" f.geometry.getBounds().getCenterLonLat(), \n" +" new OpenLayers.Size(50,50), \n" +" f.attributes.description, null, true \n" +" ); \n" +" map1.getMap().addPopup(f.popup); \n" +" } \n" +" }, \n" +" onUnselect: function (f) { \n" +" if (f.popup) { \n" +" map1.getMap().removePopup(f.popup); \n" +" delete f.popup; \n" +" } \n" +" }, \n" +" autoActivate: true \n" +"}; \n" +"var vectorLayers= map1.getMap().getLayersByClass('OpenLayers.Layer.Vector'); \n" +"var clickControl= new OpenLayers.Control.SelectFeature(vectorLayers, clickOptions); \n" +"map1.getMap().addControl(clickControl); \n"; for (var i=0; i<all_features.length; i++) { var af=all_features[i]; if (af.attributes.saved==false) {continue ;} var pt = af.geometry.getCentroid().transform(projIni, projGeo); str2 += "var pt = new OpenLayers.Geometry.Point("+pt.x+","+pt.y+").transform(OpenLayers.Projection.CRS84,map1.getMap().getProjection()); \n" ; str2 += "var f = new OpenLayers.Feature.Vector(pt); \n" ; str2 += "f.attributes.description = \""+af.attributes.description +"\";\n" ; str2 += "f.attributes.pictoUrl = \""+af.attributes.pictoUrl +"\";\n" ; str2 += "lPopups.addFeatures([f]); \n" ; } str2+="</html> \n" +"</geoportal:map> \n"; viewer.getVariable('export').value= str2; viewer.getVariable('export').style.display= 'block'; }
