[PENDING] The web platform will include three-dimensional data as well as two-dimensional data

(1)

Σχολή Θετικών Επιστημών και Τεχνολογίας

Μεταπτυχιακή Εξειδίκευση στα Πληροφοριακά Συστήματα MSc

Διπλωματική Εργασία

«Ηλεκτρονική πλατφόρμα για τη διαχείριση και την οπτικοποίηση διδιάστατων και τριδιάστατων γεωγραφικών

πληροφοριών»

Αντωνία Μαγκαφώση

Επιβλέπων καθηγητής: Δημήτριος Καραπιπέρης

Αθήνα, Ιούνιος 2020

(2)

Η παρούσα εργασία αποτελεί πνευματική ιδιοκτησία της φοιτήτριας («Μαγκαφώση Αντωνίας») που την εκπόνησε. Στο πλαίσιο της πολιτικής ανοικτής πρόσβασης η συγγραφέας/δημιουργός εκχωρεί στο ΕΑΠ, μη αποκλειστική άδεια χρήσης του δικαιώματος αναπαραγωγής, προσαρμογής, δημόσιου δανεισμού, παρουσίασης στο κοινό και ψηφιακής διάχυσής τους διεθνώς, σε ηλεκτρονική μορφή και σε οποιοδήποτε μέσο, για διδακτικούς και ερευνητικούς σκοπούς, άνευ ανταλλάγματος και για όλο το χρόνο διάρκειας των δικαιωμάτων πνευματικής ιδιοκτησίας. Η ανοικτή πρόσβαση στο πλήρες κείμενο για μελέτη και ανάγνωση δεν σημαίνει καθ’ οιονδήποτε τρόπο παραχώρηση δικαιωμάτων διανοητικής ιδιοκτησίας του συγγραφέα/δημιουργού ούτε επιτρέπει την αναπαραγωγή, αναδημοσίευση, αντιγραφή, αποθήκευση, πώληση, εμπορική χρήση, μετάδοση, διανομή, έκδοση, εκτέλεση, «μεταφόρτωση» (downloading), «ανάρτηση»

(uploading), μετάφραση, τροποποίηση με οποιονδήποτε τρόπο, τμηματικά ή περιληπτικά της εργασίας, χωρίς τη ρητή προηγούμενη έγγραφη συναίνεση της συγγραφέος/δημιουργού. Η συγγραφέας/δημιουργός διατηρεί

(3)

«Ηλεκτρονική πλατφόρμα για τη διαχείριση και την οπτικοποίηση διδιάστατων και τριδιάστατων γεωγραφικών

πληροφοριών»

Αντωνία Μαγκαφώση

Επιτροπή Επίβλεψης Πτυχιακής / Διπλωματικής Εργασίας Επιβλέπων Καθηγητής:

Δημήτριος Καραπιπέρης Ε.Α.Π

Συν-Επιβλέπων Καθηγητής:

Βασίλειος Βερύκιος Ε.Α.Π

Αθήνα, Ιούνιος 2020

(4)

«Στους γονείς μου και στον Daniele»

(5)

Περίληψη

Το αντικείμενο αυτής της εργασίας είναι η ενσωμάτωση διαφόρων τύπων δεδομένων από διαφορετικούς πόρους σε μια μοναδική διαδικτυακή πλατφόρμα. Η διαδικτυακή πλατφόρμα θα περιλαμβάνει τριδιάστατα δεδομένα αλλά και διδιάστατα δεδομένα. Καθώς τα δεδομένα θα είναι γεωχωρικά, η πλατφόρμα μπορεί να αναφέρεται ως πλατφόρμα WebGIS. Θα είναι ένα προϊόν μεταξύ γεωγραφικών συστημάτων πληροφοριών και διαδικτυακής πλατφόρμας χρησιμοποιώντας αποκλειστικά βιβλιοθήκες ανοιχτού κώδικα.

Αυτό το προϊόν θα έχει προεγκατεστημένα παραδείγματα δεδομένων για καθένα από τους διαφορετικούς τύπους, αλλά θα εισαγάγει επίσης έναν νέο τρόπο φόρτωσης δεδομένων από τον χρήστη.

Λέξεις – Κλειδιά

Ηλεκτρονική πλατφόρμα, Γεωγραφικά συστήματα πληροφοριών, Τρισδιάστατες πληροφορίες, Νέφη σημείων, Πλέγμα

(6)

«Web platform for the management and visualization of 2D and 3D geographical information»

Antonia Magkafosi

Abstract

The subject matter of this thesis is the integration of various types of data from different recourses into a unique web platform. The web platform will include three-dimensional data as well as two-dimensional data. As the data will be geospatial the platform can be referred as a WebGIS platform. It will be a product between geographical information systems and web platform using exclusively open source libraries. This product will be prebuilt with example data for each of the different types but it will also introduce a new way for the users to load their own datasets.

Keywords

Web platform, GIS, 3D, Point cloud, Mesh

(7)

Περιεχόμενα

Περίληψη ... 5

Abstract ... 6

Περιεχόμενα ... 7

Κατάλογος Εικόνων / Σχημάτων ... 8

Συντομογραφίες & Ακρωνύμια ... 9

1. Εισαγωγή ... 10

1.1 Πρόλογος ... 10

1.2 Σκοπός ... 11

1.3 Δομή ... 12

2. Βιβλιογραφική αναφορά (state of the art) ... 13

3. Μεθοδολογία και εργαλεία ... 16

3.1 Αρχιτεκτονική ... 16

3.2 Δεδομένα ... 17

3.2.1 Δεδομένα ηλεκτρονικής πλατφόρμας ... 17

3.2.2 Διδιάστατα δεδομένα ... 18

3.2.3 Τριδιάστατα δεδομένα ... 20

3.3 Εργαλεία ... 21

3.3.1 Εργαλεία για τη διαμόρφωση διακομιστή ιστοσελίδων (configuration of web server)... 21

3.3.2 Βιβλιοθήκες για οπτικοποίηση διδιάστατων δεδομένων ... 23

3.3.3 Βιβλιοθήκες για οπτικοποίηση τριδιάστατων δεδομένων ... 24

4. Εφαρμογή ... 25

5. Συμπεράσματα ... 48

Βιβλιογραφία ... 49

Παράρτημα Α: «Κώδικας σε javascript» ... 51

(8)

Κατάλογος Εικόνων / Σχημάτων

Εικόνα 1: Εξέλιξη των βιβλιοθηκών και εφαρμογών ... 14

Εικόνα 2 : Τύποι χωρικών δεδομένων... 18

Εικόνα 3 : Αρχική σελίδα ηλεκτρονικής πλατφόρμας ... 25

Εικόνα 4 : Κύρια προβολή μενού πλοήγησης ... 26

Εικόνα 5 : Οπτικοποίηση διδιάστατων χαρτών σε μορφή υδρόγειας σφαίρας ... 27

Εικόνα 8 : Οπτικοποίηση διδιάστατων διανυσματικών αρχείων... 33

Εικόνα 9 : Οπτικοποίηση διδιάστατων διανυσματικών αρχείων... 37

Εικόνα 10... 38

Εικόνα 13 : Οπτικοποίηση νέφους σημείων ... 40

Εικόνα 16 : Οπτικοποίηση τριδιάστατων μοντέλων ... 44

Εικόνα 17 : Οπτικοποίηση τριδιάστατων μοντέλων ... 46

Εικόνα 18 : Μεταμόρφωση δεδομένων στο υπομενού της κύριας προβολής ... 46

(9)

Συντομογραφίες & Ακρωνύμια

ΔΕ Διπλωματική Εργασία

ΕΑΠ Ελληνικό Ανοικτό Πανεπιστήμιο ΘΕ Θεματική Ενότητα

ΠΣ Πρόγραμμα Σπουδών

CSS Cascading Style Sheets

EPSG European Petroleum Survey Group GIS Geographical Information System GML Geography Markup Language HTML HyperText Markup Language TIN Triangulated Irregular Network WebGL Web Graphics Library

WCS Web Coverage Service WFS Web Feature Service WMS Web Map Service

W3C World Wide Web Consortium XML Extensible Markup Language

(10)

1. Εισαγωγή

1.1 Πρόλογος

Τα τελευταία χρόνια, οι εξελίξεις στο χώρο της τεχνολογίας είναι ραγδαίες με θετικές επιρροές σε πάρα πολλούς τομείς. Η πρόσβαση στα δεδομένα και τις πληροφορίες έχει γίνει πολύ ευκολότερη χάρη στη σύνδεση στο διαδίκτυο. Για το λόγο αυτό όλο και περισσότερες εφαρμογές βασίζονται πλέον στον ιστό. Η ποικιλία των διαδικτυακών αυτών εφαρμογών που χρησιμοποιούνται επί του παρόντος εξαπλώνεται επίσης. Δεν αρκούμαστε πλέον μόνο σε εφαρμογές συστημάτων που χρησιμοποιούν δεδομένα που περιέχουν μόνο περιγραφική πληροφορία (Information Systems) αλλά και σε εφαρμογές συστημάτων γεωγραφικών πληροφοριών (Geographic Information Systems). Οι τελευταίες παρέχουν τη δυνατότητα σύνδεσης της περιγραφικής πληροφορίας με τη χωρική πληροφορία. Μέσω των εφαρμογών αυτών παρέχεται η δυνατότητα της συλλογής, διαχείρισης, αποθήκευσης, επεξεργασίας, ανάλυσης και οπτικοποίησης των λεγόμενων γεωχωρικών ή γεωγραφικών δεδομένων. Οι εφαρμογές που έχουν γίνει για διάφορους σκοπούς μπορούν να χρησιμοποιηθούν εύκολα χωρίς λογισμικό GIS μέσω του Διαδικτύου. Οι χρήστες μπορούν να έχουν πρόσβαση στην τρέχουσα βάση δεδομένων χωρίς χρονικούς περιορισμούς και με χαμηλό κόστος, με έναν υπολογιστή συνδεδεμένο στο διαδίκτυο και ένα πρόγραμμα περιήγησης στο διαδίκτυο.

Επιπλέον, οι χρήστες σε διαφορετικές πλατφόρμες μπορούν να χρησιμοποιήσουν ταυτόχρονα τα δεδομένα.

Παράλληλα με τις τεχνολογικές εξελίξεις, οι συμβατικοί τρόποι χαρτογράφησης και παρουσίασης των γεωχωρικών δεδομένων έχουν αλλάξει σημαντικά. Τα τριδιάστατα μοντέλα έχουν καταστεί σημαντικά για πολλά πεδία εφαρμογής, όπως εργασίες προσομοίωσης και απεικόνισης για πλοήγηση, πολεοδομία, περιβαλλοντική παρακολούθηση, διαχείριση καταστροφών καθώς και άλλες ειδικές εφαρμογές. Παρόλο που επί του παρόντος τα περισσότερα τριδιάστατα μοντέλα χρησιμοποιούνται για σκοπούς απεικόνισης , οι περιοχές εφαρμογής τους αυξάνονται συνεχώς. Η παρουσίαση αυτών των μοντέλων στον ιστό γίνεται επίσης πιο συνηθισμένη από πριν, ενώ ξεπερνά τα προβλήματα επιδόσεων με νεώτερους τύπους δεδομένων και λειτουργικότητες. Μιλάμε πλέον για Web GIS αντί για GIS για επιτραπέζιους υπολογιστές Το μεγαλύτερο πλεονέκτημα της χρήσης

(11)

περιηγητών ιστού είναι ότι μπορούν να ανακτηθούν παντού χωρίς πρόσθετες απαιτήσεις λογισμικού.

1.2 Σκοπός

Παρά την εξέλιξη αυτή και το γεγονός ότι η τριδιάστατη (3D) οπτικοποίηση στον ιστό είναι μια κοινώς χρησιμοποιούμενη προσέγγιση στις εφαρμογές συστημάτων γεωγραφικών πληροφοριών (GIS) οι περισσότερες εφαρμογές που βασίζονται στον ιστό είναι επί πλήρωμή. Επιπλέον πολλές από τις υπάρχουσες εφαρμογές ελεύθερου λογισμικού περιορίζονται στην οπτικοποίηση είτε μόνο διδιάστατων πληροφοριών είτε μόνο τριδιάστατων χωρίς τη δυνατότητα ενσωμάτωσης μεταδεδομένων από διαφορετικές πηγές.

Η οπτικοποίηση παραμένει πάρα πολύ χρήσιμη για την καλύτερη κατανόηση κατά την ανάλυση των χωρικών δεδομένων αλλά δεν αρκεί για τη βελτίωση της εξαγωγής αποτελεσμάτων. Απαραίτητη είναι η χωρική ανάλυση μέσω χωρικών ερωτημάτων όπως η πλησιέστερη απόσταση, η βέλτιστη διαδρομή, η μεγαλύτερη συγκέντρωση πληθυσμού.

Έχοντας υπόψη ότι όλα τα παραπάνω ερωτήματα μπορούν να γίνουν εύκολα στον ιστό θα ήταν χρήσιμος ο συνδυασμός όλων των στοιχείων σε μια ηλεκτρονική πλατφόρμα. Συνεπώς σκοπός της εργασίας αυτής είναι η δημιουργία μιας ηλεκτρονικής πλατφόρμας που θα ενσωματώνει τη δυνατότητα οπτικοποίησης διδιάστατης και τριδιάστατης πληροφορίας αλλά και των μεταδεδομένων χρησιμοποιώντας βιβλιοθήκες ανοιχτού κώδικα.

(12)

1.3 Δομή

Η παρουσα διπλωματική εργασία διαρθρώνεται σε 5 κεφάλαια και είναι οργανωμένη ως εξής:

▪ Στο πρώτο κεφάλαιο παρουσιάζεται ο στόχος και προσδιορίζεται το αντικείμενο της εργασίας.

▪ Στο δεύτερο κεφάλαιο γίνεται μια αναφορά στις ήδη υπάρχουσες εφαρμογές.

▪ Στο τρίτο κεφάλαιο γίνεται περιγραφή όλων των απαραίτητων στοιχείων, μεθοδολογιών και εργαλείων για την υλοποίηση της εφαρμογής.

▪ Στο τέταρτο κεφάλαιο περιγράφεται η πρακτική εφαρμογή και τα αποτελέσματά της.

▪ Στο πέμπτο κεφάλαιο περιλαμβάνονται τα συμπεράσματα, τα σχόλια και οι προτάσεις που απορρέουν από την ανάλυση και την εφαρμογή.

Τέλος παρατίθεται η βιβλιογραφία.

(13)

2. Βιβλιογραφική αναφορά (state of the art)

Λαμβάνοντας υπόψη τα πλεονεκτήματα που προσφέρει ένα σύστημα γεωγραφικών πληροφοριών στο διαδίκτυο με δυνατότητα οπτικοποίησης τόσο διδιάστατων όσο και τριδιάστατων πληροφοριών καθώς και τους πολυπληθείς τομείς εφαρμογής τους αναμενόμενη είναι η ολοένα και μεγαλύτερη ενασχόληση της ακαδημαικής κοινότητας και όχι μόνο με την έρευνα τέτοιων συστημάτων.

Αρχικά κατά την περίοδο της άνθισης του διαδικτύου έγινε η πρώτη εμφάνιση εφαρμογών γεωγραφικών πληροφοριών οι οποίες δεν ήταν πλέον επιτραπέζιες και περιέιχαν διδιάστατους χάρτες δίνοντας τη δυνατότητα πλοήγησης σε αυτούς μέσω ενεργειών που σήμερα φαντάζουν δεδομένες, όπως η μεγέθυνση, η εναλλαγή από ένα περιβάλλoν σε άλλο, η δυνατότητα χρήσης εργαλείων για την ανάκτηση πληροφοριών.

Στη συνέχεια με την πάροδο του χρόνου εμπλουτίστηκαν οι διαδικτυακές αυτές εφαρμογές και αυξήθηκαν με μεγάλο ρυθμό κυρίως λόγω της εμφάνισης υπηρεσιών όπως Web Feature Service, Web Map Service, Web Coverage Service που διευκόλυναν τη διανομή γεωχωρικών δεδομένων στον ιστό. Για αυτές τις υπηρεσίες χαρτογράφησης ιστοσελίδων χρησιμοποιείται η GML (Geography Markup Language) για να εκφράσει τα γεωγραφικά χαρακτηριστικά βασιζόμενη στην γλώσσα XML (Extensible Markup Language), η οποία αποτελεί μια γλώσσα σήμανσης που περιέχει ένα σύνολο κανόνων για την ηλεκτρονική κωδικοποίηση κειμένων. Από τις πιο δημοφιλείς εφαρμογές αποτελεί το ArcIMS της ESRI, αλλά και εφαρμογές ανοιχτού κώδικα όπως το GeoServer, το οποίο υλοποίηθηκε με βάση τις προδιαγραφές των προαναφερθέντων προτύπων επιτρέποντας τη δημοσίευση χωρικών δεδομένων απευθείας στον ιστό.

(14)

Εικόνα 1: Εξέλιξη των βιβλιοθηκών και εφαρμογών

Όπως φαίνεται και στην παραπάνω εικόνα (Εικόνα 1) όμως μέχρι και τα πρώτα έτη του 2000 οι εφαρμογές του διαδικτύου περιορίζονταν στην οπτικοποίηση μόνο διδιάστατων γεωγραφικών δεδομένων και πληροφοριών. Η οπτικοποίηση τριδιάστατων γεωγραφικών δεδομένων πραγματοποιήθηκε αρχικά μέσω προσθηκών όπως αυτό της Google Earth. Οι προσθήκες αυτές ανέδειξαν τη χρησιμότητα εκμετάλλευσης των τριδιαστατων μοντέλων.

Όμως η μεγάλη εξέλιξη στην οπτικοποίηση των δεδομένων ήρθε με την εμφάνιση της διεπαφής προγραμματισμού WebGL βασισμένη σε JavaScript, η οποία δίνει τη δυνατότητα αναπαράστασης γραφικών χωρίς τη χρήση προσθηκών (plug-ins) και είναι συμβατή με τους περισσότερους φυλλομετρητές ιστού. Κατ’επέκταση τα τελευταία χρόνια αναπτύχθηκαν νέες βιβλιοθήκες χρησιμοποιώντας το WebGL για την απεικόνιση της τριδιάστατης πληροφορίας. Χαρακτηριστικό παράδειγμα, η βιβλιοθήκη ανοιχτού λογισμικού Cesium.js, στην οποία βασίστηκαν αρκετές έρευνες και εφαρμογές. Μεταξύ αυτών είναι η εφαρμογή Terra Explorer for Web η οποία παρέχει τη δυνατότητα πλοήγησης σε ένα τριδιάστατο μοντέλο της γης αλλά και εργαλείων ανάλυσης του περιεχομένου της εφαρμογής. Φυσικά κάποια από τα πρόσθετα στοιχεία που παρέχει είναι επι πληρωμή και δε δίνεται η δυνατότητα εισαγωγής και ανάλυσης νέων δεδομένων παρά μόνο των ήδη υπαρχόντων.

Αξιοσημείωτη είναι και η δημοσίευση με τίτλο Development of 3d web gis application with open source library που παρουσιάστηκε στο συνέδριο που πραγματοποιήθηκε στο Αζερμπαιτζάν το 2018 το Eurasian GIS Conference αλλά και η δημοσίευση με τίτλο

(15)

their geometric and semantic characteristics by using free and open source technology που παρουσιάστηκε στο συνέδριο που πραγματοποιήθηκε στην Ελλάδα το 2016, το 3d geoinfo conference. Η πρώτη δημοσίευση στοχεύει, όπως και η παρούσα εργασία στην ανάπτυξη μιας τριδιάστατης διαδικτυακής εφαρμογής χρησιμοποιώντας βιβλιοθήκη ανοιχτού κώδικα με κύρια διαφορά ότι στην παρούσα διπλωματική στόχος είναι να δοθεί η δυνατότητα εισαγωγής δεδομένων διαφoρετικών τυπολογιών, όπως point cloud, mesh και γίνεται προσπάθεια όχι μόνο οπτικοποίησης δεδομένων αλλά και δυνατότητα ανάλυσης τους με αντίστοιχα εργαλεία. Στην αναφερόμενη δημοσίευση τα στοιχεία που παρουσιάζονται είναι διανυσματικά και κανονικοποιημένα δεδομένα και τυπολογίες αρχείων GeoJSON και glTF.

Από την άλλη πλευρά η δεύτερη δημοσίευση είναι πιο προσανατολισμένη σε μοντέλα πόλεων και έχει ως σκοπό την οπτικοποίηση δεδομένων CityGML και την εξαγωγή πληροφοριών από αυτά. Φυσικά υπάρχουν και πάρα πολλές αναφορές 3D web gis με διαφορετικές εφαρμογές της τεχνολογίας αυτής, αναφορές με σκοπό την διαχείριση δεδομένων υδρολογίας (5), ενεργειακών μελετών (1), επίλυση χωρικών προβλημάτων (4) και ακόμη περισσότερες.

(16)

3. Μεθοδολογία και εργαλεία

3.1 Αρχιτεκτονική

Για την υλοποίηση μιας εφαρμογής αρχικά πρέπει να επιλεγεί η αρχιτεκτονική του συστήματος, η οποία περιγράφει την κατανομή των μονάδων λογισμικού σε υπολογιστικά συστήματα αλλά και τις προδιαγραφές των συστημάτων αυτών. Τα συστατικά της αρχιτεκτονικής είναι το υλικό και το λογισμικό. Το υλικό αποτελείται από τους υπολογιστές πελάτες, τους εξυπηρετητές και το δίκτυο. Το λογισμικό επιτρέπει ενέργειες πρόσβασης δεδομένων, ενέργειες για την υλοποίηση της εφαρμογής και ενέργειες παρουσίασης.

Έχοντας ορίσει τα βασικά στοιχεία της αρχιτεκτονικής μπορούμε να προχωρήσουμε στη σχεδίαση της ακολουθώντας τα αρχιτεκτονικά πρότυπα που έχουν ήδη δημιουργηθεί(

μοντέλο πελάτη-εξυπηρετητή, μοντέλο-όψη-ελεγκτής). Η επιλογή του προτύπου έγκειται στις ανάγκες της εφαρμογής. Συνεπώς τα κριτήρια ορίζονται με βάση την ευελιξία που ζητείται από την εφαρμογή, την απόδοση, την αξιοπιστία, την προσαρμοστικότητα, την επεκτασιμότητα και την διατήρησή της. Επιλέγεται, λοιπόν η αρχιτεκτονική τύπου πελάτη- εξυπηρετητή η οποία είναι και από τις πλέον χρησιμοποιούμενες. Τα χαρακτηριστικά που την κάνουν ιδανική είναι η δυνατότητα λειτουργίας σε διαφορετικά λειτουργικά συστήματα, η ευκολία αλλαγής μέρους της αρχιτεκτονικής χωρίς να επηρεάσει τα υπόλοιπα, η δυνατότητα επέκτασης που δίνει εφόσον μπορεί για μεγαλύτερο αριθμό πελατών να προστεθεί ακόμα ένας εξυπηρετητής. Επιπλέον η αρχιτεκτονική αυτή προσφέρει ασφάλεια και αξιοπιστία λόγω των ανεξάρτητων μονάδων που την απαρτίζουν και μεγάλη ικανότητα απόδοσης.

(17)

3.2 Δεδομένα

Επόμενο βήμα, έχοντας καταλήξει στο κατάλληλο αρχιτεκτονικό πρότυπο, είναι η επιλογή των δεδομένων που θα οπτικοποιηθούν στην ηλεκτρονική πλατφόρμα αλλά και του τύπου των δεδομένων για τη σύνθεση της ίδιας της ηλεκτρονικής πλατφόρμας.

3.2.1 Δεδομένα ηλεκτρονικής πλατφόρμας

Μια ηλεκτρονική πλατφόρμα είναι μια συλλογή τεχνολογιών που αναπτύχθηκαν από την W3C (World Wide Web Consortium) και άλλους οργανισμούς διεθνών προδιαγραφών. Η ηλεκτρονική πλατφόρμα περιέχει γλώσσες και διεπαφές προγραμματισμού όπως HTML, CSS, SVG, MathML, WebGL, Web Storage, Web Components, Geolocation API και άλλες.

Για την υλοποίηση της εφαρμογής επιλέχθηκε ένα πρότυπο ταμπλό (dashboard) πάνω στο οποίο θα γίνουν οι απαραίτητες τροποποιήσεις έτσι ώστε να ανταποκρίνεται στις ανάγκες της εφαρμογής. Συνεπώς τα δεδομένα που συνθέτουν την ηλεκτρονική πλατφόρμα θα είναι η γλώσσα σήμανσης HTML, η γλώσσα φύλλων στυλ CSS καθώς και η γλώσσα προγραμματισμού JavaScript. Η πρώτη είναι μια γλώσσα η οποία αποτελείται από ετικέτες οι οποίες οργανώνουν την τελική εμφάνιση της ιστοσελίδας. Οι ετικέτες δείχνουν την αρχή και το τέλος κάθε στοιχείου με αρχική ετικέτα όλων των ιστοσελίδων την <html> και εμφωλευμένα σε αυτήν την <body> όπου θα βρίσκεται το περιεχόμενο του προγράμματος.

Στη συνέχεια υπάρχουν διάφορα είδη ετικετών και πολλοί τρόποι χρήσης τους. Για το λόγο αυτό γίνεται χρήση της δεύτερης γλωσσας η οποία επαναπροσδιορίζει τον τρόπο χρήσης των ετικετών και επιτρέπει το διαχωρισμό του περιεχομένου της ιστοσελίδας και του τρόπου παρουσίασής του. Η τρίτη γλώσσα χρησιμοποιείται σε μεγάλο βαθμό για ιστοσελίδες και υποστηρίζεται από την πλειοψηφία των περιηγητών ιστού. Μέσω της ετικέτας <script> εισάγεται η JavaScript στον κώδικα της HTML. Κατά αυτό τον τρόπο έχουμε δυναμικές και όχι στατικές ιστοσελίδες όπου δίνεται η δυνατότητα εκτέλεσης σύνθετων ενεργειών .

(18)

3.2.2 Διδιάστατα δεδομένα

Όπως αναφέρθηκε και σε προηγούμενο κεφάλαιο δεν αρκούμαστε πλέον μόνο σε εφαρμογές συστημάτων που χρησιμοποιούν δεδομένα που περιέχουν μόνο περιγραφική πληροφορία αλλά και σε εφαρμογές συστημάτων γεωγραφικών πληροφοριών. Οι τελευταίες παρέχουν τη δυνατότητα σύνδεσης περιγραφικών δεδομένων και χωρικών. Ως περιγραφικά δεδομένα ορίζονται αυτά που περιγράφουν τις ιδιότητες των οντοτήτων. Ως χωρικά δεδομένα ορίζονται οι οντότητες που περιγράφονται από τα χαρακτηριστικά τους, ορίζονται από τη θέση τους με ένα σύνολο συντεταγμένων και οι χωρικές σχέσεις μεταξύ τους προσδιορίζονται από την τοπολογία τους. Τα χωρικά δεδομένα χωρίζονται σε διανυσματικά (vector) και κανονικοποιημένα (raster) δεδομένα (Εικόνα 2).

Εικόνα 2 : Τύποι χωρικών δεδομένων

(19)

Για τα πρώτα δεδομένα υπάρχουν τρεις βασικοί τύποι γεωμετριών και απεικόνισης των οντοτήτων,τα σημεία, οι γραμμές και τα πολύγωνα. Οι σημειακές οντότητες δεν έχουν διάσταση στο χώρο και απεικονίζονται με τη χρήση ενός ζεύγους συντεταγμένων. Οι γραμμικές οντότητες αντιπροσωπεύουν γραμμικά χαρακτηριστικά συνδέοντας κορυφές μεταξύ τους. Έχουν μόνο μια διάσταση στο χώρο και απεικονίζονται με τη χρήση μιας σειράς συντεταγμένων. Τα πολύγωνα χρησιμοποιούνται για να απεικονίσουν επιφάνειες με δύο διαστάσεις, αποτελούνται από μια σειρά γραμμικών οντοτήτων με αρχή και τέλος την ίδια κορυφή. Τα δεύτερα δεδομένα (κανονικοποιημένα) χωρίζονται σε δύο τύπους, τα συνεχή και τα διακριτά. Για τα διακριτά δεδομένα είναι ξεκάθαρα (διακριτά) τα όρια των οντοτήτων σε αντίθεση με τα συνεχή δεδομένα. Για την εφαρμογή θα χρησιμοποιηθούν όλοι οι προαναφερθέντες τύποι δεδομένων τα διανυσματικά σε μορφή shapefile και τα κανονικοποιημένα σε μορφή εικόνων.

(20)

3.2.3 Τριδιάστατα δεδομένα

Τα τριδιάστατα γεωγραφικά δεδομένα βρίσκονται σε αντιστοιχία με τα διδιάστατα δεδομένα αλλά ενσωματώνουν μια επιπλέον διάσταση στον ορισμό τους. Για τη θέση και τη χωρική περιγραφή των οντοτήτων χρησιμοποιούνται χωρικά συστήματα αναφοράς συντεταγμένων. Στην περίπτωση των διδιάστατων δεδομένων χρησιμοποιούνται συστήματα συντεταγμένων με δύο χωρικές διαστάσεις (x,y), ενώ για την περίπτωση των τριδιάστατων χρησιμοποιούνται τρεις διαστάσιες (x,y,z). Τα σημειακά αντικείμενα δεν παρουσιάζουν καμία δυσκολία αφού μπορούν να παρασταθούν στο χώρο με τις συντεταγμένες τους αλλά ουτε και τα γραμμικά τα οποία αναπαρίστανται ως ένα σύνολο χαρακτηριστικών σημείων. Τη μεγαλύτερη πολυπλοκότητα εμφανίζουν οι επιφάνειες οι οποίες μπορούν να προκύψουν με περισσότερους από έναν τρόπους. Συνήθως υπολογίζονται χρησιμοποιώντας αλγορίθμους που μετατρέπουν τα σημειακά γραμμικά ή επιφανειακά δεδομένα σε ψηφιακές τριδιάστατες επιφάνειες. Τα είδη των επιφανειών αυτών μπορεί να είναι τριγωνικά μη κανονικά δίκτυα (TIN), μοντέλα εδάφους, κανονικοποιημένες επιφάνειες και μπορούν να δημιουργηθούν με δύο κύριες μεθόδους, την παρεμβολή και τον τριγωνισμό. Επίσης σημειώνεται ότι κάποιες επιφάνειες μπορούν να θεωρηθούν ως μονότιμες γιατί σε κάθε ζεύγος x,y αντιστοιχεί μόνο μια τιμή z ,ενώ άλλες ως πλειότιμες με μεγαλύτερο βαθμό δυσκολίας στην μοντελοποίησή τους. Για την εφαρμογή θα χρησιμοποιηθούν τόσο σημειακά όσο και επιφανειακά δεδομένα. Τα πρώτα με μορφή νέφους σημείων (point cloud) και τα δεύτερα με τη μορφή πλέγματος (mesh).

(21)

3.3 Εργαλεία

3.3.1 Εργαλεία για τη διαμόρφωση διακομιστή ιστοσελίδων (configuration of web server)

Όπως αναφέρθηκε και σε προηγούμενο κεφάλαιο η αρχιτεκτονική που χρησιμοποιείται για την υλοποίηση της εφαρμογής είναι τύπου πελάτη εξυπηρετητή. Ο υπολογιστής πελάτης είναι ένα πρόγραμμα που δημιουργεί συνδέσεις για την αποστολή αιτημάτων και στην περίπτωσή μας είναι οι ίδιοι οι υπολογιστές των χρηστών που θα χρησιμοποιούν την ηλεκτρονική πλατφόρμα. Ο εξυπηρετητής είναι ένα πρόγραμμα που αποδέχεται συνδέσεις για να απαντήσει στα αιτήματα του πελάτη και μπορεί να είναι και ο ίδιος ο υπολογιστής από τη στιγμή που χρησιμοποιεί αποκλειστικά αυτά τα προγράμματα. Στην περίπτωσή μας το πρόγραμμα αυτό είναι απαραίτητο να είναι εξυπηρετητής διαδικτύου. Επιλέγεται, λοιπόν ο Apache HTTP ο οποίος είναι εξυπηρετητής παγκόσμιου ιστού (web server). O Apache λέγεται εξυπηρετητής ιστού αλλά δεν είναι ένας φυσικός εξυπηρετητής, είναι ένα πρόγραμμα που διαμορφώνει έναν εξυπηρετητή ώστε να επιτρέπει στον πελάτη μέσω ενός πρόγραμματος πλοήγησης (browser) να επικοινωνεί με τον εξυπηρετητή μέσω του πρωτοκόλλου HTTP μεταφέροντας τα αντίστοιχα δεδομένα. Φυσικά η επικοινωνία μεταξύ πελάτη και εξυπηρετητή γίνεται μέσω ενός τοπικού δικτύου ή μέσω διαδικτύου συνεπώς και οι 2 υπολογιστές ( πελάτης - εξυπηρετητές) πρέπει να έχουν πρόσβαση στο διαδίκτυο.

Για τον έλεγχο της σωστής λειτουργίας της εφαρμογής θα χρησιμοποιηθεί o ίδιος ο υπολογιστής ως πελάτης αλλά θα φιλοξενεί και τον εξυπηρετητή.

Πέρα από τον εξυπηρετητή Apache υπάρχουν και άλλοι εξυπηρετητές δικτύου που έχουν δημιουργηθεί για διαφορετικούς σκοπούς όπως ο NGINX, ο Lighttpd και ο Caddy. Κάθε εξυπηρετητής έχει διαφορετικές επιδόσεις και άλλου είδους δυνατότητες. Για το σκοπό της εφαρμογής δεν υπάρχουν ιδιαίτεροι περιορισμοί οπότε θα μπορούσαν να επιλεχθούν και εναλλακτικοί εξυπηρετητές. Ο κύριος λόγος που επιλέγεται ο εξυπηρετητήτης Apache είναι ότι αποτελεί έναν από τους δημοφιλέστερους εξυπηρετητές ιστού. Αυτό αυτομάτως τον καθιστά πολύ πιο αξιόπιστο και κάνει πολύ ευκολότερη την εύρεση βιβλιογραφίας, την τεκμηρίωση (documentation) και συνεπώς την επίλυση ήδη υπαρχόντων προβλημάτων.

Επίσης είναι εύκολος στη χρήση κάτι το οποίο οφείλεται και στην μεγαλύτερη υποστήριξη, έχοντας υπόψη το μέγεθος της κοινότητας. Ένας από τους λόγους που αποτελεί έναν από τους πλέον συνιστώμενους εξυπηρετητές είναι ότι λειτουργεί σε διάφορες πλατφόρμες

(22)

όπως τα Windows, το Linux και το Mac OSX. Επιπλέον αποτελεί λογισμικό ανοιχτού κώδικα κάτι το οποίο τον κάνει ακόμα πιο προσιτό και κατάλληλο και για το σκοπό της εφαρμογής. Τα πλεονεκτήματα του Apache, πέρα από το γεγονός ότι είναι δωρεάν ακόμα και για εμπορική χρήση και όλα τα προαναφερθέντα, επεκτείνονται και σε άλλους τομείς.

Έχει μεγάλη ευελιξία λόγω του γεγονότος ότι η δομή του βασίζεται σε δομοστοιχεία (modules). Η εγκατάσταση του είναι σχετικά εύκολη έχοντας ένα πρόγραμμα το οποίο οδηγεί το χρήστη στα βασικά βήματα που απαιτούνται. Φυσικά έχει και μειονεκτήματα όπως προβλήματα στην απόδοσή του σε ιστοσελίδες μεγάλου φόρτου και μεγάλη δυνατότητα επιλογών διαμόρφωσης που μπορεί να οδηγήσει σε προβλήματα ασφάλειας. Τα μειονεκτήματα αυτά δεν επηρεάζουν την υλοποίηση της εφαρμογής και έτσι προχωρούμε στην υλοποίησή της.

(23)

3.3.2 Βιβλιοθήκες για οπτικοποίηση διδιάστατων δεδομένων

Έχοντας ορίσει τα εργαλεία υλοποίησης της ηλεκτρονικής πλατφόρμας απαραίτητο είναι να οριστούν και τα εργαλεία που θα χρησιμοποιηθούν για την οπτικοποίηση των δεδομένων που έχουν περιγραφεί σε προηγούμενο κεφάλαιο. Όπως και με τους εξυπηρερτητές έτσι και με τα λογισμικά που παρέχουν τη δυνατότητα οπτικοποίησης διδιάστατων δεδομένων υπάρχουν αρκετές επιλογές. Όπως αναφέρθηκε και στην βιβλιογραφική αναφορά, στην αρχή των τεχνολογικών εξελίξεων οι πρώτες εφαρμογές προσέφεραν πληθώρα χαρτογραφικών υποβάθρων. Πιο συγκεκριμένα τέτοια υπόβαθρα αποτελούν το OpenStreetMap και το OSM Buildings τα οποία περιέχουν ελεύθερα δεδομένα αλλά και το ArcGIS που είναι ένα εμπορικό λογισμικό. Για την αξιοποίηση αυτών των υποβάθρων και την oπτικοποίησή τους διατίθενται πακέτα λογισμικού GIS αλλά και προγραμματιστικές μέθοδοι. Το μεγαλύτερος μέρος των προγραμματιστικών αυτών βοηθημάτων είναι βιβλιοθήκες σε γλώσσα Javascript όπως η Leaflet, η OpenLayers, η Google Maps και η MapBox που δίνουν τη δυνατότητα χρήσης των προσφερόμενων υποβάθρων. Η επιλογή βιβλιοθήκης εξαρτάται από τα δεδομένα που θα χρησιμοποιηθούν στην εφαρμογή. Τα δεδομένα αυτά είναι διανυσματικά αρχεία shapefile και κανονικοποιημένα αρχεία εικόνων τα οποία μπορούν να αξιοποιηθούν από μια πληθώρα βιβλιοθηκών. Ο μόνοι περιορισμοί για την επιλογή της βιβλιοθήκης είναι να είναι ανοιχτού λογισμικού και να έχει μια αρκετά μεγάλη κοινότητα έτσι ώστε να υπάρχει ένα βοηθητικό δίκτυο υποστήριξης. Από τη στιγμή που σκοπός της εφαρμογής είναι ο συνδυασμός όλων των δεδομένων σε μια ηλεκτρονική πλατφόρμα κρίνεται κρίσιμο να αναδειχθεί η δυνατότητα χρήσης περισσότερων από μια βιβλιοθήκες. Κατά αυτόν τον τρόπο φαίνεται η ευελιξία της ηλεκτρονικής πλατφόρμας.

Συνεπώς για την οπτικοποίηση των υποβάθρων χρησιμοποιούνται η βιβλιοθήκη OpenLayers και η OpenStreetMap. Η πρώτη διαθέτει ένα υπόβαθρο με ελάχιστες απαιτήσεις χώρου όπου χρησιμεύει για τον διαχωρισμό των χωρών και των πόλεων έτσι ώστε σε δεύτερο επίπεδο να προστεθούν τα υπόλοιπα δεδομένα. Η δεύτερη διαθέτει ένα λεπτομερέστερο υπόβαθρο που δίνει και τη δυνατότητα ελέγχου της ακρίβειας των υπολοίπων επιπέδων που θα προστεθούν. Φυσικά όπως αναφέρθηκε υπάρχει μια πληθώρα υποβάθρων και βιβλιοθηκών που θα μπορούσαν να χρησιμοποιηθούν. Οι προαναφερθείσες είναι ένα παράδειγμα για την ανάδειξη της δυνατότητας χρήσης τους.

(24)

3.3.3 Βιβλιοθήκες για οπτικοποίηση τριδιάστατων δεδομένων

Τα χαρτογραφικά υπόβαθρα μπορούν να απεικονιστούν και σε τριδιάστατη μορφή όπως ως υδρόγειο σφαίρα με χαρακτηριστικό παράδειγμα αυτό της Google Earth που προσφέρεται μόνο διαδικτυακά αλλά και άλλα παραδείγματα όπως το Web Word Wind και το WebGL Globe τα οπόια προσφέρονται ελεύθερα. Ως τριδιάστατη πληροφορία πέρα από τα χαρτογραφικά υπόβαθρα έχουμε και τα νέφη σημείων και τα αρχεία mesh για τα οποία επίσης θα πρέπει να οριστούν τα εργαλεία που θα χρησιμοποιηθούν. Στις βιβλιογραφικές πηγές όπως ήδη περιγράφηκε με την πάροδο του χρόνου επιλέγονταν και διαφορετικές μέθοδοι αναλόγως βέβαια και το σκοπό των εφαρμογών. Στη συγκεκριμένη εφαρμογή δε θα γίνει χρήση της γλώσσας GML αλλά βιβλιοθήκες βασισμένες στην WebGL η οποία αποτελεί μια από τις δημοφιλέστερες επιλογές για τη δημιουργία γραφικών. Τέτοιες βιβλιοθήκες ανοιχτού κώδικα αποτελούν η Cesium.js, η Three.js, η Babylon.js και άλλες.

Αντίστοιχα με την επιλογή βιβλιοθήκης για τα διδιάστατα δεδομένα επιλέγεται μια από τις πλέον χρησιμοποιούμενες βιβλιοθήκες, η Three.js με μεγάλες δυνατότητες υποστήριξης λόγω της κοινότητάς της. Επιπλέον αποτελεί μια βιβλιοθήκη που είναι ανεξάρτητη πλατφόρμας, τρέχει δηλαδή σε διαφορετικά λειτουργικά συστήματα ή πλατφόρμες υλικού.

(25)

4. Εφαρμογή

Βάσει των προδιαγραφών που αναπτύχθηκαν στα προηγούμενα κεφάλαια περιγράφεται η διαδικασία υλοποίησης της εφαρμογής η οποία θα προσφέρει τη δυνατότητα οπτικοποίησης διδιάστατων και τριδιάστατων πληροφοριών αλλά και την επιλογή μεταφόρτωσης δεδομένων από το χρήστη. Για τη δημιουργία της εφαρμογής επιλέχθηκε ένα πρότυπο ταμπλό (dashboard) για τη διευκόλυνση της αλληλεπίδρασης με τα επιλεγμένα εργαλεία.

Το πρότυπο ταμπλό που επιλέχθηκε είναι το Dashio το οποίο βασίζεται στο λογισμικό Bootstrap. Το Bootstrap είναι μια συλλογή εργαλείων ανοιχτού κώδικα (ελεύθερο λογισμικό) για τη δημιουργία ιστοσελίδων και διαδικτυακών εφαρμογών. Η επιλογή αυτή έγινε γιατί το Bootstrap είναι ένα από τα πιο δημοφιλή λογισμικά με αποτέλεσμα να έχει μια πολύ καλή τεκμηρίωση (documentation) όλων των δυνατοτήτων του. Επιπλέον είναι ελεύθερο λογισμικό το οποίο σημαίνει ότι έχει βελτιωθεί από μια κοινότητα για την αντιμετώπιση κοινών σφαλμάτων του προγράμματος. Πιο συγκεκριμένα το Dashio είναι πολύ προσαρμοστικό με οποιοδήποτε μέγεθος προβολής, όπως τηλέφωνο και tablet. Ακόμη συνοδεύεται από έναν καλά σχολιασμένο κώδικα, διαθέτει πολλές δυνατότητες και επαναχρησιμοποιήσιμα στοιχεία διεπαφής χρήστη. Στο ταμπλό αυτό οποίο έγιναν οι απαραίτητες τροποποιήσεις έτσι ώστε να ανταποκρίνεται στις ανάγκες της εφαρμογής. Η αρχική σελίδα περιέχει ένα μενού πλοήγησης με δυνατότητα εναλλαγής από ορατό σε μη και ένα παράθυρο οπτικοποίησης της εκάστοτε επιλογής του χρήστη (Εικόνα 3).

Εικόνα 3 : Αρχική σελίδα ηλεκτρονικής πλατφόρμας

(26)

Στο μενού πλοήγησης υπάρχουν δύο κύριες δυνατότητες, αυτή της κύριας προβολής (Main Viewer) και αυτή της μεταφόρτωσης δεδομένων (Load data). Η πρώτη περιέχει ένα υπομενού (υποκατάλογο) με τις επιλογές οπτικοποίησης του χρήστη. Αυτές είναι ο διδιάστατος χάρτης (2D map), τα διδιάστατα διανυσματικά αρχεία (2D shapefiles), το τριδιάστατο νέφος σημείων (3D point cloud) και το τριδιάστατο πλέγμα (3D mesh).

Εικόνα 4 : Κύρια προβολή μενού πλοήγησης

Η κάθε λειτουργία από τις παραπάνω εξετάζεται μεμονωμένα. Το λογισμικό που χρησιμοποιείται ως βάση είναι ένα ανοιχτού κώδικα λογισμικό γραμμένο σε Javascript/WebGL που ονομάζεται itowns και είναι βασισμένο στη βιβλιοθήκη three.js.

Χρησιμοποιήθηκε η τελευταία έκδοση του λογισμικού αυτού (Release 2.20.0) ο σύνδεσμος της οποίας βρίσκεται στη βιβλιογραφία. Για τη σωστή λειτουργία του κώδικα χρειάστηκε να δημιουργηθεί ένας νέος φάκελος όπου τοποθετήθηκαν τα αρχεία javascript debug.js και itowns.js τα οποία είναι απαραίτητα για όλες τις μεμονωμένες λειτουργίες που εξετάζονται.

(27)

2D map

Η πρώτη λειτουργία που εξετάζεται είναι η οπτικοποίηση διαφορετικών τύπων διδιάστατων χαρτών/υποβάθρων σε μορφή υδρόγειας σφαίρας (Εικόνα 5). Τα υπόβαθρα αυτά όπως περιγράφηκε και σε προηγούμενο κεφάλαιο είναι της μορφής εικόνων raster και μπορεί να βρίσκονται σε διάφορες μορφές όπως .jpeg και .png. Οι εικόνες αυτές μεταφέρονται μέσω της διαδικτυακής υπηρεσίας Web Map Service η οποία επιτρέπει την αποστολή διαφόρων τύπων αιτημάτων με τις δύο απαραίτητες για κάθε εξυπηρετητή WMS να είναι η GetCapabilities και η GetMap. Αυτά επιστρέφουν τον χάρτη και όλα τα διαθέσιμα επίπεδα (map bounding box, coordinate reference systems).

Εικόνα 5 : Οπτικοποίηση διδιάστατων χαρτών σε μορφή υδρόγειας σφαίρας

Για την υλοποίηση της λειτουργίας αυτής τροποποιήθηκε ο κώδικας ο οποίος είναι ο παρακάτω και το αποτέλεσμα φαίνεται στην Εικόνα 6.

(28)

<!DOCTYPE html>

<html>

<head>

<title>Globe</title>

#info {

color: black;

position: absolute;

top: 0;

left: 0;

margin-left: 15px;

padding: 0.3rem;

z-index: 100;

background-color: white;

border: 2px solid black;

border-radius: 5px;

}

@media (max-width: 600px) { #info,

.dg {

display: none;

} } </style>

>

</head>

<body>

var viewerDiv = document.getElementById('viewerDiv');

(29)

// Define initial camera position

var placement = {

coord: new itowns.Extent('EPSG:4326', 12.98, 12.99, 45.77, 45.78).center(),

range: 10000, tilt: 45, }

var view = new itowns.GlobeView(viewerDiv, placement);

const wmsSource_1 = new itowns.WMSSource({

url: 'http://ows.mundialis.de/services/service?', version: '1.3.0',

name: 'OSM-WMS', style: '',

projection: 'EPSG:4326', extent: {

west: '-180.0000000000000000', south: '-88.0000000000000000', east: '180.0000000000000000', north: '88.0000000000000000', },

transparent: true, });

// Create the layer

const colorlayer_1 = new itowns.ColorLayer('Region_1', { source: wmsSource_1,

});

view.addLayer(colorlayer_1);

(30)

Για την εναλλαγή συνεπώς ανάμεσα σε διαφορετικά υπόβαθρα αρκεί να γνωρίζουμε τη διεύθυνση url του χάρτη καθώς και το είδος χαρτογραφικής προβολής και τα αντίστοιχα όρια του χάρτη. Στην τελική πλατφόρμα δίνεται η δυνατότητα αλλαγής ανάμεσα σε 3 ενδεικτικά υπόβαθρα. Σε αντίθεση με τα νέφη σημείων που θα αναλυθούν παρακάτω δε χρειάζεται να οριστεί το σύστημα αναφοράς καθώς το λογισμικό αναγνωρίζει το γεωδαιτικό σύστημα αναφοράς με κωδικό EPSG:4326 το οποίο είναι και το σύστημα αναφοράς των υποβάθρων που χρησιμοποιούνται (Το σύνολο δεδομένων EPSG είναι μια συλλογή από ορισμούς συστημάτων συντεταγμένων αναφοράς). Δύο από τα χαρτογραφικά υπόβαθρα που χρησιμοποιούνται, o σύνδεσμος των οποίων βρίσκεται στη βιβλιογραφία, έχουν παρθεί από την εταιρεία mundialis που παρέχει χαρτογραφικά δεδομένα τύπου WMS. Το τρίτο αφορά το χαρτογραφικό υπόβαθρο της google. H εταιρεία δεν παρέχει τη δυνατότητα χρήσης δεδομένων τύπου WMS, αλλά παρέχει δεδομένα τύπου TMS. Το πρότυπο WMS όπως προαναφέρθηκε επιτρέπει την κλήση διαφόρων τύπων αιτημάτων για μια περιοχή.

(31)

Όμως δεν ενδείκνυται για τη κλήση αιτημάτων που επιστρέφουν πλακίδια(tiles). Από την άλλη πλευρά το TMS είναι ένα νέο πρωτόκολλο που έχει σχεδιαστεί ειδικά για tiling. Το πρωτόκολλο αυτό καλύπτει το κενό που υπάρχει μεταξύ του απλού προτύπου και του προτύπου WMS υποστηρίζοντας και εναλλακτικά συστήματα αναφοράς. Για την προσθήκη του χαρτογρφικού αυτού υποβάθρου προστέθηκε μια ακόμα μέθοδος στον κώδικα ο οποίος είναι ο παρακάτω και το αποτέλεσμα φαίνεται στην Εικόνα 7.

function loadGoogle(){

// Define geographic extent: CRS, min/max X, min/max Y var extent = new itowns.Extent(

'EPSG:3857',

-20026376.39, 20026376.39, -20048966.10, 20048966.10);

// Add a TMS imagery source

var opensmSource = new itowns.TMSSource({

isInverted: true,

// eslint-disable-next-line no-template-curly-in-string url: proxy + 'mt1.google.com/vt/lyrs=r&x=${x}&y=${y}&z=${z}

',

extent,

projection: 'EPSG:3857',

});

// Add a TMS imagery layer

var opensmLayer = new itowns.ColorLayer('OPENSM', { updateStrategy: {

type: itowns.STRATEGY_DICHOTOMY, },

source: opensmSource, });

view.addLayer(opensmLayer);}

(32)

(33)

2D shapefiles

Η επόμενη λειτουργία που εξετάζεται είναι η οπτικοποίηση διδιάστατων διανυσματικών αρχείων (Εικόνα 8). Τα αρχεία αυτά όπως περιγράφηκε και σε προηγούμενο κεφάλαιο είναι της μορφής shapefile. Ο τύπος αυτός είναι ένας διανυσματικός τύπος αρχείων για συστήματα γεωγραφικών πληροφοριών και δίνει τη δυνατότητα συνδυασμού της περιγραφικής πληροφορίας με τη γεωγραφική για κάθε στοιχείο. Τα αρχεία αυτά μεταφέρονται μέσω της διαδικτυακής υπηρεσίας Web Feature Service (WFS) η οποία επιτρέπει την αποστολή αιτημάτων (requests) που ζητούν γεωγραφικά στοιχεία (features) μέσω του διαδικτύου χρησιμοποιώντας κλήσεις οι οποίες είναι ανεξάρτητες από την πλατφόρμα που χρησιμοποιείται. Τα μεγαλύτερα πλεονεκτήματα της υπηρεσίας αυτής είναι πρώτον: η ευκολία ανανέωσης των δεδομένων σε όλες τις συσκευές που τη χρησιμοποιούν ως πηγή χωρίς αλλαγές στον κώδικα ή όποια άλλη τροποποίηση και δεύτερον: η δυνατότητα επιλογής μιας συγκεκριμένης περιοχής (bounding box) φόρτωσης των δεδομένων κάτι το οποίο μειώνει το βάρος της εφαρμογής αφού δε χρειάζεται να φορτωθούν όλα τα δεδομένα παρα μόνο αυτά που ζητούνται να οπτικοποιηθούν.

Εικόνα 8 : Οπτικοποίηση διδιάστατων διανυσματικών αρχείων

(34)

Για την υλοποίηση της λειτουργίας αυτής τροποποιήθηκε ο κώδικας ο οποίος είναι ο παρακάτω και το αποτέλεσμα φαίνεται στην Εικόνα 9.

<!DOCTYPE html>

<html>

<head>

<title>Point Cloud on globe</title>

#info {

color: black;

position: absolute;

top: 0;

left: 0;

margin-left: 15px;

padding: 0.3rem;

z-index: 100;

background-color: white;

border: 2px solid black;

border-radius: 5px;

}

@media (max-width: 600px) { #info,

.dg {

display: none;

} } </style>

>

</head>

<body>

(35)

function altitudeBuildings(properties) {

return properties.z_min - properties.hauteur;

}

function extrudeBuildings(properties) { return properties.ALTEZZA;

}

itowns.proj4.defs("EPSG:6708","+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");

itowns.proj4.defs("EPSG:3003","+proj=tmerc +lat_0=0 +lon_0=9 +k

=0.9996 +x_0=1500000 +y_0=0 +ellps=intl +towgs84=-104.1,-49.1,-9.9,0.971,- 2.917,0.714,-11.68 +units=m +no_defs");

var viewerDiv = document.getElementById('viewerDiv');

// Define initial camera position

var placement = {

coord: new itowns.Extent('EPSG:4326', 12.98, 12.99, 45.77, 45.78).center(),

range: 10000, tilt: 45, }

var view = new itowns.GlobeView(viewerDiv, placement);

var proxy = "https://cors-anywhere.herokuapp.com/";

var geometrySource_friuli = new itowns.WFSSource({

url: proxy + 'serviziogc.regione.fvg.it/geoserver/EDIFICI/w fs?',

version: '2.0.0',

typeName: 'EDIFICI:EDIFICATO_CTRN_ED1_107', zoom: { min: 9, max: 9 },

west: 318461.6885015604784712, east: 344577.4202148355543613, south: 5069722.4004060393199325, north: 5075067.4347508735954762, },

format: 'application/json', });

(36)

var geometrySource_doc = new itowns.WFSSource({

url: 'https://ahocevar.com/geoserver/wfs?', version: '2.0.0',

typeName: 'ne:ne_10m_roads', zoom: { min: 5, max: 5 }, projection: 'EPSG:4326', extent: {

west: -166.5324875878779949, east: 178.3721080555555147, south: -55.1121240002687429, north: 71.1776842780464847, },

format: 'application/json', });

var geometryLayer_example_3 = new itowns.GeometryLayer('mesh_bu ild3', new itowns.THREE.Group(), {

update: itowns.FeatureProcessing.update, // convert: itowns.Feature2Mesh.convert(), convert: itowns.Feature2Mesh.convert({

batchId: function (property, featureId) { return featur eId; },

extrude: extrudeBuildings }), source: geometrySource_friuli, });

var geometryLayer_example_1 = new itowns.GeometryLayer('mesh_bu ild1', new itowns.THREE.Group(), {

update: itowns.FeatureProcessing.update, convert: itowns.Feature2Mesh.convert(), source: geometrySource_doc,

});

view.addLayer(geometryLayer_example_3);

view.addLayer(geometryLayer_example_1);

const wmsSource_1 = new itowns.WMSSource({

url: 'http://ows.mundialis.de/services/service?', version: '1.3.0',

name: 'OSM-WMS', style: '',

west: '-180.0000000000000000', south: '-88.0000000000000000',