Gu?a de inicio r?pido de Web World Wind¶
Para empezar¶
Web World Wind es una API de globo virtual 3D para HTML5 y Javascript. Las p?ginas web incluyen Web World Wind para crear uno o m?s globos vituales en dichas p?ginas.
Es muy f?cil empezar a usar Web World Wind. No hay que descargar nada, simplemente incluir un peque?o script en una p?gina HTML, como en este ejemplo:
<!DOCTYPE html>
<!-- Este es un ejemplo muy simple de uso de Web World Wind. -->
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Ejemplo de World Wind</title>
<!-- incluir la bibliotecta deWeb World Wind. -->
<script src="http://worldwindserver.net/webworldwind/worldwindlib.js" type="text/javascript"></script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<!-- Crea un lienzo (*canvas*) para Web World Wind. -->
<canvas id="canvasOne" width="1024" height="768">
Su navegador no soporta Canvas HTML5.
</canvas>
</div>
<script>
// Registra un "escuchador" de eventos (*event listener*) y lo llama cuando se carga la p?gina
window.addEventListener("load", eventWindowLoaded, false);
// Define el event listener para inicializar Web World Wind.
function eventWindowLoaded() {
// Crea un World Window para el lienzo.
var wwd = new WorldWind.WorldWindow("canvasOne");
// A?ade algunas capas de imagen al globo World Window.
wwd.addLayer(new WorldWind.BMNGOneImageLayer());
wwd.addLayer(new WorldWind.BingAerialWithLabelsLayer());
// A?ade una br?jula, un visor de coordenadas y algunos controles de visualizaci?n al World Window.
wwd.addLayer(new WorldWind.CompassLayer());
wwd.addLayer(new WorldWind.CoordinatesDisplayLayer(wwd));
wwd.addLayer(new WorldWind.ViewControlsLayer(wwd));
}
</script>
</body>
</html>
Este ejemplo primero incluye la librer?a Web World Wind library, worldwindlib.js, despu?s crea un lienzo HTML5s, finalmente define un script que crea elWorld Window y lo rellena con dos capas de im?gen y tres capas de controles. Clic este enlace para ver la p?gina web que se ha creado n una ventana nueva. La p?gina contiene un globo virtual 3D. Intenta Intentar hacer zoom con la rueda del rat?n o en un dispositvo m?vil con el gesto de pellizcar. Arrastrar el rat?n o el dedo para desplazarse alrededor del globo. Arrastrar el bot?n derecho del rat?n o dos dedos hacia arriba para inclinar el globo.
Ejecutar de forma local dentro de un servidor¶
Para ejecutar localmente una aplicaci?n Web World Wind, navegar a:
y se deber?a ver este mismo ejemplo Web World Wind example en el navegador web.
Ficheros fuente¶
Abriendo:
/var/www/html/WebWorldWind
se pueden encontrar m?s ejemplos junto con los archivos fuente.