Χαροκόπειο Πανεπιστήμιο, Τμήμα Γεωγραφίας ΠΜΣ Εφαρμοσμένη Γεωγραφία & Διαχείριση του Χώρου Ερευνητικά θέματα στη Γεωπληροφορική Εισαγωγή στη Διαδικτυακή Χαρτογραφία Χριστόφορος Βραδής Υποψήφιος διδάκτορας Τμήματος Γεωγραφίας Αντιγόνη Φάκα Διδάκτορας Τμήματος Γεωγραφίας 1
Περίγραμμα της διάλεξης Βασικοί ορισμοί Διεθνείς οργανισμοί και πρότυπα Αρχιτεκτονική πελάτη - εξυπηρετητή Το περιβάλλον του περιηγητή Το περιβάλλον του εξυπηρετητή Γεωχωρικές διαδικτυακές υπηρεσίες Τάσεις και ερευνητικά θέματα 2
Εργαστήριο: ανάπτυξη διαδικτυακής χαρτογραφικής εφαρμογής 3-4 εργαστήρια PostgreSQL / PostGIS Geoserver OpenLayers Εργασία σε ομάδες* 3
Βασικοί ορισμοί χαρτογραφία επιστημονικός κλάδος γεωεπιστημών, ασχολείται με την οπτική αναπαράσταση φαινομένων με χωρική υπόσταση, συνήθως στη γήινη επιφάνεια, αποτελεί τέχνη και τεχνική χάρτης η γραφική αναπαράσταση όλης ή μέρους της γήινης (συνήθως) επιφάνειας, σχεδιασμένη υπό κλίμακα, σε ένα δισδιάστατο (ως επί το πλείστον) μέσο, στο οποίο ανθρωπογενή ή/και φυσικά φαινόμενα παρουσιάζονται με συμβολικές αναπαραστάσεις. 4
Ο συμβατικός χάρτης Στατικοί χάρτες σε έντυπη ή / και ψηφιακή μορφή. Στην ψηφιακή μορφή χωρίς ή με περιορισμένη διαδραστικότητα Έντυπος Ψηφιακή μορφή (PDF, JPEG, ) Ψηφιακή μορφή + λειτουργίες (π.χ. GeoPDF) 5
http://maps.google.com 6
http://maps.google.com 7
Ο διαδικτυακός χάρτης επεκτείνει τον κλασικό ορισμό Ο διαδικτυακός χάρτης δεν αποτελεί αυστηρά γραφική αναπαράσταση, οποιαδήποτε κατάλληλη αναπαράσταση μπορεί να χρησιμοποιηθεί (π.χ. δορυφορικές εικόνες) Με τη δυνατότητα μεγέθυνσης, ο διαδικτυακός χάρτης έχει πολλές κλίμακες αντί για μία σταθερή Η πρόσβαση από οποιοδήποτε σημείο της γης αυξάνει δραματικά το κοινό που μπορεί να δει το χάρτη (όχι απαραίτητα το κοινό στο οποίο απευθύνεται) Η διαδραστικότητα του χάρτη προϋποθέτει τη χρήση μιας γραφικής διεπαφής 8
Ο διαδικτυακός χάρτης Στατικός χάρτης Δυναμικός χάρτης Χάρτης από κατανεμημένες πηγές Διαδραστικός χάρτης Χάρτης με δυνατότητες ανάλυσης ΣΓΠ Επεξεργάσιμος χάρτης Αυξάνονται οι δυνατότητες, αυξάνεται και η πολυπλοκότητα 9
Στατικός διαδικτυακός χάρτης 10
Πλεονεκτήματα διαδικτυακών χαρτών έναντι των συμβατικών Ευκολότερη διάθεση Ανανέωση περιεχομένου Αυξημένος έλεγχος Επιλογή ορατού περιεχομένου Επιλογή πηγών περιεχομένου Επιλογή κλίμακας Διαδραστικότητα, αλληλεπίδραση και εξερεύνηση Συνεργασία χρηστών ο χάρτης ως γραφική διεπαφή για αναζήτηση και εύρεση δεδομένων Τρισδιάστατη απεικόνιση 11
Επιπτώσεις Αυξημένη προσβασιμότητα / διαθεσιμότητα περιεχομένου και λειτουργιών, μείωση κόστους Yanko Tsvetkov Συνεργασία και συμμετοχικές διαδικασίες Εκδημοκρατισμός της χαρτογραφίας (Morisson 1997): Σήμερα, ο χρήστης είναι ο χαρτογράφος Η δημιουργία ενός χάρτη από τον τελικό, μη έμπειρο χρήστη, μπορεί να αποτελέσει ταυτόχρονα και μειονέκτημα: ποια θα είναι η ποιότητα του τελικού χάρτη; Terrible maps 12
Ορολογία Web mapping, Web GIS, Web Cartography, Geovisualization, Visual analytics, Animated mapping, Multidimensional data representation International Cartographic Association Research Agenda on Geovisualization https://icaci.org/research-agenda/structure/ 13
Βασικοί ορισμοί web mapping Η σύνθεση χαρτών για το διαδίκτυο είναι η διαδικασία σχεδιασμού, υλοποίησης, παραγωγής και διάθεσης διαδικτυακών χαρτών στον Παγκόσμιο Ιστό. web GIS Τα διαδικτυακά ΓΣΠ/ΣΓΠ σχετίζονται με τους διαδικτυακούς χάρτες και δίνουν έμφαση στην ανάλυση και την επεξεργασία γεωχωρικών δεδομένων. Οι διαδικτυακοί χάρτες αποτελούν το μέσο παρουσίασης σε ένα web GIS. web cartography Η διαδικτυακή χαρτογραφία είναι επιπρόσθετα η μελέτη θεωρητικών πτυχών: η χρήση των διαδικτυακών χαρτών, η ανάλυση και βελτιστοποίηση τεχνικών και ροών εργασίας, η χρηστικότητα των διαδικτυακών χαρτών, η μελέτη κοινωνικών διαστάσεων και άλλα. Encyclopedia of GIS 14
Διαδίκτυο Δίκτυο Παγκόσμιο πλέγμα διασυνδεδεμένων υπολογιστών και πληροφοριακών συστημάτων που επιτρέπει την ανταλλαγή δεδομένων, πληροφοριών, υπηρεσιών Βασίζεται σε επιμέρους δίκτυα πολυάριθμα πρωτόκολλα επικοινωνίας 15
Παγκόσμιος Ιστός Ο Παγκόσμιος Ιστός είναι ένα υποσύνολο του διαδικτύου και είναι προσβάσιμος από αυτό μέσα από μια μηχανή Το σύνολο των Η/Υ του διαδικτύου που ανταλλάσσουν πληροφορίες με το πρωτόκολλο HTTP και τη γλώσσα HTML Υπερκείμενα (hypertext) WWW Πλοήγηση μέσω υπερσυνδέσμων (hyperlinks) Οι πόροι είναι αναγνωρίσιμοι μέσω των URL 16
To URL στον Παγκόσμιο Ιστό URL: Uniform Resource Locator, Παγκόσμιος Εντοπιστής Πόρου protocol:[//[user[:password]@]host[:port]][/path][?query] [#fragment] Π.χ. https://el.m.wikipedia.org/wiki/special:search?search=web +mapping&go=go&searchtoken=5ahpee133rbgamf580ejwk9q4 protocol Host Port Path Query 17
Διαλειτουργικότητα Από κοινού αποδεκτά πρότυπα Η τεχνολογία του Παγκόσμιου Ιστού βασίζεται σε πρωτόκολλα και γλώσσες που εξασφαλίζουν τη διαλειτουργικότητα (interoperability): η δυνατότητα δύο ή περισσοτέρων συστημάτων να ανταλλάσσουν και να χρησιμοποιούν την πληροφορία που αντάλλαξαν. Η διαλειτουργικότητα εξασφαλίζει την επιτυχή επικοινωνία ανάμεσα σε ετερογενή περιβάλλοντα. Η Κοινοπραξία του Παγκόσμιου Ιστού (World Wide Web Consortium - W3C - http://www.w3.org) αναπτύσσει τα ανοικτά πρότυπα και γλώσσες για τη λειτουργία εφαρμογών στον Παγκόσμιο Ιστό Ο οργανισμός OGC αναπτύσσει και συντηρεί ανοικτά πρότυπα δημοσιοποίησης χαρτών και γεωγραφικών δεδομένων γενικά. Ο οργανισμός OSGeo συντηρεί έργα ανοικτού λογισμικού για την σύνθεση χαρτών, διαδικτυακά ΣΓΠ/ΓΣΠ κ.α. 18
Πρότυπα του W3C HTTP (Hypertext Transfer Protocol) HTML (HyperText Markup Language) CSS (Cascading Style Sheets) XML (extensible Markup Language) SVG (Scalable Vector Graphics) OWL (Web Ontology Language) RDF (Resource Description Framework) WSDL (Web Service Definition Language) https://www.w3.org/standards/ 19
Πως υλοποιείται ένας διαδικτυακός χάρτης Η απαιτούμενη λειτουργικότητα υλοποιείται σε δύο διακριτά μέρη: Η εφαρμογή που εκτελείται στο πρόγραμμα - πελάτη (client, front-end) στον οποίο εμφανίζεται ο χάρτης Οι εφαρμογές σε έναν ή περισσότερους εξυπηρετητές (servers, back end) οι οποίοι παρέχουν διαδικτυακές υπηρεσίες και γενικά ψηφιακούς πόρους στον πελάτη σε διάφορες μορφές 20
Η αρχιτεκτονική πελάτη - εξυπηρετητή Client (Front end) server (backend) 21
Αρχιτεκτονική client - server Server Αίτηση (request) GET HTTP Client Απάντηση (response) PUT HTML/CSS/JS XML JSON (GeoJSON) PNG/JPEG/GIF/SVG 22
Παράδειγμα www.hua.gr http://www.hua.gr <!DOCTYPE html> <html prefix="og: http://ogp.me/ns#" xmlns="http://www.w3.org/1999/ xhtml" xml:lang="el-gr" lang="el-gr" dir="ltr"> <head> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <base href="https://www.hua.gr/index.php/el/" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="χαροκόπειο Πανεπιστήμιο, ελληνική έκδοση." /> <meta name="description" content="καλώς ήλθατε στον ιστοχώρο του Χαροκοπείου Πανεπιστημίου. Το Χαροκόπειο Πανεπιστήμιο ιδρύθηκε το 1990 και εδράζεται σε κληροδότημα του Εθνικού Ευεργέτη Παναγή Χαροκόπου." /> <meta name="generator" content="joomla! - Open Source Content Management" /> <title>χαροκόπειο Πανεπιστήμιο - ΤΟ ΠΑΝΕΠΙΣΤΗΜΙΟ</title> <link href="/index.php/el/?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="rss 2.0" /> 23
Οι περιηγητές επιτρέπουν την επισκόπηση του κώδικα HTML/CSS/JS 24
Τυπικά συστατικά μιας αρχιτεκτονικής πελάτη - εξυπηρετητή client server Εφαρμογή desktop Περιηγητής διαδικτύου Εφαρμογή mobile browser διαδίκτυο Εξυπηρετητής Διαδικτύου web server middleware (PHP, Python, Perl, Java, ASP ), Αρχεία Εξυπηρετητής Διαδικτυακών Γεωχωρικών Υπηρεσιών map server Σύστημα Διαχείρισης Βάσης Δεδομένων DBMS 25
Δύο βασικές μέθοδοι δημιουργίας ενός διαδικτυακού χάρτη Ο χάρτης ως σύνολο από εικόνες: Ο χάρτης δημιουργείται στον εξυπηρετητή ως μια σειρά από πλακίδια εικόνα (JPEG, PNG). Τα πλακίδια αυτά φορτώνονται και εμφανίζονται στον πελάτη. Αλλάζοντας την κλίμακα, ή μετακινώντας την περιοχή θέσης φορτώνονται νέα πλακίδια. Ο χάρτης ως σύνολο από διανύσματα: Ο χάρτης δημιουργείται στον πελάτη ως ένα σύνολο από διανύσματα. Κάθε διάνυσμα αντιστοιχεί σε ένα γεωγραφικό αντικείμενο. Τα διανύσματα αυτά προέρχονται από τον εξυπηρετητή. Αλλάζοντας κλίμακα ή μετακινώντας την περιοχή θέασης, φορτώνονται διαφορετικά διανύσματα. 26
Δύο βασικές μέθοδοι δημιουργίας ενός διαδικτυακού χάρτη Ανεξάρτητα του τρόπου δημιουργίας του χάρτη, ο πελάτης ζητάει από τον περιηγητή κάθε φορά ένα υποσύνολο των δεδομένων του (σε διανυσματική ή ψηφιδωτή μορφή) 27
Το περιβάλλον του πελάτη 28
Τι θεωρούμε ως πελάτη; Εφαρμογή desktop Λογισμικό ArcMap QGIS Custom Περιηγητής διαδικτύου Λογισμικό Chrome Edge Firefox Safari Opera Εφαρμογή mobile Λογισμικό 29
Περιηγητής διαδικτύου (Web Browser) ως πελάτης Λογισμικό (εφαρμογή) που χρησιμοποιείται για την ανάκτηση, παρουσίαση και πλοήγηση σε πόρους πληροφοριών που υπάρχουν στον Παγκόσμιο Ιστό (World Wide Web) Κάθε πόρος έχει ένα αναγνωριστικό: το Uniform Resource Identifier (URI/URL) που μπορεί να αντιστοιχεί με μια ιστοσελίδα, μια εικόνα, ένα βίντεο ή άλλου είδους περιεχόμενο. 30
Τι εκτελείται μέσα σε έναν περιηγητή; HTML για το περιεχόμενο και τη δομική του περιγραφή (περιεχόμενο: κείμενο, συνδέσεις προς αρχεία εικόνων, διανυσματικών γραφικών, βίντεο, ήχου κλπ) CSS για την διάταξη και την εμφάνιση του περιεχομένου JavaScript για την αλληλεπίδραση με το χρήση και την παροχή δυναμικών λειτουργιών 31
Σε τι χρησιμεύει ο συνδυασμός HTML/CSS/JS Ανάπτυξη της Γραφικής Διεπαφής Χρήστη (Graphical User Interface - GUI). Γραφικά στοιχεία στην οθόνη ψηφιακής συσκευής απαραίτητα για την αλληλεπίδραση του χρήστη Εμφάνιση χάρτη, πλοήγηση στο χάρτη (μεγέθυνση, σμίκρυνση), επιλογή ορατών επιπέδων, εμφάνιση ιδιοτήτων χαρτογραφικού χαρακτηριστικού, εμφάνιση υπομνήματος, συμπληρωματικών κειμένων και άλλων ειδικών λειτουργιών (μέτρηση αποστάσεων κλπ) 32
33
HTML HyperText Markup Language, Γλώσσα Σήμανσης Υπερκειμένου Aποτελείται από στοιχεία (elements) τα οποία οριοθετούνται από ετικέτες (tags), οι οποίες περικλείονται μέσα σε σύμβολα «μεγαλύτερο από» και «μικρότερο από» (για παράδειγμα <html>) και συνήθως λειτουργούν ανά ζεύγη (για παράδειγμα <h1> και </ h1>, <p> </p>). https://en.wikipedia.org/wiki/html_element?wprov=sfti1 34
HTML - παράδειγμα <html> <head> <title>hello World</title> </head> <body> <p>hello world.</p> <div>αυτός είναι ένας χάρτης του Χαροκόπειου Πανεπιστημίου</ div> <img id= map src= map.gif"><br> <a href= http://www.hua.gr" class= mycustombutton >Επισκεφθείτε την ιστοσελίδα του Χαροκόπειου Πανεπιστημίου</a> </body> </html> 35
CSS Cascading Style Sheets - Διαδοχικά Φύλλα Στυλ Γλώσσα για την περιγραφή της παρουσίασης ενός εγγράφου σε γλώσσα επισήμανσης (όπως η HTML) Χρησιμοποιείται και σε αρχεία XML, SVG Μορφοποίηση χρωμάτων, μεγέθους στοιχείων, γραμματοσειράς, διάταξης και πολλών άλλων παραμέτρων εμφάνισης 36
CSS - παράδειγμα body { background-color:white; color:black; font-family: Arial, sans-serif; margin-top: 14px; border: 12px solid #ff0000; } p { color: white; background: orange; border: 1px solid black; padding: 0 10px 0 20px; font-weight: bold; } 37
CSS - παράδειγμα #map { width: 100%; height: 100%; }.mycustombutton { color: blue; background: white; border: none; font-weight: bold; font-size: 2em; } 38
JavaScript Διερμηνευόμενη γλώσσα προγραμματισμού Χρησιμοποιείται στους περιηγητές Ιστού για την επικοινωνία και ανταλλαγή δεδομένων τη δυναμική αλλαγή του περιεχομένου και της εμφάνισης 39
JavaScript - παράδειγμα <script> var username = window.prompt( Εισάγετε όνομα ); alert( Καλωσήλθες + username + ".") </script> 40
H JavaScript δημιουργεί δυναμικά κώδικα HTML/CSS function addelement () { var newdiv = document.createelement("div"); var newcontent = document.createtextnode( Γειά σας!"); newdiv.appendchild(newcontent); document.body.appendchild(newdiv); newdiv.style.backgroundcolor = "#D93600"; } document.body.onload = addelement; 41
Οι τελευταίες εκδόσεις στις τεχνολογίες περιηγητών 42
Web development resources https://developer.mozilla.org/en-us/docs/learn 43
Τεχνολογίες που σταδιακά εγκαταλείπονται Plugins: Java applets Adobe Flash, Shockwave content Microsoft Silverlight... 44
Οι περιηγητές διαφέρουν ως προς τις δυνατότητες Ένας διαδικτυακός χάρτης, ως εφαρμογή που αποτελείται από κώδικα HTML/CSS/JS, θα διαφέρει ως προς την εμφάνιση και ενδεχομένως ως προς τη λειτουργικότητα που προσφέρει ανάλογα το περιβάλλον θέασης (συνδυασμός οθόνης, λειτουργικού συστήματος και περιηγητή) 45
Οι περιηγητές διαφέρουν ως προς τις δυνατότητες caniuse.com 46
Η τάση στους περιηγητές (browsers) By Usage share of web browsers (Source Net Applications).svg: arichnad, Daniel.Cardenas, Litehacker - Own work, CC BY 3.0, https://commons.wikimedia.org/w/ index.php?curid=15824338 47
Η τάση στους περιηγητές διαδικτύου (τελευταία διετία) Chrome Safari Firefox Opera Android http://gs.statcounter.com/ 48
Η τάση στις συσκευές (τελευταία διετία) Mobile Desktop Tablet http://gs.statcounter.com/ 49
Η τάση στα λειτουργικά συστήματα (τελευταία διετία) Windows Android ios OS X http://gs.statcounter.com/ 50
Τι αρχεία υποστηρίζει εγγενώς ένας περιηγητής; Εικόνες ψηφιδωτές (JPEG, PNG, GIF, WebP, JPEG XR) Δισδιάστατα διανυσματικά γραφικά (SVG) Τρισδιάστατα διανυσματικά γραφικά (WebGL) Βίντεο (WebM, Ogg, MP4 ) Ήχος (MP3, Wav ) XML 51
Τι είδους αρχεία μπορούν να αξιοποιηθούν σε ένα περιηγητή; Μέσω κώδικα JavaScript ένας περιηγητής μπορεί να αξιοποιήσει πληθώρα μορφότυπων: XML, GML, KML JSON, GeoJSON, TopoJSON CSV, TXT 52
Η γλώσσα XML Η γλώσσα XML χρησιμοποιείται με διάφορους τρόπους στις εφαρμογές (χαρτογραφικές και μη) του Παγκόσμιου Ιστού Μεταξύ άλλων, χρησιμοποιείται για ανταλλαγή δεδομένων μεταξύ του πελάτη και του εξυπηρετητή Πολλά ευρέως διαδεδομένα πρότυπα βασίζονται στο πρότυπο της XML GML (Geography Markup Language) KML (Keyhole Markup Language) SVG (Scalar Vector Graphics) RSS (Rich Site Summary) SOAP (Simple Object Access Protocol) XHTML (extensible HTML) 53
Η γλώσσα XML Η γλώσσα XML σχεδιάστηκε για να υποστηρίξει την ανταλλαγή δεδομένων μέσω του Παγκόσμιου Ιστού. Οι σελίδες στον Παγκόσμιο Ιστό είναι συνήθως γραμμένες σε γλώσσα HTML. Η γλώσσα αυτή δίνει έμφαση στη μορφοποίηση (παρουσίαση) των δεδομένων σε μια ιστοσελίδα (δηλ., το μέγεθος και το χρώμα των γραμμάτων, τη γραμματοσειρά, τη θέση παραγράφων, κά.). Η γλώσσα XML δεν αντικαθιστά, αλλά συμπληρώνει τη γλώσσα HTML, δίνοντας έμφαση στο περιεχόμενο των δεδομένων μιας ιστοσελίδας, αγνοώντας τη μορφοποίησή τους. 54
Παράδειγμα αρχείου XML <group> <student id= 1"> <firstname>john</firstname> <lastname>doe</lastname> </student> <student id= 2"> <firstname>anna</firstname> <lastname>smith</lastname> </student> <student id= 3 > <firstname>peter</firstname> <lastname>jones</lastname> </student> </group> 55
Το πρότυπο JSON JSON (JavaScript Object Notation) ελαφρύ πρότυπο ανταλλαγής δεδομένων. Εύκολο για τους ανθρώπους να το διαβάσουν (αλλά και να συντάξουν, σχετικά πιο εύκολο από το πρότυπο XML). Είναι εύκολο για τις μηχανές να το αναλύσουν (parse) και να το παράγουν (generate). Είναι βασισμένο πάνω σε ένα υποσύνολο της γλώσσας προγραμματισμού JavaScript, Standard ECMA-262 Έκδοση 3η - Δεκέμβριος 1999 https://www.json.org/json-el.html 56
Παράδειγμα αρχείου JSON { } "students":[ { id":"st1", "firstname":"john", "lastname":"doe" }, { "id":"st2", "firstname":"anna", "lastname":"smith" }, { id":"st3", "firstname":"peter", "lastname":"jones" } ] 57
Ο χάρτης στον περιηγητή ως εφαρμογή Γραφική διεπαφή: HTML, CSS, JavaScript Κείμενο, στοιχεία ελέγχου χάρτη HTML, CSS Χάρτης: εικόνα /ες GIF, JPEG, διανύσματα SVG Φόρτωση δεδομένων και αλληλεπίδραση (zoom, pan, identify ): JavaScript 58
Τα κύρια σημεία στο σχεδιασμό διαδικτυακού χάρτη Ο χάρτης μπορεί να λειτουργήσει ως γραφική διεπαφή Η αλληλεπίδραση στον χαρτογραφικό συμβολισμό Η οπτική ιεραρχία Η κλίμακα 59
Τα επίπεδα οπτικής ιεραρχίας στον διαδικτυακό χάρτη Το κυρίως περιεχόμενο: το κυρίως θεματικό επίπεδο του χάρτη με τα διαδραστικά στοιχεία του, υπόμνημα, γραφήματα που σχετίζονται με το θεματικό επίπεδο. Το δευτερεύον περιεχόμενο: το υπόβαθρο, μενού και πολυμεσικό περιεχόμενο Το υποστηρικτικό επίπεδο: κάνναβος, περιεχόμενο που δεν σχετίζεται άμεσα με τον χάρτη, βοηθητικό κείμενο 60
Τα επίπεδα οπτικής ιεραρχίας στον διαδικτυακό χάρτη http://panoramaps.statistics.gr 61
Βοηθητικές βιβλιοθήκες Javascript Δεν χρειάζεται να ανακαλύπτεται ο τροχός κάθε φορά Υπάρχει πληθώρα από βιβλιοθήκες και προγραμματιστικές διεπαφές JavaScript για διαδικτυακούς χάρτες Διευκολύνεται και επιταχύνεται σημαντικά η ανάπτυξη εφαρμογών διαδικτυακών χαρτών Εξασφαλίζουμε ότι η εφαρμογή μας συμπεριφέρεται με τον ίδιο τρόπο σε διαφορετικούς περιηγητές 62
Βιβλιοθήκες / διεπαφές προγραμματισμού JavaScript γενικής χρήσης Ανοικτού κώδικα jquery Dojo Toolkit Ext JS AngularJS ReactJS https://jquery.com https://dojotoolkit.org https://www.sencha.com/products/extjs/ https://angularjs.org https://reactjs.org https://en.wikipedia.org/wiki/list_of_javascript_libraries 63
Βιβλιοθήκες / διεπαφές προγραμματισμού JavaScript για διαδικτυακούς χάρτες Ανοικτού κώδικα OpenLayers https://openlayers.org Leaflet GeoExt D3 http://leafletjs.com https://geoext.github.io/geoext3/ https://d3js.org 64
Βιβλιοθήκες / διεπαφές προγραμματισμού JavaScript για διαδικτυακούς χάρτες Με ειδικούς όρους χρήσης ArcGIS Javascript API Google Maps API Bing Maps API MapBox https://developers.arcgis.com/javascript/ https://developers.google.com/maps/documentation/javascript/ https://www.microsoft.com/en-us/maps/choose-your-bing-maps-api https://www.mapbox.com/mapbox-gl-js/api/ 65
OpenLayers - παράδειγμα <html> <head> <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css"> <style>.map { height: 400px; width: 100%; } </style> <script src="https://openlayers.org/en/v4.0.1/build/ol.js" type="text/javascript"></script> <title>openlayers example</title> </head> <body> <div id="map" class="map"></div> <script type="text/javascript"> var map = new ol.map({ target: 'map', layers: [ new ol.layer.tile({ source: new ol.source.osm() }) ], view: new ol.view({ center: ol.proj.fromlonlat([37.9, 23.7]), zoom: 4 }) }); </script> </body> </html> 66
OpenLayers - παράδειγμα 67
Πως γίνεται η επικοινωνία μεταξύ πελάτη και εξυπηρετητή; Διαχωρίζεται η προβολή της σελίδας από την ανανέωσή της AJAX (Asynchronous JavaScript and XML) Η εφαρμογή στον περιηγητή στέλνει αιτήματα και λαμβάνει απαντήσεις ασύγχρονα στο παρασκήνιο Με τον τρόπο αυτό δεν απαιτείται ολοκληρωτική ανανέωση της σελίδας. Η τεχνολογία AJAX χρησιμοποιεί HTML και CSS για την σήμανση και την παρουσίαση των ιστοσελίδων. Μέσω εντολών σε JavaScript (π.χ. XMLHttpRequest) στέλνει αιτήματα σε μορφή JSON ή XML και λαμβάνει απαντήσεις. 68
Ολοκληρωμένα Περιβάλλοντα Ανάπτυξης IDE: Integrated Development Environment Λογισμικά για την συγγραφή κώδικα που διευκολύνουν την ανάπτυξη εφαρμογών Εξαιρετικά διαδεδομένα για εφαρμογές desktop και mobile Σχετικά λίγες επιλογές για ανάπτυξη χαρτογραφικών διαδικτυακών εφαρμογών (π.χ Aptana Studio 3.0) 69
Web-based tools (commercial) Carto Builder (carto.com/builder) MapBox Studio (www.mapbox.com/mapbox-studio/) ESRI (developers.arcgis.com/building-apps/#builders) AppStudio for ArcGIS (mobile) Web AppBuilder for ArcGIS (Web) ESRI Story Maps (web) 70
Αυτόματη παραγωγή κώδικα HTML/CSS/JS QGIS με qgis2web: plugins.qgis.org/plugins/qgis2web/, αυτόματη δημιουργία διαδικτυακού χάρτη με χρήση Leaflet ή OpenLayers 71
Desktop vs Mobile vs Web Οι εφαρμογές για σταθερές ή κινητές συσκευές αξιοποιούν πλήρως τις λειτουργίες που παρέχει η συσκευή. Όμως κάθε λειτουργικό σύστημα απαιτεί χωριστή ανάπτυξη εφαρμογής: Android, ios, Java, macos,.νετ (Windows) Η ανάπτυξη εφαρμογής σε browser αγνοεί τις ιδιαιτερότητες του λειτουργικού συστήματος 72
Η χαρτογραφική προβολή Web Mercator Web Mercator ή Google Web Mercator ή Spherical Mercator, ή WGS 84 Web Mercator ή WGS 84/Pseudo-Mercator Για την επιτάχυνση των πολύπλοκων και χρονοβόρων (ακόμα και από Η/Υ) υπολογισμών χρησιμοποιείται η απλοποιημένη Μερκατορική προβολή (Web Mercator) Η απλοποίηση των υπολογισμών προκύπτει από τη χρήση της σφαίρας (αντί του ελλειψοειδούς εκ περιστροφής) Δημιουργεί μεγαλύτερα σφάλματα τα οποία δεν είναι πάντα αισθητά στο τελικό χρήστη κυρίως στις μικρές κλίμακες Ενδέχεται στον ίδιο χάρτη και κατά τη μετάβαση σε μεγάλες κλίμακες να αλλάζει η προβολή στην κανονική Μερκατορική (κάτι που επίσης είναι ανεπαίσθητο στον τελικό χρήστη) 73
Η χαρτογραφική προβολή Web Mercator H Μερκατορική προβολή (ως σύμμορφη) παραμορφώνει σημαντικά τα εμβαδά (πλησιάζοντας τους πόλους) Για το λόγο αυτό έχει κατηγορηθεί ότι δίνει εξαιρετικά λανθασμένη εικόνα του μεγέθους των χωρών Τα περισσότερα προγραμματιστικά περιβάλλοντα για την δημιουργία χαρτογραφικών προβολών παρέχουν τη δυνατότητα αλλαγής της προβολής. 74
http://thetruesize.com/ 75
Το περιβάλλον του εξυπηρετητή 76
Ο ρόλος του εξυπηρετητή Παρέχει τα αρχεία HTML / CSS / JS, είτε στατικά είτε δυναμικά Παρέχει χάρτες και γεωχωρικά δεδομένα, διανυσματικά ή ψηφιδωτά μέσω υπηρεσιών Παρέχει λοιπούς πόρους 77
Τυπικά συστατικά μέρη του εξυπηρετητή server Εξυπηρετητής Διαδικτύου web server middleware (PHP, Python, Perl, Java, ASP ), Αρχεία Εξυπηρετητής Διαδικτυακών Γεωχωρικών Υπηρεσιών map server Σύστημα Διαχείρισης Βάσης Δεδομένων DBMS 78
Εξυπηρετητής διαδικτύου (Web Server) web server (ή HTTP server ή application server): λογισμικό που διανέμει περιεχόμενο χρησιμοποιώντας το πρωτόκολλο HTTP. Το περιεχόμενο είναι συνήθως υπό τη μορφή αρχείου HTML. Μπορεί να είναι εικόνες ή και άλλου είδους αρχείο. Το περιεχόμενο μπορεί να είναι στατικό ή να δημιουργείται δυναμικά. 79
Δυναμική παραγωγή κώδικα HTML / CSS / JS Παράδειγμα με γλώσσα PHP <html> <head> <title>hello World</title> </head> <body> <?php echo <p>hello world</p> ;?> </body> </html> 80
Λογισμικά εξυπηρετητών διαδικτύου Apache HTTP Server httpd.apache.org ΕΛ/ΛΑΚ IIS (Internet Information Services) www.iis.net Δωρεάν μαζί με τα Windows Apache Tomcat tomcat.apache.org ΕΛ/ΛΑΚ 81
Εξυπηρετητής γεωχωρικών υπηρεσιών(map Server) map server: λογισμικό που διανέμει χαρτογραφικό περιεχόμενο μέσω υπηρεσιών (πρωτόκολλο HTTP) Περιεχόμενο σε XML, GML, JSON. Μπορεί να είναι εικόνες, διανύσματα ή και άλλου είδους αρχείο. Το χαρτογραφικό περιεχόμενο μπορεί να είναι στατικό ή να δημιουργείται δυναμικά. Τα γεωχωρικά δεδομένα μπορούν να προέρχονται από μια Βάση Δεδομένων ή από απλά αλλά κατάλληλα αρχεία (shapefiles) Δεν επιτρέπει την απευθείας πρόσβαση στα γεωχωρικά δεδομένα 82
Λογισμικά εξυπηρετητών γεωχωρικών διαδικτυακών υπηρεσιών Geoserver geoserver.org ΕΛ/ΛΑΚ Mapserver mapserver.org ΕΛ/ΛΑΚ ArcGIS Server server.arcgis.com Εμπορικό 83
Γεωχωρική διαδικτυακή υπηρεσία Μια διακριτή λειτουργικότητα που εκτελείται σε έναν εξυπηρετητή και παρέχεται μέσω μιας διεπαφής Καλείται από έναν πελάτη μέσω ενός αιτήματος Χρησιμοποιεί και αυτή το πρωτόκολλο HTTP Παρέχει πρόσβαση σε γεωχωρικά δεδομένα υπό τη μορφή raster ή vector αναπαραστάσεων Δεν παρέχει απευθείας πρόσβαση στα δεδομένα 84
Τα κυριότερα πρότυπα στις διαδικτυακές υπηρεσίες WMS και WFS Δύο από τα πλέον σημαντικά πρότυπα διαδικτυακών υπηρεσιών Αποτελούν ένα ενδιάμεσο στάδιο στη δημιουργία μιας διαδικτυακής χαρτογραφικής εφαρμογής Αποτελούν πρότυπα δημοσιοποίησης χαρτών και γεωγραφικών / χαρτογραφικών δεδομένων 85
Τα κυριότερα πρότυπα στις διαδικτυακές υπηρεσίες WMS (Web Map Service): Με το πρότυπο WMS ο εξυπηρετητής παράγει χάρτες ως εικόνες (raster) από raster ή/και vector δεδομένα WMST WFS (Web Feature Service): Με το πρότυπο WFS ο εξυπηρετητής παρέχει όχι ακριβώς τον χάρτη αλλά ξεχωριστές γεωγραφικές οντότητες ως διανύσματα (vector) μόνο από vector δεδομένα WFS-T 86
Ο διαδικτυακός χάρτης ως ένα σύνολο από εικόνες Πρότυπο WMS (Web Map Service) 87
WMS (Web Map Service) Ένα πρότυπο υπηρεσίας που ορίζει τον τρόπο με τον οποίο μια εφαρμογή μπορεί να ζητήσει μία ή περισσότερες γεωαναφερμένες εικόνες από έναν εξυπηρετητή. Οι εικόνες παράγονται από γεωχωρικά δεδομένα raster ή/και vector που μπορεί να βρίσκονται σε μία ή περισσότερες κατανεμημένες βάσεις δεδομένων (ή και ως απλά αρχεία). Σε ένα αίτημα WMS, μεταξύ άλλων παραμέτρων, μπορεί να καθορισθεί η γεωγραφική περιοχή που μας ενδιαφέρει καθώς και τα επίπεδα που επιθυμούμε να εμφανίσουμε. 88
WMS (Web Map Service) Η απάντηση σε ένα αίτημα WMS είναι μία ή περισσότερες γεωαναφερμένες εικόνες (σε μορφότυπους JPEG, PNG, GIF κλπ). Οι εικόνες αυτές μπορούν να απεικονισθούν στον περιηγητή (browser) ή σε άλλη εφαρμογή. Στο αίτημα μπορούμε να δηλώσουμε αν επιθυμούμε να υπάρχει διαφάνεια στις εικόνες που παράγονται έτσι ώστε να μπορούμε υπερθέσουμε εικόνες, τη μία πάνω στην άλλη, συνδυάζοντας χάρτες από την ίδια πηγή ή από διαφορετικές πηγές (εξυπηρετητές). 89
WMS (Web Map Service) - είδη αιτημάτων GetCapabilities - επιστρέφει πληροφορίες σχετικά με τις δυνατότητες της υπηρεσίας WMS του εξυπηρετητή (μορφότυποι εικόνων, έκδοση) και τα διαθέσιμα επίπεδα (γεωγραφική έκταση, σύστημα συντεταγμένων κλπ) GetMap - επιστρέφει ένα χάρτη υπο τη μορφή μιας εικόνας. Οι παράμετροι που το συνοδεύουν είναι: διαστάσεις χάρτη, σύστημα συντεταγμένων, στυλ, μορφότυπος εικόνας κ.α. 90
WMS (Web Map Service) - είδη αιτημάτων Προαιρετικά κάποιοι εξυπηρετητές υποστηρίζουν και τα παρακάτω αιτήματα: GetFeatureInfo - στέλνοντας μαζί ένα ζεύγος συντεταγμένων (ένα σημείο) επιστρέφει πληροφορίες σχετικά με τα γεωγραφικά αντικείμενα που βρίσκονται στο σημείο αυτό. DescribeLayer GetLegendGraphic - επιστρέφει μια εικόνα με το υπόμνημα του χάρτη 91
Επιπλέον δυνατότητες της WMS υπηρεσίας Αλλαγή του χαρτογραφικού συμβολισμού: επιλογή ενός υφιστάμενου αρχείου SLD (σε κάποιους servers δυναμική αλλαγή του συμβολισμού με το αίτημα) Καθορισμός της γεωγραφικής έκτασης που ενδιαφέρει κάθε φορά Καθορισμός ενός ή περισσότερων χαρτογραφικών επιπέδων που υπάρχουν στον εξυπηρετητή Καθορισμός ΣΓΑ του χάρτη 92
WMS: παράδειγμα από GetMap ερώτημα http://test.hua.gr:8080/geoserver/wms? bbox=-130,24,-66,50 &request=getmap &styles=population &Format=image/png &layers=topp:states &width=550 &height=250 &srs=epsg:4326 93
WMS getmap ερώτημα http://test.hua.gr:8080/geoserver/ wms? bbox=-130,24,-66,50&styles=populat ion&format=image/ png&request=getmap&layers=topp:s tates&width=550&height=250&srs=e PSG:4326 Αίτημα για χάρτη Φόρτωση δεδομένων Φιλτράρισμα δεδομένων Εφαρμογή κανόνων συμβολισμού Δημιουργία εικόνας Δεδομένα Αρχείο SLD PNG 94
Το αποτέλεσμα από το WMS getmap ερώτημα PNG 95
Μία υπηρεσία WMS για τον ελληνικό χώρο http://gis.ktimanet.gr/wms/wmsopen/wmsserver.aspx 96
Πως κάνει το αίτημα ο πελάτης στον εξυπηρετητή Ανάλογα την εφαρμογή HTML/CSS/JS που τρέχει σε έναν περιηγητή, ο χάρτης μπορεί να ζητηθεί ως μία ενιαία εικόνα σε ένα αίτημα ως χωριστά πλακίδια (tiles) σε πολλά ασύγχρονα αιτήματα 97
WMS - Δυναμική δημιουργία ή προετοιμασία; Αν τα γεωχωρικά δεδομένα από τα οποία δημιουργείται ο χάρτης αλλάζουν συχνά, αφήνουμε την υπηρεσία να παράγει το χάρτη σε κάθε αίτημα του πελάτη Αν τα γεωχωρικά δεδομένα δεν αλλάζουν, οι χάρτες μπορούν να προκατασκευασθούν μειώνοντας σημαντικά το χρόνο απόκρισης. Η προκατασκευή γίνεται με τη δημιουργία cache (κρυφής μνήμης). Παράδειγμα λογισμικού: GeoWebCache 98
WMSΤ: Pre-rendered tiles WMST: Απλοποιημένη υπηρεσία WMS Για κάθε ένα επίπεδο μεγέθυνσης, δημιουργούνται εικόνες - πλακίδια (tiles) Σε κάθε αίτημα του πελάτη επιστρέφεται ένα ή περισσότερα προετοιμασμένα πλακίδια Προέρχεται από το πρότυπο TMS (Tiled Map Service) 99
Tiling scheme Υπάρχει ένα προκαθορισμένο σχήμα οργάνωσης και διαίρεσης του γεωγραφικού χώρου σε πλακίδια που χρησιμοποιούν οι πιο γνωστοί πάροχοι διαδικτυακών χαρτών (Google Maps, Bing Maps ) Αυτό το σχήμα είναι κοινό στον πελάτη και στον εξυπηρετητή Αποτελείται από 20 επίπεδα μεγέθυνσης Σε κάθε επίπεδο μεγέθυνσης αντιστοιχεί μια κλίμακα Σε κάθε επίπεδο μεγέθυνσης αντιστοιχεί ένας αριθμός τετράγωνων στο σχήμα πλακιδίων 100
Επίπεδο Μέτρα / εικονοστοιχείο Κλίμακα (προσεγγιστικά) Αριθμός πλακιδίων 0 156412 1:500 million 1 1 78206 1:250 million 4 2 39103 1:150 million 16 3 19551 1:70 million 64 4 9776 1:35 million 256 5 4888 1:15 million 1.024 6 2444 1:10 million 4.096 7 1222 1:4 million 16.384 8 610.984 1:2 million 65.536 9 305.492 1:1 million 262.144 10 152.746 1:500 000 1.048.576 11 76.373 1:250 000 4.194.304 12 38.187 1:150 000 16.777.216 13 19.093 1:70 000 67.108.864 14 9.547 1:35 000 268.435.456 15 4.773 1:15 000 1.073.741.824 16 2.387 1:8 000 4.294.967.296 17 1.193 1:4 000 17.179.869.184 18 596 1:2 000 68.719.476.736 19 298 1:1 000 274.877.906.944 101
Tiling scheme 102
Επισκόπηση των αιτημάτων ξεχωριστών πλακιδίων στον περιηγητή 103
Ο διαδικτυακός χάρτης ως ένα σύνολο από διανύσματα Πρότυπο WFS (Web Feature Service) 104
WFS (Web Feature Service) Αλλάζει τον τρόπο με τον οποίο η γεωγραφική πληροφορία δημιουργείται, επεξεργάζεται και διαμοιράζεται στον Παγκόσμιο Ιστό. Αντί του συνήθους διαμοιρασμού σε επίπεδο αρχείων, για παράδειγμα μέσω του πρωτοκόλλου, η υπηρεσία WFS προσφέρει άμεση πρόσβαση στο επίπεδο του γεωγραφικού αντικειμένου, τόσο ως προς τα γεωμετρικά του χαρακτηριστικά όσο και ως προς τις συνοδευτικές του ιδιότητες. Το πρότυπο περιέχει καθορισμούς για διαδικασίες ανακάλυψης, δημιουργίας ερωτήματος, κλειδώματος οντοτήτων, συναλλαγών καθώς και διαδικασίες διαχείρισης αποθηκευμένων παραμετροποιημένων ερωτημάτων. Με το πρότυπο WFS ο εξυπηρετητής επιστρέφει διανυσματικά δεδομένα 105
WFS (Web Feature Service) - είδη αιτημάτων GetCapabilities - ερώτημα προς τον εξυπηρετητή το οποίο επιστρέφει τις διαθέσιμες δυνατότητες. DescribeFeatureType - ανάκτηση του σχήματος XML ώστε ο πελάτης να μπορεί να καταλάβει τα αποτελέσματα του ερωτήματος GetFeature. GetFeature - με αυτήν την επιλογή γίνεται το καθεαυτό ερώτημα για γεωγραφικά αντικείμενα. Συνοδεύεται και από άλλες παραμέτρους όπως τη γεωγραφική έκταση, σύστημα συντεταγμένων κλπ. Επιστρέφει τα αποτελέσματα υπό τη μορφή GML που περιέχει τόσο τη γεωμετρία όσο και τις ιδιότητες (attributes) των γεωγραφικών αντικειμένων. 106
WFS getfeature ερώτημα <?xml version="1.0" encoding="utf-8"?> <wfs:getfeature service="wfs" version="2.0.0" xmlns:wfs="http://www.opengis.net/wfs/2.0" xmlns:fes="http://www.opengis.net/fes/2.0" xmlns:sf="http://www.openplans.org/spearfish" xmlns:xsi="http://www.w3.org/2001/xmlschemainstance" xsi:schemalocation="http://www.opengis.net/ wfs/2.0 http://schemas.opengis.net/wfs/2.0/ wfs.xsd"> <wfs:query typenames="sf:bugsites"> <fes:filter> <fes:resourceid rid="bugsites.3"/> </fes:filter> </wfs:query> </wfs:getfeature> Αίτημα (GML) Φόρτωση δεδομένων Φιλτράρισμα δεδομένων Κωδικοποίηση αποτελέσματος <wfs:featurecollection xmlns:xs="http:// www.w3.org/2001/xmlschema" xmlns:sf="http:// www.openplans.org/spearfish" xmlns:wfs="http:// www.opengis.net/wfs/2.0" xmlns:gml="http:// www.opengis.net/gml/3.2" xmlns:xsi="http:// www.w3.org/2001/xmlschema-instance" numbermatched="1" numberreturned="1" timestamp="2017-03-18t23:06:05.368z" xsi:schemalocation="http://www.opengis.net/wfs/2.0 http://test.hua.gr:8080/geoserver/schemas/wfs/2.0/ wfs.xsd http://www.openplans.org/spearfish http:// test.hua.gr:8080/geoserver/wfs? service=wfs&version=2.0.0&request=describe FeatureType&typeName=sf%3Abugsites http:// www.opengis.net/gml/3.2 http://test.hua.gr:8080/ geoserver/schemas/gml/3.2.1/ gml.xsd"><wfs:member><sf:bugsites gml:id="bugsites. 3"><sf:the_geom><gml:Point srsname="urn:ogc:def:crs:epsg::26713" srsdimension="2"><gml:pos>590529 4914625</ gml:pos></gml:point></sf:the_geom><sf:cat>3</ sf:cat><sf:str1>beetle site</sf:str1></sf:bugsites></ wfs:member></wfs:featurecollection> Δεδομένα GML 107
WFS-Transaction (WFS-T) Ενώ η υπηρεσία WFS επιτρέπει την ανάκτηση οντοτήτων, μια υπηρεσία WFS-T επιτρέπει τη δημιουργία, διαγραφή και ενημέρωση / επεξεργασία των οντοτήτων 108
Κριτήρια δημιουργίας και χρήσης υπηρεσιών WMTS ή TMS: Για την παραγωγή στατικών χαρτών από raster δεδομένα για τα οποία δεν μας ενδιαφέρει η τιμή του εικονοστοιχείου, π.χ. μωσαϊκό από αεροφωτογραφίες, μωσαϊκό από σαρωμένους χάρτες WMS: Για την παραγωγή δυναμικών ή στατικών χαρτών από raster δεδομένα για τα οποία μας ενδιαφέρει η τιμή του εικονοστοιχείου Για την παραγωγή δυναμικών ή στατικών χαρτών από vector δεδομένα για τα οποία μας ενδιαφέρουν οι ιδιότητες των οντοτήτων 109
Κριτήρια δημιουργίας και χρήσης υπηρεσιών WFS: Για την παραγωγή δυναμικών χαρτών από vector δεδομένα για τα οποία μας ενδιαφέρει το σύνολό τους ή ένα υποσύνολο κάθε φορά καθώς και οι ιδιότητές τους. WFS-T Για την παραγωγή επεξεργάσιμων, δυναμικών χαρτών από vector δεδομένα 110
client Περιηγητής διαδικτύου Λογισμικό (Chrome ) HTML/CSS JavaScript XML, JSON, GeoJSON Γραφικά (SVG, Εικόνες) Βίντεο, ήχος Εφαρμογή desktop / mobile Λογισμικό (QGIS, ArcMap ) διαδίκτυο διαδίκτυο διαδίκτυο διαδίκτυο διαδίκτυο διαδίκτυο server Εξυπηρετητής Διαδικτύου Λογισμικό (Apache, IIS ) Αρχεία HTML/CSS/JavaScript Στατικά Εκτελέσιμα αρχεία (PHP ) Εξυπηρετητής Διαδικτυακών Γεωχωρικών Υπηρεσιών Λογισμικό (Geoserver, ArcGIS Server ) Αρχεία με γεωχωρικά δεδομένα Αρχεία με περιγραφικά δεδομένα Αρχεία με άλλα δεδομένα Σύστημα Διαχείρισης Βάσης Δεδομένων Λογισμικό (MySQL, PostGRES ) Γεωχωρικά, Μη γεωχωρικά 111
client Περιηγητής διαδικτύου Λογισμικό (Chrome ) HTML/CSS JavaScript XML, JSON, GeoJSON Γραφικά (SVG, Εικόνες) Βίντεο, ήχος Σενάριο 1ο: Η συνηθισμένη περίπτωση πρόσβασης σε έναν web server από τον browser διαδίκτυο διαδίκτυο διαδίκτυο διαδίκτυο διαδίκτυο διαδίκτυο server Εξυπηρετητής Διαδικτύου Λογισμικό (Apache, IIS ) Αρχεία HTML/CSS/JavaScript Στατικά Εκτελέσιμα αρχεία (PHP ) Αρχεία με γεωχωρικά δεδομένα Αρχεία με περιγραφικά δεδομένα Αρχεία με άλλα δεδομένα Σύστημα Διαχείρισης Βάσης Δεδομένων Λογισμικό (MySQL, PostGRES ) Γεωχωρικά, Μη γεωχωρικά 112
client Περιηγητής διαδικτύου Λογισμικό (Chrome ) HTML/CSS JavaScript XML, JSON, GeoJSON Γραφικά (SVG, Εικόνες) Βίντεο, ήχος Σενάριο 2ο: Πρόσβαση στον map server από μια εφαρμογή στον browser διαδίκτυο διαδίκτυο διαδίκτυο διαδίκτυο διαδίκτυο διαδίκτυο server Εξυπηρετητής Διαδικτυακών Γεωχωρικών Υπηρεσιών Λογισμικό (Geoserver, ArcGIS Server ) Αρχεία με γεωχωρικά δεδομένα Αρχεία με περιγραφικά δεδομένα Αρχεία με άλλα δεδομένα Σύστημα Διαχείρισης Βάσης Δεδομένων Λογισμικό (MySQL, PostGRES ) Γεωχωρικά, Μη γεωχωρικά 113
Πρότυπα και οργανισμοί Το ανοικτό λογισμικό αυξάνει τη διαθεσιμότητα των εργαλείων σε χρήστες και προγραμματιστές Τα ανοικτά πρότυπα είναι απαραίτητα για την επίτευξη της διαλειτουργικότητας (interoperability) Δύο διεθνείς οργανισμοί: OSGeo και OGC 114
OSGeo (www.osgeo.org) Open Source Geospatial Foundation (OSGeo) Μη κερδοσκοπικός οργανισμός με αποστολή την ενθάρρυνση των ανοικτών τεχνολογιών στη γεωπληροφορική Τα projects είναι όλα διαθέσιμα χωρίς κόστος με άδεια ανοικτού κώδικα 115
OSGeo projects Συστήματα Διαχείρισης Περιεχομένου (Content Management Systems) GeoNode Desktop Applications GRASS GIS QGIS Geospatial Libraries PostGIS Κατάλογοι Μεταδεδομένων (Metadata Catalogs) GeoNetwork Λογισμικό Διαδικτυακής Χαρτογράφησης (Web Mapping) GeoServer MapServer OpenLayers 116
OGC (Open Geospatial Consortium) International not for profit organization Making quality open standards freely available for anyone http://www.opengeospatial.org 117
Πρότυπα από τον OGC (http://www.opengeospatial.org/docs/is) Geography Markup Language (GML) KML 118
Πρότυπα από τον OGC (http://www.opengeospatial.org/docs/is) Styled Layer Descriptor (SLD): Πρόκειται για ένα XML Schema που χρησιμοποιείται για την περιγραφή του χαρτογραφικού συμβολισμού επιπέδων. http://docs.geoserver.org/stable/en/user/styling/sld/reference/ index.html#sld-reference http://docs.geoserver.org/stable/en/user/styling/sld/cookbook/ PointSymbolizer, σημειακά σύμβολα LineSymbolizer, γραμμικά σύμβολα PolygonSymbolizer, πολυγωνικά (επιφανειακά) σύμβολα TextSymbolizer, για labeling RasterSymbolizer, για raster δεδομένα 119
Πρότυπα διαδικτυακών υπηρεσιών από τον OGC Web Coverage Processing Service (WCPS) Web Coverage Service (WCS) Web Feature Service (WFS) Web Map Context (WMC) Web Map Service (WMS) Web Map Tile Service (WMTS) Web Processing Service (WPS) Web Service Common (WSC) 120
Τάσεις στην ερευνητική και εφαρμοσμένη διαδικτυακή χαρτογραφία Mapping with vector data (vector tiles) Geovisualization Web 2.0, Semantic Web, GeoWeb Crowd-sourcing, Volunteered Geographic Information Geotagging Mash-ups Visualization of / for social media Big Data Tracking and modeling human behaviour Citizens as volunteered sensors 121
Ενδεικτική βιβλιογραφία και πηγές Kraak and Allan Brown (eds), Web Cartography, Francis and Taylor, New York, 2001 Στεφανάκης Ε, Τεχνολογίες δημοσιοποίησης χαρτογραφικού περιεχομένου στον Παγκόσμιο Ιστό, Αθήνα 2009 Neumann A., 2008, Web Mapping and Web Cartography, In Encyclopedia of GIS (Shekar S., Xiong H., eds.), New York: Springer Science, 1261-1269. Τσούλος, Λ., Σκοπελίτη, Α., Στάμου, Λ. 2015. Χαρτογραφική σύνθεση και απόδοση σε ψηφιακό περιβάλλον. [ηλεκτρ. βιβλ.] Αθήνα:Σύνδεσμος Ελληνικών Ακαδημαϊκών Βιβλιοθηκών. Διαθέσιμο στο: http://hdl.handle.net/11419/2506 Νάκος, Β., Κρασανάκης, Β., 2013, Εισαγωγή στη δυναμική και διαδικτυακή χαρτογραφία, http://portal.survey.ntua.gr/main/labs/carto/academic/seminars/ iekem_geoviz/lecture_01_introduction.pdf Mozilla Developer Network: https://developer.mozilla.org/ Geoserver: http://geoserver.org OpenLayers: http://openlayers.org http://www.w3.org 122