NASA World Wind SDK

Bevezetés

A NASA World Wind SDK egy ingyenes API virtuális glóbuszokhoz. Segítségével könnyen vizualizálható interaktív háromdimenziós glóbusz vagy bármilyen földrajzi információ.

http://people.inf.elte.hu/hagtabi/foldgomb

Koncepció

A Web World Wind egy komponens amely beágyazódik a weboldalba. Ezt a komponenst hívjuk World Windownak. A World Window objektum a funkcionalitást egy HTML canvas köré építi. A canvas általában egy "div" és az attribútumként megadott id-val paraméterezzük a World Window objektumot. Egy oldal több World Widow objektumot tartalmazhat, mindegyik canvashoz tartozik egy.

Az információk megjelenítéséhez rétegek szükségesek. Minden World Window tartalmaz egy listát (Layer List) amelyben ott vannak a hozzá tartozó layerek. Amikor a World Window kirajzolja az ablakot, akkor végigmegy ezen a listán és sorban megrajzolja a benne lévő layereket.

<div style="position:relative">
    <canvas id="canvasOne" width="1000" height="1000" style="width: 100%; height: auto">
    </canvas>
</div>

// Létrehozzuk a  World Window-t
var wwd = new WorldWind.WorldWindow("canvasOne");

// Létrehozzuk és hozzáadjuk a layereket
wwd.addLayer(new WorldWind.BMNGLayer());
wwd.addLayer(new WorldWind.BingAerialWithLabelsLayer(null));
wwd.addLayer(new WorldWind.CompassLayer());
wwd.addLayer(new WorldWind.CoordinatesDisplayLayer(wwd));
wwd.addLayer(new WorldWind.ViewControlsLayer(wwd));

Főbb funkcionalitások

Alakzatok

Szövegek

Egy adott földrajzi ponthoz tartozó szöveget reprezentál.

// Példa adat
var peaks =
[
{
                    'name': "Mount McKinley\n(Denali)", // Mount McKinley
                    'state': "Alaska",
                    'elevation': 6194,
                    'latitude': 63.0690,
                    'longitude': -151.0063
}];


var text,
    textAttributes = new WorldWind.TextAttributes(null),
    textLayer = new WorldWind.RenderableLayer("U.S.A. Peaks");

//Alap attribútumok beállítása (pl: szín)
textAttributes.color = WorldWind.Color.CYAN;
textAttributes.depthTest = false;

//Létrehozzuk a szöveg "alakzatokat"
for (var i = 0, len = peaks.length; i < len; i++) {
    var peak = peaks[i],
    peakPosition = new WorldWind.Position(peak.latitude, peak.longitude, peak.elevation);
    text = new WorldWind.GeographicText(peakPosition, peak.name + "\n" + peak.state);

    //Beállítjuk az alakzatohoz a szöveget
    text.attributes = textAttributes;

    //Hozzáadjuk a szöveget a layerhez
    textLayer.addRenderable(text);
}

//A szöveg layert hozzáadjuk a globál layerhez
wwd.addLayer(textLayer);

//Létrehozunk egy managert, hogy tudjuk vezérelni a szöveg réteget.
var layerManger = new LayerManager(wwd);

Utak

Egyenes vagy görbe vonalat reprezentál előre megadott pozíciók között. A megrajzolt vonal az alábbi típusú lehet:

• WorldWind.GREAT_CIRCLE
• WorldWind.RHUMB_LINE
• WorldWind.LINEAR

Az utat alkotó pontok közötti magasságot meghatározza az út magasság módja amely az alábbiak lehetnek:

• WorldWind.ABSOLUTE
• WorldWind.RELATIVE_TO_GROUND
• WorldWind.CLAMP_TO_GROUND

Külön attribútumok tartoznak a normál és a kiemelt megjelenítéshez.

// Úthoz tartozó poziciók létrehozása
var pathPositions = [];
pathPositions.push(new WorldWind.Position(40, -100, 1e4));
pathPositions.push(new WorldWind.Position(45, -110, 1e4));
pathPositions.push(new WorldWind.Position(46, -122, 1e4));

// Az út létrehozása
var path = new WorldWind.Path(pathPositions, null);
path.altitudeMode = WorldWind.RELATIVE_TO_GROUND;
path.followTerrain = true;
path.extrude = true;
path.useSurfaceShapeFor2D = true;

// Az úthoz tartozó attribútumok étrehozása
var pathAttributes = new WorldWind.ShapeAttributes(null);
pathAttributes.outlineColor = WorldWind.Color.BLUE;
pathAttributes.interiorColor = new WorldWind.Color(0, 1, 1, 0.5);
pathAttributes.drawVerticals = path.extrude;
path.attributes = pathAttributes;


// Kiemelés létrehozása
var highlightAttributes = new WorldWind.ShapeAttributes(pathAttributes);
highlightAttributes.outlineColor = WorldWind.Color.RED;
highlightAttributes.interiorColor = new WorldWind.Color(1, 1, 1, 0.5);
path.highlightAttributes = highlightAttributes;

//Az utat hozzáadjuk egy layerhez, és betesszük a globális layerbe
var pathsLayer = new WorldWind.RenderableLayer();
pathsLayer.displayName = "Paths";
pathsLayer.addRenderable(path);
wwd.addLayer(pathsLayer);

//Layermanager létrehozása
var layerManger = new LayerManager(wwd);

//Eseménykezelés a kiemeléshez
var highlightController = new WorldWind.HighlightController(wwd);

Poligonok

Egy 3D-s poligont reprezentál. A poligonnak több határt is beállíthatunk, ezzel üres területeteket képezve. A poligon magassága az alábbiak lehetnek:

• WorldWind.WorldWind.ABSOLUTE
• WorldWind.RELATIVE_TO_GROUND
• WorldWind.CLAMP_TO_GROUND

Külön attribútumok tartoznak a normál és a kiemelt megjelenítéshez.

//Létrehozzuk a poligonokat tároló réteget
var polygonsLayer = new WorldWind.RenderableLayer();
polygonsLayer.displayName = "Polygons";
wwd.addLayer(polygonsLayer);

//Létrehozzuk a poligon határait
var boundaries = [];
boundaries[0] = []; // külső határ
boundaries[0].push(new WorldWind.Position(40, -100, 1e5));
boundaries[0].push(new WorldWind.Position(45, -110, 1e5));
boundaries[0].push(new WorldWind.Position(40, -120, 1e5));

boundaries[1] = []; // belső határ
boundaries[1].push(new WorldWind.Position(41, -103, 1e5));
boundaries[1].push(new WorldWind.Position(44, -110, 1e5));
boundaries[1].push(new WorldWind.Position(41, -117, 1e5));

//Létrehozzuka a poligont és hozzáadjuk az attribútumait.

var polygon = new WorldWind.Polygon(boundaries, null);
polygon.altitudeMode = WorldWind.ABSOLUTE;
polygon.extrude = true; 

var polygonAttributes = new WorldWind.ShapeAttributes(null);
polygonAttributes.drawInterior = true;
polygonAttributes.drawOutline = true;
polygonAttributes.outlineColor = WorldWind.Color.BLUE;
polygonAttributes.interiorColor = new WorldWind.Color(0, 1, 1, 0.5);
polygonAttributes.drawVerticals = polygon.extrude;
polygonAttributes.applyLighting = true;
polygon.attributes = polygonAttributes;

//Létrehozzuk a poligonhoz tartozó kiemelést
var highlightAttributes = new WorldWind.ShapeAttributes(polygonAttributes);
highlightAttributes.outlineColor = WorldWind.Color.RED;
highlightAttributes.interiorColor = new WorldWind.Color(1, 1, 1, 0.5);
polygon.highlightAttributes = highlightAttributes;

//Hozzáadjuk a layerhez
polygonsLayer.addRenderable(polygon);

Helyjelző

Egy helyjelző objektumot reprezentál. Ez lehet kép,címke, rajzolt alakzat.