480 likes | 630 Views
Programmation Web : API Google Maps v.3 Couches cartographiques. Jérôme CUTRONA jerome.cutrona@univ-reims.fr. Site Google Maps. Google Maps http://maps.google.fr Cartes et plans interactifs HTML / AJAX / JavaScript
E N D
Programmation Web :API Google Maps v.3Couches cartographiques Jérôme CUTRONA jerome.cutrona@univ-reims.fr Programmation Web 2013-2014
Site Google Maps • Google Maps • http://maps.google.fr • Cartes et plans interactifs HTML / AJAX / JavaScript • Initié par Google en 2004 aux Etats Unis, couvre aujourd’hui tout le globe (ainsi que la lune et mars…) Programmation Web 2013-2014
API Google Maps • API Maps: Application Programming Interface • Fournie par Google • Bibliothèque de fonctionnalités en JavaScript • Intégration de cartes dans des pages web • Permet le paramétrage des cartes • Fonctionnalités / vues personnalisées possibles • JavaScript : programmation pour navigateur (Firefox, Internet Explorer, Opera, Safari, …) • Page web intégrant une carte : document HTML contenant un programme d’interaction Programmation Web 2013-2014
Intégration des cartes dans un site Programmation Web 2013-2014 • L’API permet l’intégration de cartes dans un site • Personnalisation possible : • Types de carte Google (plan, satellite, relief) • Calcul d’itinéraires routiers • Ajout de (quelques) marqueurs / polygones • Couches de cartographie personnalisées
Le monde selon mon GPS • Positionnement bidimensionnel sur le globe • Latitude φ et longitude λ Source de l’illustration: http://commons.wikimedia.org Programmation Web 2013-2014
Le monde selon Google Maps • Espace tridimensionnel d’images • Image 2 dimensions (x et y) • Grandissement 3ème dimension (z) • Dallage de la surface terrestre • Images 256 pixels × 256 pixels = Dalles • Coordonnées en pixels • Niveaux de grandissement • Multiplication ou division par 2 • 1 image 256×256 au grandissement z= 4 images 256×256 au grandissement z+1 Programmation Web 2013-2014
Le monde selon Google Maps • z=0 (grandissement) 256 pixels 256 pixels Dalle 0, 0 Programmation Web 2013-2014
Le monde selon Google Maps • z=1 Dalle 0, 0 Dalle 1, 0 256 pixels 256 pixels 256 pixels 256 pixels Dalle 0, 0 Dalle 0, 1 Dalle 1, 1 Programmation Web 2013-2014
Le monde selon Google Maps • z=2 0, 0 1, 0 2, 0 3, 0 256 p 256 p 256 p 256 p 256 p 256 p 256 p 256 p 0, 1 1, 1 2, 1 3, 1 0, 2 1, 2 2, 2 3, 2 0, 3 1, 3 2, 3 3, 3 Programmation Web 2013-2014
Le monde selon Google Maps • Quantité de données et résolution Programmation Web 2013-2014
Lien coordonnées Google Maps / GPS • Projection des points du globe sur un plan • Projection de Mercator • X = (λ + 180) / 360 • Y=0,5 - log((1+sin(φ/180×π)) / (1-sin(φ/180×π))) /4×π • Projection des points du plan sur le globe • λ=360 × X - 180 • φ=360 × atan(exp(π×(1-2×Y))) / π – 90 • Adaptation à Google Maps • Prise en compte du grandissement z • Introduction d’un facteur 2z Programmation Web 2013-2014
Objets proposés pour les conversions Programmation Web 2013-2014 /* Classe abstraite de gestion d'un point 2D aux coordonnées entières */ abstractclass Point { … /* Dalle cartographique */ classTileextends Point { … /* Un pixel vu par ses coordonnées */ class Pixel extends Point { … /* Pixel dans une dalle cartographique */ classPixelInTile{ … /* Coordonnées GPS */ classLatLng{ …
Classe Point Programmation Web 2013-2014 /* * Classe abstraite de gestion d'un point 2D aux coordonnées entières */abstractclass Point {/* * @var int abscisse */protected$_x ;/* * @var int ordonnée */protected$_y ;/* * Constructeur * @param $x abscisse * @param $y ordonnée */publicfunction__construct($x=0, $y=0){$this->set($x, $y) ;}
Classe Point /* * Accesseur ordonnée * @return int */publicfunction getY(){return$this->_y ;} /* * Conversion en chaîne * de caractères */publicabstract function__tostring() ;} Programmation Web 2013-2014 /* * Réaffecteur * @param $x abscisse * @param $y ordonnée * @return void */publicfunction set($x, $y){$this->_x =(int)$x ;$this->_y =(int)$y ;}/* * Accesseur abscisse * @return int */publicfunction getX(){return$this->_x ;}
Classe Tile Programmation Web 2013-2014 /* * Dalle cartographique */class Tile extends Point {/* * @var int Largeur d'une dalle */privatestatic$_tileWidth=256 ;/* * @var int Hauteur d'une dalle */privatestatic$_tileHeight=256 ;/* * Conversion en chaîne de caractères */publicfunction__tostring(){return "Tile[{$this->_x}, {$this->_y}]" ;}
Classe Tile Programmation Web 2013-2014 /* * Accesseur à la largeur d'une dalle * @return int */publicstaticfunction getWidth(){returnself::$_tileWidth ;} /* * Réaffecteur de la largeur d'une dalle * @param $tileWidth Nouvelle largeur */publicstaticfunction setTileWidth($tileWidth){self::$_tileWidth=(int)$tileWidth ;}
Classe Tile Programmation Web 2013-2014 /* * Accesseur à la hauteur d'une dalle * @return int */publicstaticfunction getHeight(){returnself::$_tileHeight ;}/* * Réaffecteur de la hauteur d'une dalle * @param $tileWidth Nouvelle largeur */publicstaticfunction setTileHeight($tileHeight){self::$_tileHeight=(int)$tileHeight ;}}
Classe Pixel Programmation Web 2013-2014 /* * Un pixel vu par ses coordonnées */class Pixel extends Point {/* * Conversion en chaîne de caractères */publicfunction__tostring(){return "Pixel[{$this->_x}, {$this->_y}]" ;}}
Classe PixelInTile Programmation Web 2013-2014 /* * Pixel dans une dalle cartographique */class PixelInTile {/* * @var Tile Dalle cartographique */private$_tile ;/* * @var Pixel Pixel par rapport à la dalle cartographique */private$_pixel ; /* * Conversion en chaîne de caractères */publicfunction__tostring(){return "PixelInTile{{$this->_tile}, {$this->_pixel}}" ;}
Classe PixelInTile Programmation Web 2013-2014 /* * Constructeur * @param $tx abscisse de la dalle * @param $ty ordonnée de la dalle * @param $px abscisse du pixel * @param $py ordonnée du pixel */publicfunction PixelInTile($tx=0, $ty=0, $px=0, $py=0){$this->_tile =new Tile($tx, $ty) ;$this->_pixel =new Pixel($px, $py) ;}/* * Réaffecteur de la dalle * @param $tile Nouvelle dalle */publicfunction setTile(Tile $tile){$this->_tile =$tile ;}
Classe PixelInTile Programmation Web 2013-2014 /* * Réaffecteur du pixel * @param $tile Nouveau dixel */publicfunction setPixel(Pixel $pixel){$this->_pixel =$pixel ;}/* * Accesseur à la dalle * @return Tile */publicfunction getTile(){return$this->_tile ;}/* * Accesseur au pixel * @return au Pixel */publicfunction getPixel(){return$this->_pixel ;}
Classe PixelInTile Programmation Web 2013-2014 /* * Coordonnées GPS du pixel par Rapport à la dalle à un certain niveau de zoom * @param $zoom Le niveau de zoom * @return LatLng */publicfunction toLatLng($zoom){$degree_per_pixel=360./(1<<$zoom)/ Tile::getWidth() ;$longitude=$this->_pixel->getX()*$degree_per_pixel +$this->_tile->getX()*(360./(1<<$zoom)) ;$longitude-=180 ;$iy=$this->_tile->getY() +(float)$this->_pixel->getY()/ Tile::getHeight() ;$iy=pi()*(1-2*$iy/(float)(1<<$zoom)) ;$latitude=atan(exp($iy))*360./pi()-90. ;returnnew LatLng($latitude, $longitude) ;}}
Classe LatLng Programmation Web 2013-2014 /* * Coordonnées GPS */class LatLng {/* * @var int Latitude */private$_lat ;/* * @var int Longitude */private$_lng ;/* * Constructeur * @param $lat Latitude * @param $lng Longitude */publicfunction__construct($lat=0, $lng=0){$this->set($lat, $lng) ;}
Classe LatLng Programmation Web 2013-2014 /* * Accesseur à la latitude * @return int */publicfunction getLat(){return$this->_lat ;}/* * Accesseur à la longitude * @return int */publicfunction getLng(){return$this->_lng ;}/* * Conversion en chaîne de caractères */publicfunction__tostring(){return "GPS[{$this->getLat()}, {$this->getLng()}]" ;}
Classe LatLng Programmation Web 2013-2014 /* * Réaffecteur * @param $lat latitude * @param $lon longitude * @return void */publicfunction set($lat, $lng){$this->_lat =(float)$lat ;$this->_lng =(float)$lng ;}/* * Conversion en dalle * @return Tile */publicfunction toTile($zoom){returnnew Tile(floor($this->xReal($zoom)),round($this->yReal($zoom))) ;}
Classe LatLng Programmation Web 2013-2014 /* * Conversion en pixel dans une dalle * @return PixelInTile */publicfunction toPixelInTile($zoom){$pit=new PixelInTile() ;$tileXReal=$this->xReal($zoom) ;$tileX=floor($tileXReal) ;$pixelX=floor(($tileXReal-$tileX)* Tile::getWidth()) ;$tileYReal=$this->yReal($zoom) ;$tileY=round($tileYReal) ;$pixelY=floor(($tileYReal-$tileY)* Tile::getHeight()) ;$pit->getTile()->set($tileX, $tileY) ;$pit->getPixel()->set($pixelX, $pixelY) ;return$pit ;}
Classe LatLng Programmation Web 2013-2014 /* * Conversion en pixel dans une dalle de référence * @param $tile Dalle de référence * @param $zoom niveau de zoom * @return Pixel */publicfunction toPixelFromReferenceTile(Tile $tile, $zoom){$pit=$this->toPixelInTile($zoom) ;returnnew Pixel(Tile::getWidth()*($pit->getTile()->getX()-$tile->getX())+$pit->getPixel()->getX(), Tile::getHeight()*($pit->getTile()->getY()-$tile->getY())+$pit->getPixel()->getY()) ;}
Classe LatLng Programmation Web 2013-2014 /* * Calcul de l'abscisse réelle dans le système Mercator * @return float */privatefunction xReal($zoom){return((float)$this->_lng +180.)/360.*(1<<$zoom) ;}/* * Calcul de l'ordonnée réelle dans le système Mercator * @return float */privatefunction yReal($zoom){$latitude=(float)$this->_lat /180.*pi() ;$ty=0.5-log((1.+sin($latitude))/(1.-sin($latitude)))/(4.*pi()) ;return$ty*(1<<$zoom) ;}}
Conversions Mercator vers GPS Programmation Web 2013-2014 Trouver les coordonnées GPS d’un point à partir des coordonnées d’un pixel dans une dalle à un niveau de zoom donné // Construction du PixelInTile $pit=new PixelInTile($tile_x, $tile_y, $pixel_x, $pixel_x) ; // Conversion en coordonnées GPS $latLng=$pit->toLatLng($z) ; // Utilisation des coordonnées GPS $latitude=$latLng->getLat() ; $longitude=$latLng->getLng() ;
Conversions GPS vers Mercator Programmation Web 2013-2014 Trouver les coordonnées Mercator d’un point à un niveau de zoom donné à partir des coordonnées GPS // Construction des coordonnées GPS$latLng =new LatLng($latitude, $longitude) ; // Conversion en PixelInTile$pit=$latLng->toPixelInTile($z) ; // Récupération de la dalle$tile=$pit->getTile() ;// Utilisation des coordonnées de la dalle$tile_x=$tile->getX() ; // tile_x compris entre 0 et 2^$z $tile_y=$tile->getY() ; // tile_y compris entre 0 et 2^$z // Récupération du pixel$pixel=$pit->getPixel() ; // Utilisation des coordonnées du pixel$pixel_x=$pixel->getX() ; // pixel_x compris entre 0 et 255 $pixel_y=$pixel->getY() ; // pixel_y compris entre 0 et 255
Conversions GPS vers Mercator Programmation Web 2013-2014 Trouver les coordonnées Mercator d’un point (coordonnées d’un pixel par rapport à une dalle de référence) à un niveau de zoom donné à partir des coordonnées GPS // Construction des coordonnées GPS$latLng =new LatLng($latitude, $longitude) ; // Construction de la dalle de référence $tile=new Tile($tile_x, $tile_y) ; // Conversion en PixelInTile$pixel=$latLng->toPixelFromReferenceTile($tile, $z) ; // Utilisation des coordonnées du pixel$x=$pixel->getX() ; // x peut être <0 ou >255$y=$pixel->getY() ; // y peut être <0 ou >255
Créer ses propres cartes • Remplacer les fonds de cartes de Google Maps ou ajouter des couches • Créer ses propres fonds de cartes / couches • A partir de coordonnées GPS • A partir d’images (cartes anciennes, cartes géologiques, cartes de densité, logo, …) • A partir de ce que l’on souhaite du moment où cela peut être dessiné dans une image • Travail à réaliser • Fabriquer des images 256px × 256px (dalles) Programmation Web 2013-2014
Fabriquer des dalles • Programmes sur le serveur Web SIG • Capable de fournir des images (dalles) • Pré-calculées • Construites dynamiquement • Les images dépendent du : • numéro de la dalle (X, Y) • niveau de grandissement Z • Relations entre (X,Y,Z) et (latitude, longitude) • Interrogation d’une base de données Programmation Web 2013-2014
Exemples de dalles • Superposition des couches Gestion de la transparence Direction IUT Position IUT Bâtiments Coordonnées dalles Fond de carte Programmation Web 2013-2014
Principe de téléchargement d’une dalle Programmation Web 2013-2014 • Lorsque l’API JavaScript demande une dalle, celle-ci dépend de la couche, du niveau de zoom et des coordonnées de la dalle • Les paramètres nécessaires au téléchargement de la dalle sont donc : • L’URLdu générateur • Les coordonnées X et Y de la dalle • Le niveau de zoom Z • Ainsi, l’URL de la dalle téléchargée est habituellement de la forme :url?x=valeur_X&y=valeur_Y&z=zoom
Intégration d’une couche (JavaScript) Programmation Web 2013-2014 // Création d'une couche var couche = { // Méthode donnant l'URL d'une dalle getTileUrl: function(tileCoord/* coordonnées */, zoom /* niveau de zoom */){ return"tile.php?" + "x=" + tileCoord.x + "&y=" + tileCoord.y + "&z=" + zoom ; }, // Taille de la dalle tileSize: newgoogle.maps.Size(256, 256), // Image PNG ? isPng: true, } // Création d'un type carte vartypeTile = newgoogle.maps.ImageMapType(couche) ; // Ajout du type de carte map.overlayMapTypes.insertAt(0, typeTile) ;
Calcul dynamique de dalles (PHP) Programmation Web 2013-2014 <?phprequire_once 'projection.class.php' ;require_once 'gdimage.class.php' ;// Constantes utilesdefine('posx', 10) ;define('posy', 10) ;define('font', 4) ;define('alpha', 0) ;try{// Contrôle de présence des paramètresif(!isset($_GET['x'], $_GET['y'], $_GET['z'])){thrownewException("Problème de paramètres") ;}$x=(int)$_GET['x'] ;$y=(int)$_GET['y'] ;$z=(int)$_GET['z'] ;
Calcul dynamique de dalles (PHP) Programmation Web 2013-2014 // Valeur maximale des coordonnées de dalle au zoom $z$tiles=1<<$z ;$x=($x%$tiles+$tiles)%$tiles ;$y=($y%$tiles+$tiles)%$tiles ;// Création d'un image aux dimensions d'une dalle$im= GDImage::createFromSize(Tile::getWidth(), Tile::getHeight()) ;// Gestion de la transparence$im->saveAlpha(true) ;$im->alphaBlending(false) ;$couleur_texte=$im->colorAllocate(255, 255, 255) ;$couleur_fond=$im->colorAllocateAlpha(0, 0, 0, 127) ;// Remplissage$im->filledRectangle(0, 0, $im->sx()-1, $im->sy()-1, $couleur_fond) ;$im->rectangle(0, 0, $im->sx()-1, $im->sy()-1, $couleur_texte) ;
Calcul dynamique de dalles (PHP) Programmation Web 2013-2014 $i=0 ;// Coordonnées de la dalle$texte= "dalle ($x, $y) @$z" ;$im->string(font, posx, posy +$i++* GDImage::fontHeight(font), $texte, $couleur_texte) ;// Coordonnées GPS de la dalle$pit=new PixelInTile($x, $y, 0, 0) ;$latLng=$pit->toLatLng($z) ;$texte= "coord ({$latLng->getLat()}, {$latLng->getLng()})" ;$im->string(font, posx, posy +$i++* GDImage::fontHeight(font), $texte, $couleur_texte) ;/* Recalcul des coordonnées de dalle à partir des coordonnées GPS pour valider les transformations */$pit2=$latLng->toPixelInTile($z) ;$tile=$pit2->getTile() ;
Calcul dynamique de dalles (PHP) Programmation Web 2013-2014 $texte= "pixel ({$tile->getX()}, {$tile->getY()})" ;$im->string(font, posx, posy +$i++* GDImage::fontHeight(font), $texte, $couleur_texte) ;// Envoi de l'imageheader('Content-Type: image/png') ;$im->png() ;}catch(Exception$e){echo$e->getMessage() ;}
Affichage dynamique d’informations Programmation Web 2013-2014 • L’API JavaScript permet d’obtenir, et donc d’afficher, des informations utiles comme : • Le niveau de zoom actuel • Les coordonnées GPS sous le curseur de la souris • Les coordonnées de la dalle sous le curseur de la souris • Ces informations peuvent être rafraîchies à chaque mouvement de souris :google.maps.event.addListener(map,"mousemove", function(event){… }
Affichage dynamique d’informations Programmation Web 2013-2014 Déplacement de la souris : google.maps.event.addListener(map, "mousemove", function(event){ ??=event.latLng.lat().toFixed(6) ; ??=event.latLng.lng().toFixed(6) ; varworldCoordinate = map.getProjection() .fromLatLngToPoint(event.latLng); varpixelCoordinate = newgoogle.maps.Point( worldCoordinate.x * Math.pow(2, map.getZoom()), worldCoordinate.y * Math.pow(2, map.getZoom())); ??=Math.floor(pixelCoordinate.x / 256) ; ??=Math.floor(pixelCoordinate.y / 256) ; }) ;
Affichage dynamique d’informations Programmation Web 2013-2014 Changement de niveau de zoom : google.maps.event.addListener(map, "zoom_changed", function(){ ?? = map.getZoom() ; }) ; Autres événements déclenchés sur la carte : http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Map
Démonstration • Ajout de couches sur le fond de carte Programmation Web 2013-2014
Démonstration • Ajout de couches sur le fond de carte Programmation Web 2013-2014
Démonstration • Ajout de couches sur le fond de carte Programmation Web 2013-2014