Αναζήτηση

Λήψεις (downloads)

Προγράμματα Δασικού Ενδιαφέροντος

Εισαγωγή δεδομένων στους χάρτες

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

Με το Leaflet.js ο χρήστης μπορεί να εισάγει τα ακόλουθα:

Σημεία (Points).

Στο Leaflet προστίθενται σημεία στο χάρτη χρησιμοποιώντας την κλάση Marker. Αυτό που απαιτεί η κλάση Marker είναι το γεωγραφικό πλάτος και γεωγραφικό μήκος, όπως φαίνεται στον ακόλουθο κώδικα:
var myMarker = L.marker ([40.640061, 22.944418]) .addTo (map);
Υπάρχουν 10 επιλογές που μπορεί να οριστεί ο δείκτη:
• εικονίδιο

• δυνατότητα κλικ

• συρόμενο

• πληκτρολόγιο

• τίτλος

• alt

• zIndexOffset

• αδιαφάνεια

• riseOnHover

• riseOffset

Οι επιλογές με δυνατότητα κλικ, συρόμενο, πληκτρολόγιο, zIndexOffset, αδιαφάνεια, RiseOnHover και raiseOffset έχουν οριστεί σε προκαθορισμένη τιμή. Δύο επιλογές που θα πρέπει να ορίσετε είναι: ο τίτλος και alt. Η επιλογή τίτλου είναι το κείμενο υποδείγματος εργαλείου που θα εμφανίζεται όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το σημείο με το δρομέα και η επιλογή alt είναι το εναλλακτικό κείμενο που διαβάζει ο χρήστης χρησιμοποιώντας αναγνώστες οθόνης για προσβασιμότητα. Αυτές οι επιλογές είναι που φαίνονται στον ακόλουθο κώδικα:

var myMarker = L.marker ([40.640061, 22.944418], {Title: "Το σημείο επαφής", alt: "Το μεγάλο σημείο I", draggable: true}) .addTo (map);

Πολυγραμμές (Polylines)

Top of Form

Bottom of Form

Pol

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

var polyline = L.polyline ([[40.640063, 22.944419], [40.62410, 22.950135]], {color: 'green', weight: 8}) .addTo (map);

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

var polyline = L.polyline ([[40.640063, 22.944419], [40.62410, 22.950135], [40.624925, 22.950897]], {color:'green', weight: 8}) .addTo (map);

Πολύγωνα (Polygons)

Ένα πολύγωνο είναι μια πολυγραμμή που είναι κλειστή. Τα πολύγωνα τείνουν να ταξινομούνται από τον αριθμό των πλευρών, ως εξής:

• Τρίγωνο (3)

• Εξάγωνο (6)

• Οκτάγωνο (8)

Όταν ο χρήστης πρέπει να σχεδιάσει ένα πολύγωνο, θα πρέπει να καθορίσει τουλάχιστον τρεις συντεταγμένες. Το τρίγωνο είναι το απλούστερο πολύγωνο που μπορείτε να σχεδιάσει. Αυτός είναι ο λόγος για τον οποίο πρέπει να δώσει τουλάχιστον τρία σημεία. Δεν χρειάζεται να καθοριστεί το σημείο εκκίνησης στο τέλος της λίστας. Το Leaflet θα κλείσει αυτόματα το πολύγωνο. Για να σχεδιαστεί ένα πολύγωνο, απλά πρέπει να αντιγράψτε τον κώδικα για την πολυγραμμή με τρία σημεία και να αντικατασταθεί η κλάση L.polyline με την L.polygon (), όπως εμφανίζεται στον ακόλουθο κώδικα:

var polygon = L.polygon ([[40.640063, 22.944419], [40.62410, 22.950135], [40.624925, 22.950897]], {color:'white', weight: 8}) .addTo (map);
Από τη στιγμή που το
Leaflet κλείνει αυτόματα το πολύγωνο, η πολυγραμμή των τριών σημείων μπορεί να γίνει πολύγωνο. Θα πρέπει να γνωρίζεται ότι το χρώμα και το βάρος αναφέρονται στο περίγραμμα του πολυγώνου. Δύο επιλογές που είναι χρήσιμες όταν σχεδιάζονται πολύγωνα είναι fillColor και fillOpacity:
var polygon = L.polygon ([[40.640063, 22.944419], [40.62410, 22.950135], [40.624925, 22.950897]], {color:'green', weight: 8, fillColor: 'black', fillOpacity: 1}) .addTo (map);

Η αδιαφάνεια είναι μια τιμή μεταξύ 0 και 1, όπου 0 είναι 100% αδιαφάνεια και 1 δεν είναι αδιαφάνεια (στερεό).

Ορθογώνια και κύκλοι Rectangles and circles

Οι κύκλοι και τα ορθογώνια είναι κοινά πολύγωνα που έχουν ενσωματωμένες κατηγορίες στο Leaflet.

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

var myRectangle = L.rectangle ([[40.652101, 22.961338], [40.638321, 22.989121]], {color: "red", weight:2, fillColor: "blue"}) .addTo (map);

Οι επιλογές είναι ίδιες με του πολύγωνο, αλλά με την αφαίρεση της αδιαφάνειας.

Κύκλος
Για να δημιουργηθεί ένας κύκλος, χρειάζεται η εμφάνιση του L.circle () με το κεντρικό σημείο και την ακτίνα (σε μέτρα) ως παράμετροι. Μπορεί να οριστούν οι ίδιες επιλογές με αυτές που χρησιμοποιήθηκαν στο ορθογώνιο. Αυτό εμφανίζεται στο ακόλουθο κώδικα:

l.circle ([40.652101, 22.961338], 8046.72, {color: "red", weight:12, fillColor: "blue"}) .addTo (map);

Ο προηγούμενος κώδικας καθορίζει το κεντρικό σημείο, ακτίνα 8046.72 μέτρα και τις ίδιες επιλογές με το ορθογώνιο στο προηγούμενο παράδειγμα.

Πολυπολυγραμμές και πολυπολύγωνα (MultiPolylines and MultiPolygons)
Σε πολλές περιπτώσεις θα χρειαστεί να εισαχθούν πολυγραμμές (Multi-Polyline) και πολυπολύγωνα (MultiPolygon) για να παρουσιαστούν διαφορετικές πληροφορίες. Το σημαντικό είναι ο χρήστης να προσέχει τις αγκύλες που καθορίζουν κάθε πολυγραμμή / πολυπολύωνο. Χρειάζονται αγκύλες για να συγκρατήσουν το MultiPolyline ή το MultiPolygon, και αγκύλες για κάθε πολυγραμμή ή πολύγωνο και αγκύλες για κάθε γεωγραφικό πλάτος και το γεωγραφικό μήκος.

Πολυγραμμές (MultiPolyline)

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

var multipolyline = L.multiPolyline ([[[40.643451, 22.942450], [40.645607, 22.944656], [40.644137, 22.947885]], [[40.640662, 22.944066], [40.641174, 22.944484], [40.640883, 22.944951]]], {color: 'red',weight:8}) .addTo(map);
Πολυπολύγωνα (MultiPolygon)

Η δημιουργία ενός MultiPolygon είναι ίδια με τη δημιουργία μίας MultiPolyline. Από τη στιγμή που το Leaflet θα κλείσει αυτόματα την πολυγραμμή, εφόσον οι πολυγραμμές μας έχουν τρία ή περισσότερα σημεία, μπορούμε να τα χρησιμοποιήσουμε. Αυτό εμφανίζεται στον ακόλουθο κώδικα:
var multipolygon = L.multiPolygon ([[[40.643451, 22.942450], [35.19738, 106.875], [40.645607, 22.944656]], [[40.644137, 22.947885], [40.641174, 22.944484], [40.640883, 22.944951]]], {color: 'red',weight:8}). addTo (map) .bindPopup("Είμαστε στο ίδιο επίπεδο");

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

Στον τελευταίο κώδικα υπάρχει και η: .bindPopup ("Είμαστε το ίδιο επίπεδο").
Τα MultiPolygons και τα MultiPolylines μοιράζονται επίσης το ίδιο pop up. Για τα pop ups υπάρχει παρακάτω επεξήγηση.

Pop ups

Στο τελευταίο παραδείγματα παρουσιάστηκαν τα pop ups. Αυτά παρουσιάζονται με τη μορφή ενός αναδυόμενου παράθυρου το οποίο παρέχει έναν τρόπο αλληλεπίδρασης των επιπέδων ή παρέχει πληροφορίες στο χρήστη. Ο απλούστερος τρόπος για να προστεθεί ένα αναδυόμενο παράθυρο σε ένα σημείο, πολυγραμμή ή πολύγωνο είναι να χρησιμοποιηθεί η μέθοδος bindPopup (). Αυτή η μέθοδος παίρνει τα περιεχόμενα του pop up ως παράμετρο. Χρησιμοποιώντας τη μεταβλητή δείκτη που δημιουργήθηκε νωρίτερα, δεσμεύεται το αναδυόμενο παράθυρο με τον ακόλουθο κώδικα:

marker.bindPopup ("Είμαι ένα σημείο-δείκτης")?

Η μέθοδος bindPopup () επιτρέπει να εισαχθεί ένα HTML ως περιεχόμενο. Αυτό εμφανίζεται στον ακόλουθο κώδικα:

marker.bindPopup ("<h1> My marker </ h1> <p> Αυτή είναι η πληροφορία σχετικά με τον δείκτη </ p> <ul> <li> Πληροφορία 1 </ li> <li> Πληροφορία

2 </ li> <li> Πληροφορία3 </ li> </ ul> ")

Η δυνατότητα χρήσης HTML σε ένα pop up είναι πρακτική όταν υπάρχουν πολλές λεπτομέρειες που πρέπει να τοποθετηθούν. Επίσης στα αναδυόμενα παράθυρα επιτρέπεται η χρήση εικόνων και συνδέσμων.

Επίσης μπορεί να δημιουργηθεί μια παρουσίαση της αναδυόμενης κλάσης και στη συνέχεια να αντιστοιχηθεί σε πολλά αντικείμενα:

var mypopup = L.popup ({keepInView: true, closeButton: false})
.setContent ("<h1> My Marker </ h1> <p> Αυτή είναι η πληροφορία για το σημείο
</p><ul><li>Info 1</li><li>Info 2</li><li>Info 3</li></ul>");

marker.bindPopup(mypopup);

Marker2.bindPopup (mypopup);

 

Τα παραδείγματα της εισαγωγής δεδομένων στο Leaflet.js μπορείτε να τα κατεβάσετε από εδώ

Ημερολόγιο

«  Οκτώβριος 2018  »
ΔΤΤΠΠΣΚ
1234567
891011121314
15161718192021
22232425262728
293031

Απόψεις του Διαχειριστή

Χρήσιμες συμβουλές

Ροές Ειδήσεων RSS Feeds

Τηλεσυνομιλίες

Μετρητής επισκεπτών

conter12

Επαφές

Αυτήν τη στιγμή επισκέπτονται τον ιστότοπό μας 31 επισκέπτες και κανένα μέλος

Καινοτόμες εφαρμογές

Παγκόσμιος μετεωρολογικός χάρτης