01 déc 2008


Introduction


L'API Google Earth propose d'afficher dans son globe des objets en 3D provenant notamment de Sketchup.

Initialisation


Reprendre la carte du tutoriel sur les marqueurs et les événements : http://www.geotribu.net/?q=node/55

Processus


Définir une fonction qui vérifie la validité du fichier KML :

function finished(object) {
  if (!object) {
    alert('KML mal formé');
    return;
  }
  ge.getFeatures().appendChild(object);
}

Définir l'objet géographique KML :

var kmlUrl = 'url du KML';

Et l'appliquer sur la carte :

google.earth.fetchKml(ge, kmlUrl, finished);


Code complet


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>[Google Earth] 6. Afficher un objet en 3D</title>
    <script src="http://www.google.com/jsapi?key=ABQIAAAAPo34DyTbdo2RpVUvdvK1qxTVkAM76o12Ue_ZZqmwjROaqOyBLhQVBCYY9lnsLXH3mdZLo-PWW8Z1DQ"></script>
    <style type="text/css">
	  html { overflow:hidden; height:100%; } 
	  body { height:100%; margin:0; }
    </style>
    <link rel="icon" type="image/png" href="./favicon.png"/>
    <script>
      google.load("earth", "1");
      var ge = null;
 
      function init() {
        google.earth.createInstance("map3d", initCallback);
      }
 
      function initCallback(object) {
        ge = object;
        ge.getWindow().setVisibility(true);
        ge.getOptions().setMouseNavigationEnabled(true);
        ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
 
       var camera = ge.createLookAt('');
       camera.set(43.6,1.44949866510018,2860,ge.ALTITUDE_RELATIVE_TO_GROUND,190,75,10000);
       ge.getView().setAbstractView(camera);
       map = ge.createStyleMap('styleMap');
 
	   function finished(object) {
         if (!object) {
           alert('KML mal formé');
           return;
         }
         ge.getFeatures().appendChild(object);
       }
 
       var kmlUrl = 'url du KML';
       google.earth.fetchKml(ge, kmlUrl, finished);
 
     }
    </script>
  </head>
  <body onload='init()' id='body'>
    <div id='map3d_container' style='border: 0px solid silver; height: 100%; width: 100%;'>
      <div id='map3d' style='height: 100%;'></div>
    </div>
   </body>
</html>


Démonstration