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.

World Window

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.

A World Window tartalmaz egy Globe-ot, egy Navigator-t és egy Layer List-et. Ezek automtiusan jönnek létre amikor a World Window konstruálódik. A Globe és Navigator lecserélhető. Ezeken felül a World Window felel még az eseménykezelésért.

Az World Window felépítése:

[1]

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

Rétegek

A World Wind mellett a rétegek a legfontosabb objektumok. Ezen rétegek tárolják a World Winden megjelenő összes információt. A képek, alakzatok, dekorációs elemek stb. mind-mind különálló rétegekben tárolódnak.

Minden World Wind objektum tartalmaz egy listát amely a rétegeket tartalmazza. Ezt nevezik Layer List-nek. Ez a lista tartalmazza az összes definiált réteget, és alapesetben üres. Amikor a World Wind rajzol, akkor bejárja ezt a listát és sorrendben megrajzolja a benne lévő rétegeket.

Fontosabb réteg attribútumok:

• displayName : Szöveg, a réteg nevét adhatjuk meg, és később ez megjeleníthető.
• enabled : Logikai, lehetővé teszi, hogy a réteget kikapcsoljuk, de közben a listában benne marad.
• pickEnabled : Logikai, megmondja, hogy a réteg és a tartalma "pickelhető-e".
• opacity : 0-1 közötti szám a réteg átlátszóságát szabályozza.

Két fontosabb rétegtípus van.

• Kép réteg: olyan képet tartalmaz amelyet a felszínre vetítünk ki. Ez tipikusan az egész földgömbre kiterjed de ez nem kötelező.
• Renderelhető réteg: akkor használjuk ha alakzatokat szeretnénk megjeleníteni.

1 // Létrehozzuk a  World Window-t
2 var wwd = new WorldWind.WorldWindow("canvasOne");
3 
4 // Létrehozzuk és hozzáadjuk a layereket
5 wwd.addLayer(new WorldWind.BMNGLayer());
6 wwd.addLayer(new WorldWind.BingAerialWithLabelsLayer(null));
7 wwd.addLayer(new WorldWind.CompassLayer());
8 wwd.addLayer(new WorldWind.CoordinatesDisplayLayer(wwd));
9 wwd.addLayer(new WorldWind.ViewControlsLayer(wwd));

Alakzatok

Alakzatok reprezentálják azokat az információkat amit meg szeretnénk jeleníteni és a földgömbhöz kapcsolódik. Egy ilyen objektum sokféle lehet, az egyszerű helyzet-jelölőtől kezdve a komplex rajzolt alakzatokig. Minden alakzat egy rétegben tárolódik és ez a réteg pedig megtalálható a World Wind Layer List-jében. Részletesen később.

Glóbusz

Globe reprezentál egy WGS84 elipszoidot és a területet. továbbá kezeli a különböző 2D-s projekciókat, ami használhatóak a +D-s glóbusz helyett. Alapesetben ezen kívül az alkalmazás nem nagyon lép interakcióba a glóbusszal. Ez alól kivétel például ha az alkalmazásunk a terület emelkedésével szeretne számolni.

Minden World Window-nak eg Globe-ja van és automatikusan létrejön, amikor a World Window is. Az alkalmazásban a Globe lecserélhető egy másikra.

Navigátor

A Navigator objektum felelős azért, hogy a felhasználói interakciókat átalakítsa a földgömbön megjelenő változásokká. Folyamatosan figyeli az egér eseményeket és ezeket alakítja át mozgássá, forgatássá vagy zoomolássá. A Navigator segítségével lehet egy adott pozícióra navigálni.

Minden World Wind objektumnak megvan a saját Navigator objektuma, Ez a Navigator automatikusan jön létre, akkor amikor a World Wind objektumok létrejön. Ez a Navigator lecserélhető, ha a fejlesztő készített egy másképp működőt amely jobban megfelel az igényeknek.

Főbb funkcionalitások

Alakzatok

Szövegek

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

 1 // Példa adat
 2 var peaks =
 3 [
 4 {
 5                     'name': "Mount McKinley\n(Denali)", // Mount McKinley
 6                     'state': "Alaska",
 7                     'elevation': 6194,
 8                     'latitude': 63.0690,
 9                     'longitude': -151.0063
10 }];
11 
12 
13 var text,
14     textAttributes = new WorldWind.TextAttributes(null),
15     textLayer = new WorldWind.RenderableLayer("U.S.A. Peaks");
16 
17 //Alap attribútumok beállítása (pl: szín)
18 textAttributes.color = WorldWind.Color.CYAN;
19 textAttributes.depthTest = false;
20 
21 //Létrehozzuk a szöveg "alakzatokat"
22 for (var i = 0, len = peaks.length; i < len; i++) {
23     var peak = peaks[i],
24     peakPosition = new WorldWind.Position(peak.latitude, peak.longitude, peak.elevation);
25     text = new WorldWind.GeographicText(peakPosition, peak.name + "\n" + peak.state);
26 
27     //Beállítjuk az alakzatohoz a szöveget
28     text.attributes = textAttributes;
29 
30     //Hozzáadjuk a szöveget a layerhez
31     textLayer.addRenderable(text);
32 }
33 
34 //A szöveg layert hozzáadjuk a globál layerhez
35 wwd.addLayer(textLayer);
36 
37 //Létrehozunk egy managert, hogy tudjuk vezérelni a szöveg réteget.
38 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.

 1 // Úthoz tartozó poziciók létrehozása
 2 var pathPositions = [];
 3 pathPositions.push(new WorldWind.Position(40, -100, 1e4));
 4 pathPositions.push(new WorldWind.Position(45, -110, 1e4));
 5 pathPositions.push(new WorldWind.Position(46, -122, 1e4));
 6 
 7 // Az út létrehozása
 8 var path = new WorldWind.Path(pathPositions, null);
 9 path.altitudeMode = WorldWind.RELATIVE_TO_GROUND;
10 path.followTerrain = true;
11 path.extrude = true;
12 path.useSurfaceShapeFor2D = true;
13 
14 // Az úthoz tartozó attribútumok étrehozása
15 var pathAttributes = new WorldWind.ShapeAttributes(null);
16 pathAttributes.outlineColor = WorldWind.Color.BLUE;
17 pathAttributes.interiorColor = new WorldWind.Color(0, 1, 1, 0.5);
18 pathAttributes.drawVerticals = path.extrude;
19 path.attributes = pathAttributes;
20 
21 
22 // Kiemelés létrehozása
23 var highlightAttributes = new WorldWind.ShapeAttributes(pathAttributes);
24 highlightAttributes.outlineColor = WorldWind.Color.RED;
25 highlightAttributes.interiorColor = new WorldWind.Color(1, 1, 1, 0.5);
26 path.highlightAttributes = highlightAttributes;
27 
28 //Az utat hozzáadjuk egy layerhez, és betesszük a globális layerbe
29 var pathsLayer = new WorldWind.RenderableLayer();
30 pathsLayer.displayName = "Paths";
31 pathsLayer.addRenderable(path);
32 wwd.addLayer(pathsLayer);
33 
34 //Layermanager létrehozása
35 var layerManger = new LayerManager(wwd);
36 
37 //Eseménykezelés a kiemeléshez
38 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.

 1 //Létrehozzuk a poligonokat tároló réteget
 2 var polygonsLayer = new WorldWind.RenderableLayer();
 3 polygonsLayer.displayName = "Polygons";
 4 wwd.addLayer(polygonsLayer);
 5 
 6 //Létrehozzuk a poligon határait
 7 var boundaries = [];
 8 boundaries[0] = []; // külső határ
 9 boundaries[0].push(new WorldWind.Position(40, -100, 1e5));
10 boundaries[0].push(new WorldWind.Position(45, -110, 1e5));
11 boundaries[0].push(new WorldWind.Position(40, -120, 1e5));
12 
13 boundaries[1] = []; // belső határ
14 boundaries[1].push(new WorldWind.Position(41, -103, 1e5));
15 boundaries[1].push(new WorldWind.Position(44, -110, 1e5));
16 boundaries[1].push(new WorldWind.Position(41, -117, 1e5));
17 
18 //Létrehozzuka a poligont és hozzáadjuk az attribútumait.
19 
20 var polygon = new WorldWind.Polygon(boundaries, null);
21 polygon.altitudeMode = WorldWind.ABSOLUTE;
22 polygon.extrude = true; 
23 
24 var polygonAttributes = new WorldWind.ShapeAttributes(null);
25 polygonAttributes.drawInterior = true;
26 polygonAttributes.drawOutline = true;
27 polygonAttributes.outlineColor = WorldWind.Color.BLUE;
28 polygonAttributes.interiorColor = new WorldWind.Color(0, 1, 1, 0.5);
29 polygonAttributes.drawVerticals = polygon.extrude;
30 polygonAttributes.applyLighting = true;
31 polygon.attributes = polygonAttributes;
32 
33 //Létrehozzuk a poligonhoz tartozó kiemelést
34 var highlightAttributes = new WorldWind.ShapeAttributes(polygonAttributes);
35 highlightAttributes.outlineColor = WorldWind.Color.RED;
36 highlightAttributes.interiorColor = new WorldWind.Color(1, 1, 1, 0.5);
37 polygon.highlightAttributes = highlightAttributes;
38 
39 //Hozzáadjuk a layerhez
40 polygonsLayer.addRenderable(polygon);

Helyjelző

Bármilyen pozíción megjelenő képet/címkét reprezentál. Lehet használni a beépített képeket vagy használhatunk sajátot, illetve a html-el is lehet rajzolni.

 1 // Definiáljuk a képeket amiket helyjelzőnek használunk.
 2 var images = [
 3 	"plain-black.png",
 4 	"plain-blue.png"
 5 ];
 6 
 7 var pinLibrary = WorldWind.configuration.baseUrl + "images/pushpins/", // a képek helye
 8 	placemark,
 9 	placemarkAttributes = new WorldWind.PlacemarkAttributes(null),
10 	highlightAttributes,
11 	placemarkLayer = new WorldWind.RenderableLayer("Placemarks"),
12 	latitude = 47.684444,
13 	longitude = -121.129722;
14 
15 // Létrehozzuk a közös attribútumokat.
16 placemarkAttributes.imageScale = 1;
17 placemarkAttributes.imageOffset = new WorldWind.Offset(
18 	WorldWind.OFFSET_FRACTION, 0.3,
19 	WorldWind.OFFSET_FRACTION, 0.0);
20 placemarkAttributes.imageColor = WorldWind.Color.WHITE;
21 placemarkAttributes.labelAttributes.offset = new WorldWind.Offset(
22 	WorldWind.OFFSET_FRACTION, 0.5,
23 	WorldWind.OFFSET_FRACTION, 1.0);
24 placemarkAttributes.labelAttributes.color = WorldWind.Color.YELLOW;
25 placemarkAttributes.drawLeaderLine = true;
26 placemarkAttributes.leaderLineAttributes.outlineColor = WorldWind.Color.RED;
27 
28 // Minden képhez létrehozunk egy Placemarkot és címkét
29 for (var i = 0, len = images.length; i < len; i++) {
30 	
31 	
32 	placemark = new WorldWind.Placemark(new WorldWind.Position(latitude, longitude + i, 1e2), true, null);
33 	placemark.label = "Placemark " + i.toString() + "\n"
34 	+ "Lat " + placemark.position.latitude.toPrecision(4).toString() + "\n"
35 	+ "Lon " + placemark.position.longitude.toPrecision(5).toString();
36 	placemark.altitudeMode = WorldWind.RELATIVE_TO_GROUND;
37 
38 	.
39 	placemarkAttributes = new WorldWind.PlacemarkAttributes(placemarkAttributes);
40 	placemarkAttributes.imageSource = pinLibrary + images[i];
41 	placemark.attributes = placemarkAttributes;
42 
43 	//Létrehozzuk a kiemeléshez tartozó attribútumokat
44 	highlightAttributes = new WorldWind.PlacemarkAttributes(placemarkAttributes);
45 	highlightAttributes.imageScale = 1.2;
46 	placemark.highlightAttributes = highlightAttributes;
47 
48 	//Hozzáadjuk a réteghez.
49 	placemarkLayer.addRenderable(placemark);
50 }
51 
52 // Hozzáadjuk a réteget a globális réteghez.
53 wwd.addLayer(placemarkLayer);
54 
55 // Létrehozunk egy Layermanagert a kezelhetőségért
56 var layerManger = new LayerManager(wwd);

További alakzatok

• Felszíni alakzatok: Hasonlóak a fent taglalt Poligonokhoz. (Surface Shapes)
• Képernyő kép: Segítségével képernyő-re képet rajzolhatunk. (Screen Image)
• Képernyő szöveg : Segítségével szöveget helyezhetünk el a képernyőn. (Screen Text)