Download - Programmation Web : API Google Maps v.3 Couches cartographiques

Programmation Web :Programmation Web :API Google Maps v.3API Google Maps v.3

Couches cartographiquesCouches cartographiques

Jérôme CUTRONAJérôme CUTRONA

[email protected]@univ-reims.fr

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


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


Le monde selon mon GPSLe monde selon mon GPS


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


Espace tridimensionnel d’imagesEspace tridimensionnel d’images Image Image 2 dimensions (x et y) 2 dimensions (x et y) Grandissement Grandissement 3 3èmeème dimension (z) dimension (z)

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



z=0 (grandissement)z=0 (grandissement)

Dalle 0, 0Dalle 0, 0

256 pixels256 pixels

256 pixels

256 pixels



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 pixels

256 pixels


256 pixels

256 pixels



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



Quantité de données et résolutionQuantité de données et résolution

ZoomZoom X,YX,Y DallesDalles MPixelsMPixels

00 11 11 0,10,1

11 22 44 0,30,3

22 44 1616 1,01,0

33 88 6464 4,24,2

44 1616 256256 16,816,8

55 3232 1 0241 024 67,167,1

66 6464 4 0964 096 268268

77 128128 16 38416 384 1 0741 074

88 256256 65 53665 536 4 2954 295

99 512512 262 144262 144 17 18017 180

1010 1 0241 024 1 048 5761 048 576 68 71968 719

ZoomZoom X,YX,Y DallesDalles MPixelsMPixels

1111 2 0482 048 4 194 3044 194 304 274 878274 878

1212 4 0964 096 16 777 21616 777 216 1 099 5121 099 512

1313 8 1928 192 67 108 86467 108 864 4 398 0474 398 047

1414 16 38416 384 268 435 456268 435 456 17 592 18617 592 186

1515 32 76832 768 1 073 741 8241 073 741 824 70 368 74470 368 744

1616 65 53665 536 4 294 967 2964 294 967 296 281 474 977281 474 977

1717 131 072131 072 17 179 869 18417 179 869 184 1 125 899 9071 125 899 907

1818 262 144262 144 68 719 476 73668 719 476 736 4 503 599 6274 503 599 627

1919 524 288524 288 274 877 906 944274 877 906 944 18 014 398 50918 014 398 509

2020 1 048 5761 048 576 1 099 511 627 7761 099 511 627 776 72 057 594 03872 057 594 038

2121 2 097 1522 097 152 4 398 046 511 1044 398 046 511 104 288 230 376 152288 230 376 152

Lien coordonnées Google Maps / GPSLien coordonnées Google Maps / GPS


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


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 ; ;

/*/* * Constructeur * Constructeur * @param $x abscisse * @param $x abscisse * @param $y ordonnée * @param $y ordonnée */ */ publicpublic functionfunction __construct__construct(($$xx==00, , $$yy==00)) {{ $$thisthis->->setset(($$xx, , $$yy)) ; ; }}


Classe Classe PointPoint

/*/* * Réaffecteur * Réaffecteur * @param $x abscisse * @param $x abscisse * @param $y ordonnée * @param $y ordonnée * @return void * @return void */ */ publicpublic functionfunction set set(($$xx, , $$yy)) {{ $$thisthis->->_x _x == ((intint)) $$xx ; ; $$thisthis->->_y _y == ((intint)) $$yy ; ; }}

/*/* * Accesseur abscisse * Accesseur abscisse * @return int * @return int */ */ publicpublic functionfunction getX getX()() {{ returnreturn $$thisthis->->_x ;_x ; }}


/*/* * Accesseur ordonnée * Accesseur ordonnée * @return int * @return int */ */ publicpublic functionfunction getY getY()() {{ returnreturn $$thisthis->->_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}}]]" ;" ; }}



/*/* * 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 ; ; }}



/*/* * 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 ; ; }}}}


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


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



/*/* * 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 ; ; }}



/*/* * 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 ; }}



/*/* * 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 ; ;

$$iyiy == $$thisthis->->_tile_tile->->getYgetY()() ++ ((floatfloat))$$thisthis->->_pixel_pixel->->getYgetY()() // Tile Tile::::getHeightgetHeight()() ; ; $$iyiy == pipi()() ** ((11 -- 22 ** $$iyiy // ((floatfloat)) ((11 <<<< $$zoomzoom)))) ; ; $$latitudelatitude == atanatan((expexp(($$iyiy)))) ** 360360.. // pipi()() -- 9090.. ; ;

returnreturn newnew LatLng LatLng(($$latitudelatitude, , $$longitudelongitude)) ; ; }}}}


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



/*/* * 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()}}]]" ;" ; }}



/*/* * Réaffecteur * Réaffecteur * @param $lat latitude * @param $lat latitude * @param $lon longitude * @param $lon longitude * @return void * @return void */ */ publicpublic functionfunction set set(($$latlat, , $$lnglng)) {{ $$thisthis->->_lat _lat == ((floatfloat)) $$latlat ; ; $$thisthis->->_lng _lng == ((floatfloat)) $$lnglng ; ; }}

/*/* * 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)))))) ; ; }}



/*/* * 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()() ; ;

$$tileXRealtileXReal == $$thisthis->->xRealxReal(($$zoomzoom)) ; ; $$tileXtileX == floorfloor(($$tileXRealtileXReal)) ; ; $$pixelXpixelX == floorfloor(((($$tileXRealtileXReal -- $$tileXtileX)) ** Tile Tile::::getWidthgetWidth())()) ; ;

$$tileYRealtileYReal == $$thisthis->->yRealyReal(($$zoomzoom)) ; ; $$tileYtileY == roundround(($$tileYRealtileYReal)) ; ; $$pixelYpixelY == floorfloor(((($$tileYRealtileYReal -- $$tileYtileY)) ** Tile Tile::::getHeightgetHeight())()) ; ;

$$pitpit->->getTilegetTile()()->->setset(($$tileXtileX, , $$tileYtileY)) ; ; $$pitpit->->getPixelgetPixel()()->->setset(($$pixelXpixelX, , $$pixelYpixelY)) ; ;

returnreturn $$pitpit ; ; }}



/*/* * 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())()) ; ; }}



/*/* * 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)) ; ; }}}}


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


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


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


Créer ses propres cartesCréer ses propres cartes


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


Programmes sur le serveur Web SIGProgrammes sur le serveur Web SIG Capable de fournir des images (dalles)Capable de fournir des images (dalles)

Pré-calculéesPré-calculées Construites dynamiquementConstruites dynamiquement

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


Superposition des couchesSuperposition des couches

Fond de carteFond de carteFond de carteFond de carte

Coordonnées dallesCoordonnées dallesCoordonnées dallesCoordonnées dalles

BâtimentsBâtimentsBâtimentsBâtiments

Position IUTPosition IUTPosition IUTPosition IUT

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


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


Calcul dynamique de dalles (PHP)Calcul dynamique de dalles (PHP)

<?php<?phprequire_oncerequire_once ' 'projection.class.phpprojection.class.php' ;' ;require_oncerequire_once ' 'gdimage.class.phpgdimage.class.php' ;' ;

// Constantes utiles// Constantes utilesdefinedefine((''posxposx', ', 1010)) ; ;definedefine((''posyposy', ', 1010)) ; ;definedefine((''fontfont', ', 44)) ; ;definedefine((''alphaalpha', ', 00)) ; ;

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"")) ; ; }}

$$xx == ((intint)) $$_GET_GET[[''xx'']] ; ; $$yy == ((intint)) $$_GET_GET[[''yy'']] ; ; $$zz == ((intint)) $$_GET_GET[[''zz'']] ; ;



// 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)) ; ;

// Remplissage// Remplissage $$imim->->filledRectanglefilledRectangle((00, , 00, , $$imim->->sxsx()()-1-1, , $$imim->->sysy()()-1-1,, $$couleur_fondcouleur_fond)) ; ; $$imim->->rectanglerectangle((00, , 00, , $$imim->->sxsx()()-1-1, , $$imim->->sysy()()-1-1,, $$couleur_textecouleur_texte)) ; ;



$$ii == 00 ; ;

// Coordonnées de la dalle// Coordonnées de la dalle $$textetexte == " "dalle (dalle ($$xx, , $$yy) @) @$$zz" ;" ; $$imim->->stringstring((font,font, posx, posy posx, posy ++ $$ii++++ ** GDImage GDImage::::fontHeightfontHeight((fontfont)),, $$textetexte, , $$couleur_textecouleur_texte)) ; ;

// Coordonnées GPS de la dalle// Coordonnées GPS de la dalle $$pitpit == newnew PixelInTile PixelInTile(($$xx, , $$yy, , 00, , 00)) ; ; $$latLnglatLng == $$pitpit->->toLatLngtoLatLng(($$zz)) ; ; $$textetexte == " "coord (coord ({{$$latLnglatLng->->getLat()getLat()}}, , {{$$latLnglatLng->->getLng()getLng()}}))" ;" ; $$imim->->stringstring((font,font, posx, posy posx, posy ++ $$ii++++ ** GDImage GDImage::::fontHeightfontHeight((fontfont)),, $$textetexte, , $$couleur_textecouleur_texte)) ; ;

/* 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()() ; ;



$$textetexte == " "pixel (pixel ({{$$tiletile->->getX()getX()}}, , {{$$tiletile->->getY()getY()}}))" ;" ; $$imim->->stringstring((font,font, posx, posy posx, posy ++ $$ii++++ ** GDImage GDImage::::fontHeightfontHeight((fontfont)),, $$textetexte, , $$couleur_textecouleur_texte)) ; ;

// Envoi de l'image// Envoi de l'image headerheader((''Content-Type: image/pngContent-Type: image/png'')) ; ; $$imim->->pngpng()() ; ;}}catchcatch ((ExceptionException $$ee)) {{ echoecho $$ee->->getMessagegetMessage()() ; ;}}


Affichage dynamique d’informationsAffichage dynamique d’informations

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



Déplacement de la souris :Déplacement de la souris :google.maps.google.maps.eventevent.addListener.addListener((map, map, "mousemove""mousemove",, functionfunction((eventevent)) {{ ???? == event event.latLng.lat.latLng.lat()().toFixed.toFixed(6)(6) ; ; ???? == event event.latLng.lng.latLng.lng()().toFixed.toFixed(6)(6) ; ; varvar worldCoordinate = worldCoordinate = map.getProjectionmap.getProjection()()

.fromLatLngToPoint .fromLatLngToPoint((eventevent.latLng.latLng));; varvar pixelCoordinate = pixelCoordinate = newnew google.maps.Point google.maps.Point(( worldCoordinate.x * Math.powworldCoordinate.x * Math.pow(2(2, map.getZoom, map.getZoom())()),, worldCoordinate.y * Math.powworldCoordinate.y * Math.pow(2(2, map.getZoom, map.getZoom()))()));;???? == Math.floorMath.floor((pixelCoordinate.x / pixelCoordinate.x / 256)256) ; ;???? == Math.floorMath.floor((pixelCoordinate.y / pixelCoordinate.y / 256)256) ; ;}})) ; ;



Changement de niveau de zoom :Changement de niveau de zoom :google.maps.google.maps.eventevent.addListener.addListener((map,map,

"zoom_changed""zoom_changed", , functionfunction()() {{

?? ?? = map.getZoom= map.getZoom()() ; ;

}})) ; ;

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


DémonstrationDémonstration


Ajout de couches sur le fond de carteAjout de couches sur le fond de carte

https://iut-info.univ-reims.fr/users/cutrona/private/maps-layers/layers.html




https://iut-info.univ-reims.fr/users/cutrona/private/maps-layers/layers-transp.html




https://iut-info.univ-reims.fr/users/cutrona/private/maps-layers/layers-dojo.html

Download - Programmation Web : API Google Maps v.3 Couches cartographiques

Top Related