Programmation Web : Programmation Web : API Google Maps v.3 API Google Maps v.3 Couches Couches cartographiques cartographiques Jérôme CUTRONA Jérôme CUTRONA [email protected][email protected]06:11:13 06:11:13 Programmation Web 2014-2015 Programmation Web 2014-2015 1
46
Embed
Programmation Web : API Google Maps v.3 Couches cartographiques
Programmation Web : API Google Maps v.3 Couches cartographiques. Jérôme CUTRONA [email protected]. Site Google Maps. Google Maps http://maps.google.fr Cartes et plans interactifs HTML / AJAX / JavaScript - PowerPoint PPT Presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Programmation Web :Programmation Web :API Google Maps v.3API Google Maps v.3
05:06:2805:06:28 Programmation Web 2014-2015Programmation Web 2014-2015 11
Site Google MapsSite Google Maps
Google MapsGoogle Maps http://maps.google.frhttp://maps.google.fr Cartes et plans interactifs HTML / AJAX / JavaScriptCartes et plans interactifs HTML / AJAX / JavaScript Initié par Google en 2004 aux Etats Unis, couvre Initié par Google en 2004 aux Etats Unis, couvre
aujourd’hui tout le globe (ainsi que la lune et mars…)aujourd’hui tout le globe (ainsi que la lune et mars…)
2205:06:2805:06:28 Programmation Web 2014-2015Programmation Web 2014-2015
API Google MapsAPI Google Maps
API Maps: Application Programming InterfaceAPI Maps: Application Programming Interface Fournie par GoogleFournie par Google Bibliothèque de fonctionnalités en JavaScriptBibliothèque de fonctionnalités en JavaScript Intégration de cartes dans des pages webIntégration de cartes dans des pages web Permet le paramétrage des cartes Permet le paramétrage des cartes Fonctionnalités / vues personnalisées possiblesFonctionnalités / vues personnalisées possibles
JavaScriptJavaScript : programmation pour navigateur : programmation pour navigateur (Firefox, Internet Explorer, Opera, Safari, …)(Firefox, Internet Explorer, Opera, Safari, …)
Page web intégrant une carte Page web intégrant une carte : document HTML : document HTML contenant un programme d’interactioncontenant un programme d’interaction
3305:06:2805:06:28 Programmation Web 2014-2015Programmation Web 2014-2015
Intégration des cartes dans un siteIntégration des cartes dans un site
L’API permet l’L’API permet l’intégration de cartes intégration de cartes dans un sitedans un site PersonnalisationPersonnalisation possible : possible :
Types de carte Google (plan, satellite, relief)Types de carte Google (plan, satellite, relief) Calcul d’itinéraires routiersCalcul d’itinéraires routiers Ajout de (quelques) marqueurs / polygonesAjout de (quelques) marqueurs / polygones Couches de cartographie personnaliséesCouches de cartographie personnalisées
4405:06:2905:06:29 Programmation Web 2014-2015Programmation Web 2014-2015
Le monde selon mon GPSLe monde selon mon GPS
5505:06:2905:06:29 Programmation Web 2014-2015Programmation Web 2014-2015
Positionnement bidimensionnel sur le globePositionnement bidimensionnel sur le globe Latitude Latitude φφ et longitude et longitude λλ
Source de l’illustration:Source de l’illustration:http://commons.wikimedia.orghttp://commons.wikimedia.org
Le monde selon Google MapsLe monde selon Google Maps
6605:06:2905:06:29 Programmation Web 2014-2015Programmation Web 2014-2015
Dallage de la surface terrestreDallage de la surface terrestre Images 256 pixels × 256 pixels = DallesImages 256 pixels × 256 pixels = Dalles Coordonnées en pixelsCoordonnées en pixels
Niveaux de grandissementNiveaux de grandissement Multiplication ou division par 2Multiplication ou division par 2 1 image 256×256 au grandissement 1 image 256×256 au grandissement zz
= 4 images 256×256 au grandissement = 4 images 256×256 au grandissement z+1 z+1
Le monde selon Google MapsLe monde selon Google Maps
7705:06:2905:06:29 Programmation Web 2014-2015Programmation Web 2014-2015
z=0 (grandissement)z=0 (grandissement)
Dalle 0, 0Dalle 0, 0
256 pixels256 pixels
256 pixels
256 pixels
Le monde selon Google MapsLe monde selon Google Maps
8805:06:2905:06:29 Programmation Web 2014-2015Programmation Web 2014-2015
z=1z=1
Dalle 0, 0Dalle 0, 0
Dalle 0, 0Dalle 0, 0 Dalle 1, 0Dalle 1, 0
Dalle 0, 1Dalle 0, 1 Dalle 1, 1Dalle 1, 1
256 pixels256 pixels
256 pixels
256 pixels
256 pixels256 pixels
256 pixels
256 pixels
Le monde selon Google MapsLe monde selon Google Maps
9905:06:2905:06:29 Programmation Web 2014-2015Programmation Web 2014-2015
z=2z=2
256 p256 p
2, 02, 0 3, 03, 0
2, 12, 1 3, 13, 1
0, 20, 2 1, 21, 2 2, 22, 2 3, 23, 2
0, 30, 3 1, 31, 3 2, 32, 3 3, 33, 3
256 p256 p 256 p256 p 256 p256 p
256 p
256 p
256 p
256 p
256 p
256 p
256 p
256 p
1, 01, 0
0, 10, 1 1, 11, 1
0, 00, 0
Le monde selon Google MapsLe monde selon Google Maps
101005:06:2905:06:29 Programmation Web 2014-2015Programmation Web 2014-2015
Quantité de données et résolutionQuantité de données et résolution
Lien coordonnées Google Maps / GPSLien coordonnées Google Maps / GPS
111105:06:2905:06:29 Programmation Web 2014-2015Programmation Web 2014-2015
Projection des points du globe sur un planProjection des points du globe sur un plan Projection de MercatorProjection de Mercator XX = ( = (λλ + 180) / 360 + 180) / 360 YY=0,5 - log((1+sin(=0,5 - log((1+sin(φφ/180×/180×ππ)) / (1-sin()) / (1-sin(φφ/180×/180×ππ))) /4×))) /4×ππ
Projection des points du plan sur le globeProjection des points du plan sur le globe λλ=360 × =360 × XX - 180 - 180 φφ=360 × atan(exp(=360 × atan(exp(ππ×(1-2××(1-2×YY))) /))) / π π – 90 – 90
Adaptation à Google MapsAdaptation à Google Maps Prise en compte du grandissement Prise en compte du grandissement zz Introduction d’un facteur Introduction d’un facteur 22zz
Objets proposés pour les conversionsObjets proposés pour les conversions
/* Classe abstraite de gestion d'un point 2D aux /* Classe abstraite de gestion d'un point 2D aux coordonnées entières */coordonnées entières */
abstractabstract classclass Point Point {{……/* Dalle cartographique *//* Dalle cartographique */classclass Tile Tile extendsextends Point Point {{……/* Un pixel vu par ses coordonnées *//* Un pixel vu par ses coordonnées */classclass Pixel Pixel extendsextends Point Point {{……/* Pixel dans une dalle cartographique *//* Pixel dans une dalle cartographique */classclass PixelInTile PixelInTile {{……/* Coordonnées GPS *//* Coordonnées GPS */classclass LatLng LatLng {{……
121205:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Classe Classe PointPoint
/*/* * Classe abstraite de gestion d'un point 2D aux coordonnées * Classe abstraite de gestion d'un point 2D aux coordonnées entièresentières */ */abstractabstract classclass Point Point {{ /*/* * @var int abscisse * @var int abscisse */ */ protectedprotected $$_x_x ; ; /*/* * @var int ordonnée * @var int ordonnée */ */ protectedprotected $$_y_y ; ;
/*/* * Conversion en chaîne * Conversion en chaîne * de caractères* de caractères */ */ publicpublic abstractabstract functionfunction __tostring__tostring()() ; ;}}
Classe Classe TileTile
/*/* * Dalle cartographique * Dalle cartographique */ */classclass Tile Tile extendsextends Point Point {{ /*/* * @var int Largeur d'une dalle * @var int Largeur d'une dalle */ */ privateprivate staticstatic $$_tileWidth_tileWidth == 256256 ; ; /*/* * @var int Hauteur d'une dalle * @var int Hauteur d'une dalle */ */ privateprivate staticstatic $$_tileHeight_tileHeight == 256256 ; ;
/*/* * Conversion en chaîne de caractères * Conversion en chaîne de caractères */ */ publicpublic functionfunction __tostring__tostring()() {{ returnreturn " "Tile[Tile[{{$$thisthis->->_x_x}}, , {{$$thisthis->->_y_y}}]]" ;" ; }}
151505:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Classe Classe TileTile
/*/* * Accesseur à la largeur d'une dalle * Accesseur à la largeur d'une dalle * @return int * @return int */ */ publicpublic staticstatic functionfunction getWidth getWidth()() {{ returnreturn selfself::$::$_tileWidth_tileWidth ; ; }}
/*/* * Réaffecteur de la largeur d'une dalle * Réaffecteur de la largeur d'une dalle * @param $tileWidth Nouvelle largeur * @param $tileWidth Nouvelle largeur */ */ publicpublic staticstatic functionfunction setTileWidth setTileWidth(($$tileWidthtileWidth)) {{ selfself::$::$_tileWidth_tileWidth == ((intint)) $$tileWidthtileWidth ; ; }}
161605:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Classe Classe TileTile
/*/* * Accesseur à la hauteur d'une dalle * Accesseur à la hauteur d'une dalle * @return int * @return int */ */ publicpublic staticstatic functionfunction getHeight getHeight()() {{ returnreturn selfself::$::$_tileHeight_tileHeight ; ; }}
/*/* * Réaffecteur de la hauteur d'une dalle * Réaffecteur de la hauteur d'une dalle * @param $tileWidth Nouvelle largeur * @param $tileWidth Nouvelle largeur */ */ publicpublic staticstatic functionfunction setTileHeight setTileHeight(($$tileHeighttileHeight)) {{ selfself::$::$_tileHeight_tileHeight == ((intint)) $$tileHeighttileHeight ; ; }}}}
171705:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Classe Classe PixelPixel
/*/* * Un pixel vu par ses coordonnées * Un pixel vu par ses coordonnées */ */classclass Pixel Pixel extendsextends Point Point {{ /*/* * Conversion en chaîne de caractères * Conversion en chaîne de caractères */ */ publicpublic functionfunction __tostring__tostring()() {{ returnreturn " "Pixel[Pixel[{{$$thisthis->->_x_x}}, , {{$$thisthis->->_y_y}}]]" ;" ; }}}}
181805:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Classe Classe PixelInTilePixelInTile
/*/* * Pixel dans une dalle cartographique * Pixel dans une dalle cartographique */ */classclass PixelInTile PixelInTile {{ /*/* * @var Tile Dalle cartographique * @var Tile Dalle cartographique */ */ privateprivate $$_tile_tile ; ; /*/* * @var Pixel Pixel par rapport à la dalle cartographique * @var Pixel Pixel par rapport à la dalle cartographique */ */ privateprivate $$_pixel_pixel ; ;
/*/* * Conversion en chaîne de caractères * Conversion en chaîne de caractères */ */ publicpublic functionfunction __tostring__tostring()() {{ returnreturn " "PixelInTile{PixelInTile{{{$$thisthis->->_tile_tile}}, , {{$$thisthis->->_pixel_pixel}}}}" ;" ; }}
191905:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Classe Classe PixelInTilePixelInTile
/*/* * Constructeur * Constructeur * @param $tx abscisse de la dalle * @param $tx abscisse de la dalle * @param $ty ordonnée de la dalle * @param $ty ordonnée de la dalle * @param $px abscisse du pixel * @param $px abscisse du pixel * @param $py ordonnée du pixel * @param $py ordonnée du pixel */ */ publicpublic functionfunction __construct __construct(($$txtx==00, , $$tyty==00, , $$pxpx==00, , $$pypy==00)) {{ $$thisthis->->_tile _tile == newnew Tile Tile(($$txtx, , $$tyty)) ; ; $$thisthis->->_pixel _pixel == newnew Pixel Pixel(($$pxpx, , $$pypy)) ; ; }}
/*/* * Réaffecteur de la dalle * Réaffecteur de la dalle * @param $tile Nouvelle dalle * @param $tile Nouvelle dalle */ */ publicpublic functionfunction setTile setTile((Tile Tile $$tiletile)) {{ $$thisthis->->_tile _tile == $$tiletile ; ; }}
202005:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Classe Classe PixelInTilePixelInTile
/*/* * Réaffecteur du pixel * Réaffecteur du pixel * @param $tile Nouveau pixel * @param $tile Nouveau pixel */ */ publicpublic functionfunction setPixel setPixel((Pixel Pixel $$pixelpixel)) {{ $$thisthis->->_pixel _pixel == $$pixelpixel ; ; }} /*/* * Accesseur à la dalle * Accesseur à la dalle * @return Tile * @return Tile */ */ publicpublic functionfunction getTile getTile()() {{ returnreturn $$thisthis->->_tile ;_tile ; }} /*/* * Accesseur au pixel * Accesseur au pixel * @return au Pixel * @return au Pixel */ */ publicpublic functionfunction getPixel getPixel()() {{ returnreturn $$thisthis->->_pixel ;_pixel ; }}
212105:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Classe Classe PixelInTilePixelInTile
/*/* * Coordonnées GPS du pixel par Rapport à la dalle à un certain * Coordonnées GPS du pixel par Rapport à la dalle à un certain niveau de zoomniveau de zoom * @param $zoom Le niveau de zoom * @param $zoom Le niveau de zoom * @return LatLng * @return LatLng */ */ publicpublic functionfunction toLatLng toLatLng(($$zoomzoom)) {{ $$degree_per_pixeldegree_per_pixel == 360360.. // ((11 <<<< $$zoomzoom)) // Tile Tile::::getWidthgetWidth()() ; ; $$longitudelongitude == $$thisthis->->_pixel_pixel->->getXgetX()() ** $$degree_per_pixeldegree_per_pixel ++ $$thisthis->->_tile_tile->->getXgetX()() ** ((360360.. // ((11 <<<< $$zoomzoom)))) ; ; $$longitudelongitude -=-= 180180 ; ;
222205:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Classe Classe LatLngLatLng
/*/* * Coordonnées GPS * Coordonnées GPS */ */classclass LatLng LatLng {{ /*/* * @var int Latitude * @var int Latitude */ */ privateprivate $$_lat_lat ; ; /*/* * @var int Longitude * @var int Longitude */ */ privateprivate $$_lng_lng ; ; /*/* * Constructeur * Constructeur * @param $lat Latitude * @param $lat Latitude * @param $lng Longitude * @param $lng Longitude */ */ publicpublic functionfunction __construct__construct(($$latlat==00, , $$lnglng==00)) {{ $$thisthis->->setset(($$latlat, , $$lnglng)) ; ; }}
232305:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Classe Classe LatLngLatLng
/*/* * Accesseur à la latitude * Accesseur à la latitude * @return int * @return int */ */ publicpublic functionfunction getLat getLat()() {{ returnreturn $$thisthis->->_lat ;_lat ; }} /*/* * Accesseur à la longitude * Accesseur à la longitude * @return int * @return int */ */ publicpublic functionfunction getLng getLng()() {{ returnreturn $$thisthis->->_lng ;_lng ; }} /*/* * Conversion en chaîne de caractères * Conversion en chaîne de caractères */ */ publicpublic functionfunction __tostring__tostring()() {{ returnreturn " "GPS[GPS[{{$$thisthis->->getLat()getLat()}}, , {{$$thisthis->->getLng()getLng()}}]]" ;" ; }}
242405:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
/*/* * Conversion en dalle * Conversion en dalle * @return Tile * @return Tile */ */ publicpublic functionfunction toTile toTile(($$zoomzoom)) {{ returnreturn newnew Tile Tile((floorfloor(($$thisthis->->xRealxReal(($$zoomzoom)))),, roundround(($$thisthis->->yRealyReal(($$zoomzoom)))))) ; ; }}
252505:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Classe Classe LatLngLatLng
/*/* * Conversion en pixel dans une dalle * Conversion en pixel dans une dalle * @return PixelInTile * @return PixelInTile */ */ publicpublic functionfunction toPixelInTile toPixelInTile(($$zoomzoom)) {{ $$pitpit == newnew PixelInTile PixelInTile()() ; ;
262605:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Classe Classe LatLngLatLng
/*/* * Conversion en pixel dans une dalle de référence * Conversion en pixel dans une dalle de référence * @param $tile Dalle de référence * @param $tile Dalle de référence * @param $zoom niveau de zoom * @param $zoom niveau de zoom * @return Pixel * @return Pixel */ */ publicpublic functionfunction toPixelFromReferenceTile toPixelFromReferenceTile((Tile Tile $$tiletile, , $$zoomzoom)) {{ $$pitpit == $$thisthis->->toPixelInTiletoPixelInTile(($$zoomzoom)) ; ; returnreturn newnew Pixel Pixel((TileTile::::getWidthgetWidth()() ** (($$pitpit->->getTilegetTile()()->->getXgetX()() -- $$tiletile->->getXgetX())()) ++ $$pitpit->->getPixelgetPixel()()->->getXgetX()(),, Tile Tile::::getHeightgetHeight()() ** (($$pitpit->->getTilegetTile()()->->getYgetY()() -- $$tiletile->->getYgetY())()) ++ $$pitpit->->getPixelgetPixel()()->->getYgetY())()) ; ; }}
272705:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Classe Classe LatLngLatLng
/*/* * Calcul de l'abscisse réelle dans le système Mercator * Calcul de l'abscisse réelle dans le système Mercator * @return float * @return float */ */ privateprivate functionfunction xReal xReal(($$zoomzoom)) {{ returnreturn ((((floatfloat)) $$thisthis->->_lng _lng ++ 180180..)) // 360360.. ** ((11 <<<< $$zoomzoom)) ; ; }}
/*/* * Calcul de l'ordonnée réelle dans le système Mercator * Calcul de l'ordonnée réelle dans le système Mercator * @return float * @return float */ */ privateprivate functionfunction yReal yReal(($$zoomzoom)) {{ $$latitudelatitude == ((floatfloat)) $$thisthis->->_lat _lat // 180180.. ** pipi()() ; ; $$tyty == 0.50.5 -- loglog((((11.. ++ sinsin(($$latitudelatitude)))) // ((11.. -- sinsin(($$latitudelatitude)))))) // ((44.. ** pipi())()) ; ; returnreturn $$tyty ** ((11 <<<< $$zoomzoom)) ; ; }}}}
282805:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Conversions Mercator vers GPSConversions Mercator vers GPS
TrouverTrouver les les coordonnées GPS coordonnées GPS d’un point d’un point à partir à partir des des coordonnées d’un pixel dans une dalle coordonnées d’un pixel dans une dalle à un niveau de à un niveau de zoom donnézoom donné
// Construction du PixelInTile// Construction du PixelInTile$$pitpit == newnew PixelInTile PixelInTile(($$tile_xtile_x, , $$tile_ytile_y,, $$pixel_xpixel_x, , $$pixel_xpixel_x)) ; ;
// Conversion en coordonnées GPS// Conversion en coordonnées GPS$$latLnglatLng == $$pitpit->->toLatLngtoLatLng(($$zz)) ; ;
// Utilisation des coordonnées GPS// Utilisation des coordonnées GPS$$latitudelatitude == $$latLnglatLng->->getLat() ;getLat() ;$$longitudelongitude == $$latLnglatLng->->getLng() ;getLng() ;
292905:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Conversions GPS vers MercatorConversions GPS vers Mercator
TrouverTrouver les les coordonnées Mercator coordonnées Mercator d’un point à un d’un point à un niveau de zoom donné niveau de zoom donné à partir à partir des des coordonnées GPS coordonnées GPS
// Construction des coordonnées GPS// Construction des coordonnées GPS$$latLng latLng == newnew LatLng LatLng(($$latitudelatitude, , $$longitudelongitude)) ; ;// Conversion en PixelInTile// Conversion en PixelInTile$$pitpit == $$latLnglatLng->->toPixelInTiletoPixelInTile(($$zz)) ; ;
// Récupération de la dalle// Récupération de la dalle$$tiletile == $$pitpit->->getTilegetTile()() ; ;// Utilisation des coordonnées de la dalle// Utilisation des coordonnées de la dalle$$tile_xtile_x == $$tiletile->->getXgetX()() ; ; // tile_x compris entre 0 et 2^$z // tile_x compris entre 0 et 2^$z $$tile_ytile_y == $$tiletile->->getYgetY()() ; ; // tile_y compris entre 0 et 2^$z // tile_y compris entre 0 et 2^$z
// Récupération du pixel// Récupération du pixel$$pixelpixel == $$pitpit->->getPixelgetPixel()() ; ;// Utilisation des coordonnées du pixel// Utilisation des coordonnées du pixel$$pixel_xpixel_x == $$pixelpixel->->getXgetX()() ; ; // pixel_x compris entre 0 et 255 // pixel_x compris entre 0 et 255 $$pixel_ypixel_y == $$pixelpixel->->getYgetY()() ; ; // pixel_y compris entre 0 et 255 // pixel_y compris entre 0 et 255
303005:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Conversions GPS vers MercatorConversions GPS vers Mercator
TrouverTrouver les les coordonnées Mercator coordonnées Mercator d’un point d’un point (coordonnées d’un pixel par rapport à une dalle de (coordonnées d’un pixel par rapport à une dalle de référence) à un niveau de zoom donné référence) à un niveau de zoom donné à partir à partir des des coordonnées GPS coordonnées GPS
// Construction des coordonnées GPS// Construction des coordonnées GPS$$latLng latLng == newnew LatLng LatLng(($$latitudelatitude, , $$longitudelongitude)) ; ;
// Construction de la dalle de référence// Construction de la dalle de référence$$tiletile == newnew Tile Tile(($$tile_xtile_x, , $$tile_ytile_y)) ; ;
// Conversion en PixelInTile// Conversion en PixelInTile$$pixelpixel == $$latLnglatLng->->toPixelFromReferenceTiletoPixelFromReferenceTile(($$tiletile, , $$zz)) ; ;
// Utilisation des coordonnées du pixel// Utilisation des coordonnées du pixel$$xx == $$pixelpixel->->getXgetX()() ; ; // x peut être <0 ou >255// x peut être <0 ou >255$$yy == $$pixelpixel->->getYgetY()() ; ; // y peut être <0 ou >255// y peut être <0 ou >255
313105:06:3005:06:30 Programmation Web 2014-2015Programmation Web 2014-2015
Créer ses propres cartesCréer ses propres cartes
323205:06:3105:06:31 Programmation Web 2014-2015Programmation Web 2014-2015
Remplacer les fonds de cartes de Google Remplacer les fonds de cartes de Google Maps ou ajouter des couchesMaps ou ajouter des couches
Créer ses propres fonds de cartes / couchesCréer ses propres fonds de cartes / couches A partir de coordonnées GPSA partir de coordonnées GPS A partir d’images (cartes anciennes, cartes A partir d’images (cartes anciennes, cartes
géologiques, cartes de densité, logo, …)géologiques, cartes de densité, logo, …) A partir de ce que l’on souhaite du moment A partir de ce que l’on souhaite du moment
où cela peut être dessiné dans une imageoù cela peut être dessiné dans une image Travail à réaliserTravail à réaliser
Fabriquer des images 256px × 256px (dalles)Fabriquer des images 256px × 256px (dalles)
Fabriquer des dallesFabriquer des dalles
333305:06:3105:06:31 Programmation Web 2014-2015Programmation Web 2014-2015
Programmes sur le serveur Web SIGProgrammes sur le serveur Web SIG Capable de fournir des images (dalles)Capable de fournir des images (dalles)
Les images dépendent du :Les images dépendent du : numéro de la dalle (X, Y)numéro de la dalle (X, Y) niveau de grandissement Zniveau de grandissement Z
Relations entre (X,Y,Z) et (latitude, longitude)Relations entre (X,Y,Z) et (latitude, longitude) Interrogation d’une base de donnéesInterrogation d’une base de données
Exemples de dallesExemples de dalles
343405:06:3105:06:31 Programmation Web 2014-2015Programmation Web 2014-2015
Superposition des couchesSuperposition des couches
Fond de carteFond de carteFond de carteFond de carte
Direction IUTDirection IUTDirection IUTDirection IUT
Gestion de la transparenceGestion de la transparence
Principe de téléchargement d’une dallePrincipe de téléchargement d’une dalle
Lorsque l’API JavaScript demande une dalle, Lorsque l’API JavaScript demande une dalle, celle-ci dépend de la couche, du niveau de celle-ci dépend de la couche, du niveau de zoom et des coordonnées de la dallezoom et des coordonnées de la dalle
Les paramètres nécessaires au téléchargement Les paramètres nécessaires au téléchargement de la dalle sont donc :de la dalle sont donc : L’L’URLURL du générateurdu générateur Les coordonnées Les coordonnées XX et et YY de la dalle de la dalle Le niveau de zoom Le niveau de zoom ZZ
Ainsi, l’URL de la dalle téléchargée est Ainsi, l’URL de la dalle téléchargée est habituellement de la forme :habituellement de la forme :urlurl?x=?x=valeur_Xvaleur_X&y=&y=valeur_Yvaleur_Y&z=&z=zoomzoom
353505:06:3105:06:31 Programmation Web 2014-2015Programmation Web 2014-2015
Intégration d’une couche (JavaScript)Intégration d’une couche (JavaScript)
// Création d'une couche// Création d'une couchevarvar couche = couche = {{ // Méthode donnant l'URL d'une dalle// Méthode donnant l'URL d'une dalle getTileUrl: getTileUrl: functionfunction((tileCoord tileCoord /* coordonnées *//* coordonnées */,, zoom zoom /* niveau de zoom *//* niveau de zoom */)) {{ returnreturn "tile.php?""tile.php?" + + "x=""x=" + tileCoord.x + tileCoord.x + + "&y=""&y=" + tileCoord.y + tileCoord.y + + "&z=""&z=" + zoom ; + zoom ; }},, // Taille de la dalle// Taille de la dalle tileSize: tileSize: newnew google.maps.Size google.maps.Size(256(256, , 256)256),, // Image PNG ?// Image PNG ? isPng: isPng: truetrue,,}}// Création d'un type carte// Création d'un type cartevarvar typeTile = typeTile = newnew google.maps.ImageMapType google.maps.ImageMapType((couchecouche)) ; ;// Ajout du type de carte// Ajout du type de cartemap.overlayMapTypes.insertAtmap.overlayMapTypes.insertAt(0(0, typeTile, typeTile)) ; ;
363605:06:3105:06:31 Programmation Web 2014-2015Programmation Web 2014-2015
Calcul dynamique de dalles (PHP)Calcul dynamique de dalles (PHP)
trytry {{ // Contrôle de présence des paramètres// Contrôle de présence des paramètres ifif ((!isset!isset(($$_GET_GET[[''xx'']], , $$_GET_GET[[''yy'']], , $$_GET_GET[[''zz'']))])) {{ throwthrow newnew ExceptionException((""Problème de paramètresProblème de paramètres"")) ; ; }}
373705:06:3105:06:31 Programmation Web 2014-2015Programmation Web 2014-2015
Calcul dynamique de dalles (PHP)Calcul dynamique de dalles (PHP)
// Valeur maximale des coordonnées de dalle au zoom $z// Valeur maximale des coordonnées de dalle au zoom $z $$tilestiles == 11<<$<<$zz ; ; $$xx == (($$xx%$%$tilestiles+$+$tilestiles))%$%$tilestiles ; ; $$yy == (($$yy%$%$tilestiles+$+$tilestiles))%$%$tilestiles ; ;
// Création d'un image aux dimensions d'une dalle// Création d'un image aux dimensions d'une dalle $$imim == GDImage GDImage::::createFromSizecreateFromSize((TileTile::::getWidthgetWidth()(),, Tile Tile::::getHeightgetHeight())()) ; ;
// Gestion de la transparence// Gestion de la transparence $$imim->->saveAlphasaveAlpha((truetrue)) ; ; $$imim->->alphaBlendingalphaBlending((falsefalse)) ; ; $$couleur_textecouleur_texte == $$imim->->colorAllocatecolorAllocate((255255, , 255255, , 255255)) ; ; $$couleur_fondcouleur_fond == $$imim->->colorAllocateAlphacolorAllocateAlpha((00, , 00, , 00, , 127127)) ; ;
/* Recalcul des coordonnées de dalle à partir des coordonnées /* Recalcul des coordonnées de dalle à partir des coordonnées GPS pour valider les transformations */GPS pour valider les transformations */ $$pit2pit2 == $$latLnglatLng->->toPixelInTiletoPixelInTile(($$zz)) ; ; $$tiletile == $$pit2pit2->->getTilegetTile()() ; ;
393905:06:3105:06:31 Programmation Web 2014-2015Programmation Web 2014-2015
Calcul dynamique de dalles (PHP)Calcul dynamique de dalles (PHP)
L’API JavaScript permet d’obtenir, et donc L’API JavaScript permet d’obtenir, et donc d’afficher, des d’afficher, des informations utiles informations utiles comme :comme : Le Le niveau de zoom niveau de zoom actuelactuel Les Les coordonnées GPS coordonnées GPS sous le curseur de la sourissous le curseur de la souris Les Les coordonnées de la dalle coordonnées de la dalle sous le curseur de la sous le curseur de la
sourissouris
Ces informations peuvent être rafraîchies à Ces informations peuvent être rafraîchies à chaque mouvement de souris :chaque mouvement de souris :google.maps.google.maps.eventevent.addListener.addListener((map,map,"mousemove""mousemove", , functionfunction((eventevent)) {{… }… }
414105:06:3105:06:31 Programmation Web 2014-2015Programmation Web 2014-2015
Autres événements déclenchés sur la carte :Autres événements déclenchés sur la carte :http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Maphttp://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Map
434305:06:3105:06:31 Programmation Web 2014-2015Programmation Web 2014-2015
DémonstrationDémonstration
444405:06:3105:06:31 Programmation Web 2014-2015Programmation Web 2014-2015
Ajout de couches sur le fond de carteAjout de couches sur le fond de carte