programmation web : api google maps v.3 couches cartographiques

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

Post on 12-Jan-2016

18 views

Category:

Documents

1 download

Embed Size (px)

DESCRIPTION

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 - PowerPoint PPT Presentation

TRANSCRIPT

  • Programmation Web :API Google Maps v.3Couches cartographiquesJrme CUTRONAjerome.cutrona@univ-reims.fr*Programmation Web 2014-2015*

    Programmation Web 2014-2015

  • Site Google MapsGoogle Mapshttp://maps.google.frCartes et plans interactifs HTML / AJAX / JavaScriptIniti par Google en 2004 aux Etats Unis, couvre aujourdhui tout le globe (ainsi que la lune et mars)**Programmation Web 2014-2015

    Programmation Web 2014-2015

  • API Google MapsAPI Maps: Application Programming InterfaceFournie par GoogleBibliothque de fonctionnalits en JavaScriptIntgration de cartes dans des pages webPermet le paramtrage des cartes Fonctionnalits / vues personnalises possibles

    JavaScript : programmation pour navigateur (Firefox, Internet Explorer, Opera, Safari, )

    Page web intgrant une carte : document HTML contenant un programme dinteraction**Programmation Web 2014-2015

    Programmation Web 2014-2015

  • Intgration des cartes dans un siteLAPI permet lintgration de cartes dans un sitePersonnalisation possible :Types de carte Google (plan, satellite, relief)Calcul ditinraires routiersAjout de (quelques) marqueurs / polygonesCouches de cartographie personnalises**Programmation Web 2014-2015

    Programmation Web 2014-2015

  • Le monde selon mon GPS**Programmation Web 2014-2015Positionnement bidimensionnel sur le globeLatitude et longitude Source de lillustration:http://commons.wikimedia.org

    Programmation Web 2014-2015

  • Le monde selon Google Maps**Programmation Web 2014-2015Espace tridimensionnel dimagesImage 2 dimensions (x et y)Grandissement 3me dimension (z)Dallage de la surface terrestreImages 256 pixels 256 pixels = DallesCoordonnes en pixelsNiveaux de grandissementMultiplication ou division par 21 image 256256 au grandissement z = 4 images 256256 au grandissement z+1

    Programmation Web 2014-2015

  • Le monde selon Google Maps**Programmation Web 2014-2015z=0 (grandissement)Dalle 0, 0

    Programmation Web 2014-2015

  • Le monde selon Google Maps**Programmation Web 2014-2015z=1Dalle 0, 0Dalle 0, 0Dalle 1, 0Dalle 0, 1Dalle 1, 1

    Programmation Web 2014-2015

  • Le monde selon Google Maps**Programmation Web 2014-2015z=22, 03, 02, 13, 10, 21, 22, 23, 20, 31, 32, 33, 31, 00, 11, 10, 0

    Programmation Web 2014-2015

  • Le monde selon Google Maps**Programmation Web 2014-2015Quantit de donnes et rsolution

    ZoomX,YDallesMPixels0110,11240,324161,038644,241625616,85321 02467,16644 096268712816 3841 074825665 5364 2959512262 14417 180101 0241 048 57668 719

    ZoomX,YDallesMPixels112 0484 194 304274 878124 09616 777 2161 099 512138 19267 108 8644 398 0471416 384268 435 45617 592 1861532 7681 073 741 82470 368 7441665 5364 294 967 296281 474 97717131 07217 179 869 1841 125 899 90718262 14468 719 476 7364 503 599 62719524 288274 877 906 94418 014 398 509201 048 5761 099 511 627 77672 057 594 038212 097 1524 398 046 511 104288 230 376 152

    Programmation Web 2014-2015

  • Lien coordonnes Google Maps / GPS**Programmation Web 2014-2015Projection des points du globe sur un planProjection de MercatorX = ( + 180) / 360Y=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-2Y))) / 90Adaptation Google MapsPrise en compte du grandissement zIntroduction dun facteur 2z

    Programmation Web 2014-2015

  • Objets proposs pour les conversions/* Classe abstraite de gestion d'un point 2D aux coordonnes entires */abstractclassPoint{/* Dalle cartographique*/classTileextendsPoint{/* Un pixel vu par ses coordonnes*/classPixelextendsPoint{/* Pixel dans une dalle cartographique*/classPixelInTile{/* Coordonnes GPS*/classLatLng{**Programmation Web 2014-2015

    Programmation Web 2014-2015

  • Classe Point/* * Classe abstraite de gestion d'un point 2D aux coordonnes entires */ abstractclassPoint{ /* * @var int abscisse */ protected$_x; /* * @var int ordonne */ protected$_y; /* * Constructeur * @param $x abscisse * @param $y ordonne */ publicfunction__construct($x=0,$y=0){ $this->set($x,$y); }**Programmation Web 2014-2015

    Programmation Web 2014-2015

  • Classe Point/* * Raffecteur * @param $x abscisse * @param $y ordonne * @return void */ publicfunctionset($x,$y){ $this->_x=(int)$x; $this->_y=(int)$y; } /* * Accesseur abscisse * @return int */ publicfunctiongetX(){ return$this->_x; } **Programmation Web 2014-2015/* * Accesseur ordonne * @return int */ publicfunctiongetY(){ return$this->_y; } /* * Conversion en chane * de caractres */ publicabstract function__tostring(); }

    Programmation Web 2014-2015

  • Classe Tile/* * Dalle cartographique */ classTileextendsPoint{ /* * @var int Largeur d'une dalle */ privatestatic$_tileWidth=256; /* * @var int Hauteur d'une dalle */ privatestatic$_tileHeight=256; /* * Conversion en chane de caractres */ publicfunction__tostring(){ return"Tile[{$this->_x},{$this->_y}]"; } **Programmation Web 2014-2015

    Programmation Web 2014-2015

  • Classe Tile/* * Accesseur la largeur d'une dalle * @return int */ publicstaticfunctiongetWidth(){ returnself::$_tileWidth; } /* * Raffecteur de la largeur d'une dalle * @param $tileWidth Nouvelle largeur */ publicstaticfunctionsetTileWidth($tileWidth){ self::$_tileWidth=(int)$tileWidth; } **Programmation Web 2014-2015

    Programmation Web 2014-2015

  • Classe Tile/* * Accesseur la hauteur d'une dalle * @return int */ publicstaticfunctiongetHeight(){ returnself::$_tileHeight; } /* * Raffecteur de la hauteur d'une dalle * @param $tileWidth Nouvelle largeur */ publicstaticfunctionsetTileHeight($tileHeight){ self::$_tileHeight=(int)$tileHeight; } }**Programmation Web 2014-2015

    Programmation Web 2014-2015

  • Classe Pixel/* * Un pixel vu par ses coordonnes */ classPixelextendsPoint{ /* * Conversion en chane de caractres */ publicfunction__tostring(){ return"Pixel[{$this->_x},{$this->_y}]"; } } **Programmation Web 2014-2015

    Programmation Web 2014-2015

  • Classe PixelInTile/* * Pixel dans une dalle cartographique */ classPixelInTile{ /* * @var Tile Dalle cartographique */ private$_tile; /* * @var Pixel Pixel par rapport la dalle cartographique */ private$_pixel;

    /* * Conversion en chane de caractres */ publicfunction__tostring(){ return"PixelInTile{{$this->_tile},{$this->_pixel}}"; }**Programmation Web 2014-2015

    Programmation Web 2014-2015

  • Classe PixelInTile/* * Constructeur * @param $tx abscisse de la dalle * @param $ty ordonne de la dalle * @param $px abscisse du pixel * @param $py ordonne du pixel */ publicfunction __construct($tx=0,$ty=0,$px=0,$py=0){ $this->_tile=newTile($tx,$ty); $this->_pixel=newPixel($px,$py); } /* * Raffecteur de la dalle * @param $tile Nouvelle dalle */ publicfunctionsetTile(Tile$tile){ $this->_tile=$tile; } **Programmation Web 2014-2015

    Programmation Web 2014-2015

  • Classe PixelInTile/* * Raffecteur du pixel * @param $tile Nouveau pixel */ publicfunctionsetPixel(Pixel$pixel){ $this->_pixel=$pixel; } /* * Accesseur la dalle * @return Tile */ publicfunctiongetTile(){ return$this->_tile; } /* * Accesseur au pixel * @return au Pixel */ publicfunctiongetPixel(){ return$this->_pixel; } **Programmation Web 2014-2015

    Programmation Web 2014-2015

  • Classe PixelInTile/* * Coordonnes GPS du pixel par Rapport la dalle un certain niveau de zoom * @param $zoom Le niveau de zoom * @return LatLng */ publicfunctiontoLatLng($zoom){ $degree_per_pixel=360./(1getX()*$degree_per_pixel +$this->_tile->getX()*(360./(1getY() +(float)$this->_pixel->getY()/Tile::getHeight(); $iy=pi()*(1-2*$iy/(float)(1
  • Classe LatLng/* * Coordonnes GPS */ classLatLng{ /* * @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); }**Programmation Web 2014-2015

    Programmation Web 2014-2015

  • Classe LatLng/* * Accesseur la latitude * @return int */ publicfunctiongetLat(){ return$this->_lat; } /* * Accesseur la longitude * @return int */ publicfunctiongetLng(){ return$this->_lng; } /* * Conversion en chane de caractres */ publicfunction__tostring(){ return"GPS[{$this->getLat()},{$this->getLng()}]"; } **Programmation Web 2014-2015

    Programmation Web 2014-2015

  • Classe LatLng/* * Raffecteur * @param $lat latitude * @param $lon longitude * @return void */ publicfunctionset($lat,$lng){ $this->_lat=(float)$lat; $this->_lng=(float)$lng; } /* * Conversion en dalle * @return Tile */ publicfunctiontoTile($zoom){ returnnewTile(floor($this->xReal($zoom)), round($this->yReal($zoom))); }**Programmation Web 2014-2015

    Programmation Web 2014-2015

  • Classe LatLng/* * Conversion en pixel dans une dalle * @return PixelInTile */ publicfunctiontoPixelInTile($zoom){ $pit=newPixelInTile(); $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; }**Programmation Web 2014-2015

    Programmation Web 2014-2015

  • Classe LatLng/* * Conversion en pixel dans une dalle de rfrence * @param $tile Dalle de rfrence * @param $zoom niveau de zoom * @return Pixel */ publicfunctiontoPixelFromReferenceTile(Tile$tile,$zoom){ $pit=$this->toPixelInTile($zoom); returnnewPixel(Tile::getWidth() *($pit->getTi