1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
|
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IGN</title>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
<meta id="SybLatt" name="SybLatt" content=""/>
<meta id="SybLong" name="SybLong" content=""/>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
<style type="text/css">
div#viewerDiv {width:800px; height:600px; background-color:white; background-position:center center; background-repeat:no-repeat;
background-image:url(http://api.ign.fr/geoportail/api/js/latest/theme/geoportal/img/loading.gif);
}
</style>
<script type="text/javascript" src="http://api.ign.fr/geoportail/api/js/latest/Geoportal.js"></script>
<script type="text/javascript">
var iv= " + string(now()) + ";
var markers= new OpenLayers.Layer.Markers("Repères");// créer une couche de markers
window.onload= function() {
iv= Geoportal.load(
'viewerDiv',
['8pfrxq3qu05jvui3e7q4a7kg'],
{place:"Mouacourt"},
16, //zoom level
{//LoaderOptions // ajouter 'overlays:{},' pour ne pas affiche la 'puce' de centrage
layers:['ORTHOIMAGERY.ORTHOPHOTOS','GEOGRAPHICALGRIDSYSTEMS.MAPS'], // charger la couche photos pour qu'elle apparaisse dans le gestionnaire de couches
layersOptions:{'ORTHOIMAGERY.ORTHOPHOTOS':{visibility:false, opacity:0.7}}, // couche photos invisible pour accélérer le chargement
language:'fr',
viewerClass:'Geoportal.Viewer.Default', // utilisation de l'interface 'complete'
onView: function() { // gestion du clic de souris
OpenLayers.Control.Click= OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions:{'single': true, 'double': false, 'pixelTolerance': 0, 'stopSingle': false, 'stopDouble': false},
initialize: function(options) {// Constructor
OpenLayers.Control.prototype.initialize.apply(this,arguments);
this.handlerOptions= OpenLayers.Util.extend({},this.defaultHandlerOptions);
this.handler= new OpenLayers.Handler.Click(this, {'click': this.trigger}, this.handlerOptions);
}, // fin de initialize
trigger: function(e) {
var lonlat= this.map.getLonLatFromViewPortPx(e.xy).transform(this.map.getProjection(), OpenLayers.Projection.CRS84);
document.getElementById("SybLatt").setAttribute("content",lonlat.lat.toString() );
document.getElementById("SybLong").setAttribute("content",lonlat.lon.toString() );
// ajout d'un marker au point cliqué
markers.clearMarkers(); // effacer le marker précédent (quand plusieurs clics)
this.map.addLayer(markers);// attacher la couche de markers à la carte
var size= new OpenLayers.Size(25,25);
var offset= new OpenLayers.Pixel(-5, -20);// -5, -20 pour icone "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png". Par défaut : Pixel(-(size.w/2), -(size.h/2))
var icon = new OpenLayers.Icon('http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png',size,offset);//créer l'icône : lien HTTP plutot que PATH local car pas de pb de déploiement client)
var ll= new OpenLayers.LonLat(lonlat.lon, lonlat.lat);
ll.transform(OpenLayers.Projection.CRS84, this.map.getProjection());
markers.addMarker(new OpenLayers.Marker(ll,icon));
this.map.setCenter(ll);
} // fin de triger
});//fin de OpenLayers.Control.Click
var monClic= new OpenLayers.Control.Click({autoActivate:true});
this.getViewer().getMap().addControl(monClic);
} // fin de onView
}
);
};
</script>
</head>
<body>
<div id="viewerDiv"></div>
</body>
</html> |
Partager