Le contenu du projet quickstart
Ouvrez les fichiers quickstart.html et quickstart.js
• Contenu du quickstart.html:
> la div dans laquelle sera insérée la visualisation:
<div id="viewerDiv"></div>
> Le chargement du code source de l'API:
<script type="text/javascript"
src="http://api.ign.fr/geoportail/api/js/latest/GeoportalExtended.js">
</script>
• Fonctionnement du quickstart.js:
Lorsque l'explorateur a fini de charger la page, on appelle la fonction loadAPI:
window.onload= loadAPI;
Cette fonction vérifie que les bonnes classes sont chargées puis appelle la méthode Geoportal.GeoRMHandler.getConfig en lui passant en paramètre la liste des clés api, l'URL du service d'autoconfiguration ainsi que la méthode qui sera appelée une fois la configuration retournée (fonction dite de callback), ici : initMap:
function loadAPI() {
if (checkApiLoading('loadAPI();',['OpenLayers','Geoportal',
'Geoportal.Viewer','Geoportal.Viewer.Default'])===false) {
return;
}
Geoportal.GeoRMHandler.getConfig(['YOUR_APIKEY'],
null,null, {onContractsComplete: initMap});
}
La fonction initMap charge la carte dans la div dont l'identifiant est 'viewerDiv'. Elle crée pour cela une instance de la classe Geoportal.Viewer.Default avec en paramètre cet identifiant et un jeu d'options:
var options= {
territory:'FXX',
mode:'normal'
};
viewer= new Geoportal.Viewer.Default
('viewerDiv', OpenLayers.Util.extend(options));
Ensuite, on ajoute une couche Géoportail à cette visualisation par l'intermédiaire de son identifiant Géoportail que l'on retouve ici:
viewer.addGeoportalLayers(['ORTHOIMAGERY.ORTHOPHOTOS']);
Puis on centre la visualisation et on adapte le niveau de zoom:
viewer.getMap().setCenterAtLonLat(2.418611,48.842222,12);
Appel de la fonction loadAPI
Répondre avec citation
Partager