„NASA World Wind SDK” változatai közötti eltérés
(→Szövegek) |
(→Alakzatok) |
||
136. sor: | 136. sor: | ||
//Eseménykezelés a kiemeléshez | //Eseménykezelés a kiemeléshez | ||
var highlightController = new WorldWind.HighlightController(wwd); | var highlightController = new WorldWind.HighlightController(wwd); | ||
+ | |||
+ | </syntaxhighlight > | ||
+ | |||
+ | ====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. | ||
+ | |||
+ | <syntaxhighlight lang="javascript" line='line'> | ||
+ | |||
+ | //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); | ||
</syntaxhighlight > | </syntaxhighlight > |
A lap 2017. május 3., 10:45-kori változata
Tartalomjegyzék
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.
1 <div style="position:relative">
2 <canvas id="canvasOne" width="1000" height="1000" style="width: 100%; height: auto">
3 </canvas>
4 </div>
5
6 // Létrehozzuk a World Window-t
7 var wwd = new WorldWind.WorldWindow("canvasOne");
8
9 // Létrehozzuk és hozzáadjuk a layereket
10 wwd.addLayer(new WorldWind.BMNGLayer());
11 wwd.addLayer(new WorldWind.BingAerialWithLabelsLayer(null));
12 wwd.addLayer(new WorldWind.CompassLayer());
13 wwd.addLayer(new WorldWind.CoordinatesDisplayLayer(wwd));
14 wwd.addLayer(new WorldWind.ViewControlsLayer(wwd));
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);