1 / 46

Programmation Web : API Google Maps v.3 Couches cartographiques

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

sasha
Download Presentation

Programmation Web : API Google Maps v.3 Couches cartographiques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Programmation Web :API Google Maps v.3Couches cartographiques Jérôme CUTRONA jerome.cutrona@univ-reims.fr Programmation Web 2013-2014

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

  7. Le monde selon Google Maps • z=0 (grandissement) 256 pixels 256 pixels Dalle 0, 0 Programmation Web 2013-2014

  8. 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

  9. 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

  10. Le monde selon Google Maps • Quantité de données et résolution Programmation Web 2013-2014

  11. 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

  12. 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{ …

  13. 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) ;}

  14. 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 ;}

  15. 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}]" ;}

  16. 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 ;}

  17. 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 ;}}

  18. 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}]" ;}}

  19. 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}}" ;}

  20. 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 ;}

  21. 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 ;}

  22. 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) ;}}

  23. 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) ;}

  24. 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()}]" ;}

  25. 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))) ;}

  26. 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 ;}

  27. 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()) ;}

  28. 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) ;}}

  29. 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() ;

  30. 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

  31. 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

  32. 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

  33. 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

  34. 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

  35. 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

  36. 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) ;

  37. 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'] ;

  38. 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) ;

  39. 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() ;

  40. 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() ;}

  41. 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){… }

  42. 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) ; }) ;

  43. 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

  44. Démonstration • Ajout de couches sur le fond de carte Programmation Web 2013-2014

  45. Démonstration • Ajout de couches sur le fond de carte Programmation Web 2013-2014

  46. Démonstration • Ajout de couches sur le fond de carte Programmation Web 2013-2014

More Related