Trójwymiarowa wizualizacja danych przestrzennych

Marek Kulawiak – Katedra Systemów Geoinformatycznych, Wydział ETI
Trójwymiarowa wizualizacja
danych przestrzennych
Laboratorium 3. Cesium
1
Marek Kulawiak – Katedra Systemów Geoinformatycznych, Wydział ETI
Wprowadzenie
Cesium jest biblioteką umożliwiającą wyświetlanie informacji przestrzennej na powierzchni
trójwymiarowego globu za pomocą przeglądarki internetowej. Jest to technologia oparta na
standardzie WebGL, zatem nie wymaga ona instalacji dodatkowych wtyczek.
Zadanie 0.
Rozpakuj zawartość archiwum CesiumPortable.zip do nowego katalogu na dysku, a następnie
uruchom program usbwebserver.exe. Poświęć kilka minut na zapoznanie się z zestawem
przykładowych skryptów dostępnych w przeglądarce internetowej pod adresem
http://localhost:8080/Apps/Sandcastle/index.html.
Następnie
stwórz
kopię
pliku
HelloWorld.html znajdującego się w katalogu CesiumPortable/root/Apps i wykorzystaj ją do
wykonania kolejnych zadań.
Zadanie 1. (0,25 punktu)
Uzupełnij kod strony w taki sposób, żeby wyświetlana scena zawierała trójwymiarowy model
terenu (składający się m.in. z gór i dolin).
Zadanie 2. (0,5 punktu)
Dodaj do aplikacji nowy obiekt tekstowy, który będzie na bieżąco wypisywał następujące
wartości: aktualną pozycję (długość geograficzną, szerokość geograficzną, wysokość) oraz
wybrane przez Ciebie informacje o obrocie kamery. Ogranicz długość wypisywanych liczb
do 3-4 cyfr po przecinku.
Wskazówka:
zapoznaj
się
z
dokumentacją
(http://localhost:8080/Build/Documentation/Camera.html)
klasy
Camera
Zadanie 3. (0,25 punktu)
Spraw, by przy uruchomieniu strony kamera automatycznie się ustawiała w wybranym przez
Ciebie miejscu zawierającym teren o zauważalnie zróżnicowanej wysokości. Zadbaj o to, by
obiekty dodawane w kolejnych etapach znajdowały się w zasięgu widoczności kamery.
Zadanie 4. (1 punkt)
Dodaj do sceny obrazek (billboard), nad którym wyświetlane będzie pole tekstowe (label)
zawierające Twój numer indeksu - jeśli jest on parzysty, wówczas obrazek powinien
przedstawiać żółty krzyżyk, w przeciwnym wypadku obrazek powinien zawierać błękitną
strzałkę.
Zadanie 5. (0,25 punktu)
Umieść w świecie nowy obiekt entity posiadający bryłę typu cylinder. Jeśli masz parzysty
numer indeksu, wówczas bryła powinna mieć kształt stożka, w przeciwnym wypadku
powinna ona przyjąć formę półprzezroczystego walca.
2
Marek Kulawiak – Katedra Systemów Geoinformatycznych, Wydział ETI
Zadanie 6. (1 punkt)
Dodaj obiekt zawierający ścieżkę (path) w kształcie sześciokąta, który będzie otaczał bryłę
z poprzedniego zadania. Spraw, żeby wzdłuż ścieżki poruszał się jakiś pojazd, którego podróż
będzie rozpoczynać się o pełnej godzinie i trwać 60 minut.
Zadanie 7. (0,25 punktu)
Dodaj do strony przycisk umożliwiający włączanie i wyłączanie trybu interpolacji ścieżki
z poprzedniego zadania (zinterpolowana ścieżka powinna mieć kształt przypominający
okrąg). Aby przycisk elegancko się komponował z pozostałą częścią aplikacji, możesz
skorzystać z poniższego przykładu:
<div id="buttonContainer" style="position:absolute;
z-index:1;">
<button onclick="toggleInterpolation()"
class="cesium-button">Toggle interpolation</button>
</div>
Zadanie 8. (0,5 punktu)
Dodaj kolejny przycisk, którego wciśnięcie będzie powodowało zmianę kierunku ruchu
pojazdu z zadania 7.
Wskazówka: najprostszym rozwiązaniem będzie usuwanie całego obiektu i zastępowanie go
nowym.
Przykładowe zadania poprawkowe:
1. Przygotuj stronę internetową, która za pomocą technologii Cesium będzie w możliwie
największym stopniu przypominała w pełni wykonane ćwiczenie z Google Earth API.
(4 punkty)
3