Αναζήτηση

Λήψεις (downloads)

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

Χαρτογράφηση για κινητά

Κινητή χαρτογράφηση

Ένα από τα οφέλη της χαρτογράφησης με τη JavaScript είναι ότι οι κινητές συσκευές μπορούν να τρέξουν τον κώδικα σε ένα πρότυπο Web browser χωρίς εξωτερικές εφαρμογές ή πρόσθετα (plugins). Το Leaflet εκτελείται σε κινητές συσκευές, όπως συσκευές iPhone, iPad και Android. Οποιαδήποτε ιστοσελίδα με ένα χάρτη Leaflet θα λειτουργεί σε μια κινητή συσκευή χωρίς καμία αλλαγή. Ωστόσο, πιθανόν να υπάρχουν χρήστες που θα ήθελαν να προσαρμόσουν τους χάρτες τους για κινητές συσκευές έτσι ώστε να λειτουργούν και μοιάζουν ότι έχουν γίνει ειδικά για κινητά.

Τέλος, η κλάση L.map () έχει μια μέθοδο εντοπισμού (), η οποία χρησιμοποιεί την γεωγραφική τοποθέτηση του W3C API. Το API Geolocation επιτρέπει τον εντοπισμό και την παρακολούθηση της θέσης ενός χρήστη χρησιμοποιώντας την IP Τη διεύθυνση, τις πληροφορίες ασύρματου δικτύου ή το GPS που έχει μια συσκευή. Δεν χρειάζεται να γνωρίζει πώς να χρησιμοποιούν το API. Το Leaflet χειρίζεται όλα αυτά όταν χρησιμοποιείται η locate().

 

HTML και CSS

Το πρώτο βήμα για τη μετατροπή ενός Leaflet χάρτη σε μια έκδοση για κινητά είναι ο χρήστης να μπορεί να τον εμφανίσει σωστά στις κινητές συσκευές. Μπορεί πάντα να πει πότε ανοίγει έναν ιστότοπο στο τηλέφωνο του εάν ο προγραμματιστής πήρε το χρόνο για να το κάνει προσβάσιμο από το κινητό. Στο Leaflet1.html στην ετικέτα <head> μετά την ετικέτα <link> για
το αρχείο CSS, θα πρέπει να προστεθεί ο ακόλουθος κώδικας:

<style>
body{

Padding: 0;
Margin: 0;
}}
Html, body, #map {height: 100%;
}}
</ Style>


Στον προηγούμενο κώδικα CSS, ορίστηκαν οι τιμές γεμίσματος και περιθωρίου στο 0. Μπορείτε ν σκεφτείτε μια ιστοσελίδα ως μοντέλο κουτιού, όπου κάθε στοιχείο υπάρχει στο δικό του πλαίσιο. Κάθε κιβώτιο έχει ένα περιθώριο, που είναι ο χώρος μεταξύ αυτού και άλλων κιβωτίων, καθώς και το περίβλημα, το οποίο είναι ο χώρος μεταξύ του περιεχομένου μέσα στο κιβώτιο και του πλαισίου του πλαισίου (ακόμα και αν δεν δημιουργείται φυσικά περίγραμμα). Ο καθορισμός των τιμών γεμίσματος και περιθωρίου σε 0 καθιστά το περιεχόμενο <body> κατάλληλο για το μέγεθος της σελίδας. Τέλος, ρυθμίζετε την τιμή ύψους του <html>,
<Body> και <div id = 'map'>
elements σε 100%.
Το παρακάτω διάγραμμα παρουσιάζει μια επισκόπηση των ρυθμίσεων για την ιστοσελίδα:

 

 

Το τελευταίο βήμα είναι να προσθέσει τον ακόλουθο κώδικα στην ενότητα <head> και μετά το στοιχείο </title>:
<
meta name = "viewport" content = "width = πλάτος συσκευής, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
Ο προηγούμενος κώδικας τροποποιεί το παράθυρο προβολής που βλέπει τον ιστότοπο. Αυτός ο κώδικας ορίζει το παράθυρο προβολής στο πλάτος της συσκευής και το κάνει με αναλογία 1: 1. Τέλος, απενεργοποιεί τη δυνατότητα αλλαγής μεγέθους της ιστοσελίδας. Αυτό, ωστόσο, δεν επηρεάζει την ικανότητά του χρήστη να κάνει μεγέθυνση στο χάρτη.


Δημιουργία κινητού χάρτη με
JavaScript

Τώρα που έχει ρυθμιστεί η ιστοσελίδα ώστε να εμφανίζεται σωστά σε κινητές συσκευές, είναι καιρός να προστεθεί ο κώδικα JavaScript που θα τραβήξει την τρέχουσα θέση του χρήστη. Για αυτό, πρέπει να ακολουθηθούν τα παρακάτω βήματα:
1. Δημιουργία της εμφάνισης του χάρτη, αλλά να μην χρησιμοποιηθεί η setView:
var map = L.map('map');

2. Πρόσθεση του επιπέδου πλακιδίων:
L.tileLayer ('http: // {s} .tile.osm.org / {z} / {x} / {y} .png') .addTo (map);
3. Καθορισμός μιας λειτουργίας για να βρεθεί επιτυχώς η τοποθεσία:
Λειτουργία foundLocation (e) {}
4. Καθορισμός μιας λειτουργίας για τον ανεπιτυχή εντοπισμό της τοποθεσίας:
FunctionnotFoundLocation (e) {}
5. Πρόσθεση
ένος ακροατή συμβάντων για foundLocation () και notFoundLocation ():
Map.on ('locationfound', foundLocation);
Map.on ('locationerror', notFoundLocation),
6.
Χρησιμοποίηση της locate() για τον ορισμό της προβολής του χάρτη:
Map.locate ({setView: true, maxZoom: 10}).

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

Για να γίνει πιο προσιτός και χρησιμοποιήσιμος, μπορεί να προστεθεί ο ακόλουθος κώδικας στο notFoundLocation ():

function notFoundLocation(e){ alert("Δεν είναι δυνατή η εύρεση της τοποθεσίας σας. Ίσως να χρειαστεί να ενεργοποιήσετε την γεωγραφική τοποθέτηση.");}

Η λειτουργία alert () δημιουργεί ένα αναδυόμενο παράθυρο στο πρόγραμμα περιήγησης με το μήνυμα που έχει περάσει ως παράμετρος. Οποτεδήποτε το πρόγραμμα περιήγησης δεν μπορεί να εντοπίσει τον χρήστη, θα δει το ακόλουθο μήνυμα. Ενώ ορισμένες συσκευές δεν διαθέτουν δυνατότητες τοποθεσίας, κατά καιρούς πρέπει να επιτρέπονται στις ρυθμίσεις ασφαλείας τους:
Τώρα, προστίθεται ο ακόλουθος κώδικας στο foundLocation ():
function foundLocation(e){

varmydate = new Date(e.timestamp);

L.marker(e.latlng).addTo(map).bindPopup(mydate.toString());
}
Ο προηγούμενος κώδικας θα εκτελείται όταν εντοπιστεί η θέση του χρήστη. Το e στην FoundLocation (e) είναι ένα αντικείμενο του συμβάντος. Στέλνεται όταν ενεργοποιείται ένα συμβάν της λειτουργίας που είναι υπεύθυνη για το χειρισμό αυτού του συγκεκριμένου τύπου συμβάντος. Στον προηγούμενο κώδικα, το
πρώτο αντικείμενο εκδήλωσης που συλλαμβάνεται είναι το αντικείμενο χρονικής σήμανσης. Εάν επρόκειτο να εμφανίσετε το timestamp σε ένα pop up, θα πάρετε μια δέσμη αριθμών: 1400094289048. Η χρονική σήμανση είναι ο αριθμός των χιλιοστών του δευτερολέπτου που έχουν περάσει από την 1η Ιανουαρίου 1970 00:00:00 UTC. Αν δημιουργηθεί μια εμφάνιση της κλάσης ημερομηνία και την μεταβιβαστεί στο αντικείμενο χρονικής σήμανσης, τότε θα ληφθεί μια ημερομηνία αναγνώσιμη από τον άνθρωπο. Στη συνέχεια, ο κώδικας δημιουργεί ένα δείκτη. Το γεωγραφικό πλάτος και το γεωγραφικό μήκος αποθηκεύονται σε e.latlng. Στη συνέχεια, προστίθεται ο δείκτης στο χάρτη και δεσμεύετε ένα αναδυόμενο παράθυρο. Το αναδυόμενο παράθυρο χρειάζεται μια συμβολοσειρά ως παράμετρο, οπότε μπορεί να χρησιμοποιηθεί η μέθοδος toString () της κλάσης ημερομηνίας ή να χρησιμοποιηθεί η String (mydate) για να την μετατρέψετε.

Εκδηλώσεις και χειριστές συμβάντων

Θα παρουσιαστεί πρώτα πώς μπορεί ο χρήστης να χειριστεί ένα συμβάν χάρτη. Υπάρχουν 34 συμβάντα στην κατηγορία χάρτη στα οποία μπορεί να εγγραφεί. Αυτό το παράδειγμα θα επικεντρωθεί στο συμβάν κλικ. Για να εγγραφείτε σε ένα συμβάν, χρησιμοποιείτε τη μέθοδο method.on (); Έτσι, για ένα συμβάν χάρτη, χρησιμοποιείτε το map.on () και να περάσει τις παραμέτρους ως το συμβάν και τη λειτουργία για να χειριστεί το συμβάν. Αυτό εμφανίζεται στον ακόλουθο κώδικα:

map.on('click', function(){alert("Κλικάρατε στον χάρτη");});

Ο κώδικας λέει στο Leaflet να στείλει ένα αναδυόμενο παράθυρο ειδοποίησης με το κείμενο που έγινε κλικ στο χάρτη. Όταν ο χρήστης κάνει κλικ στον χάρτη στο κινητό παράδειγμα, δημιουργήθηκε ένας ακροατής που είχε μια ονομαστική συνάρτηση που εκτέλεσε foundLocation (). Στον προηγούμενο κώδικα, η λειτουργία τέθηκε ως παράμετρος. Αυτό είναι γνωστό ως ανώνυμη λειτουργία.
Η λειτουργία δεν έχει όνομα και έτσι μπορεί να καλείται μόνο όταν ο χρήστης κάνει κλικ στον χάρτη.

Θυμηθείτε e από το κινητό παράδειγμα; Εάν βάλετε το e στη λειτουργία, μπορεί ο χρήστης να πάρει την τιμή του Longlat του σημείου που ο χρήστης έκανε κλικ, όπως φαίνεται στον παρακάτω κώδικα:

map.on('click',function(e){

var coord=e.latlng.toString().split(','); var lat=coord[0].split('(');

var long=coord[1].split(')');

alert("κλικάρατε στον χάρτη στο LAT: "+ lat[1]+" και LONG:"+long[0])
});

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

L.marker (e.latlng) .addTo (map);

Ο προηγούμενος κώδικας είναι πανομοιότυπος με τον κώδικα στο κινητό παράδειγμα. Η διαφορά είναι ότι στο παράδειγμα του κινητού, εκτελέστηκε μόνο όταν το locate () ήταν επιτυχές. Σε αυτό το παράδειγμα, εκτελείται κάθε φορά που ο χρήστης κάνει κλικ στον χάρτη.

Στο τμήμα σχετικά με τους δείκτες, δημιουργήθηκε ένας δείκτης που είχε την ιδιότητα Draggable: true. Οι δείκτες έχουν τρία συμβάντα που αφορούν τη μεταφορά: dragstart, drag, and dragend.

Τα παρακάτω βήματα πρέπει να ακολουθηθούν για να επιτραπεί να εμφανιστεί το μήκος και το γεωγραφικό πλάτος του δείκτη σε ένα αναδυόμενο παράθυρο:
1. Δημιουργία του δείκτη και ρύθμιση της ιδιότητας draggable σε true:

varmyMarker = L.marker ([40.640061, 22.944418], {title: "To Σημείο μου", alt: "Το μεγάλο I", draggable: true}) .addTo (map);

2. Δημιουργία μιας λειτουργίας για την δέσμευση ενός αναδυόμενου παράθυρου στο δείκτη και κλίση της μεθόδου GetLatLong ():

MyMarker.bindPopup ("Έχω μετακινηθεί σε:" + String (myMarker.getLatLng ()));

3. Εγγραφή στο συμβάν: MyMarker.on ('dragend', όπου είμαι);
Πρέπει να ανοιχτεί ο χάρτης και να κλικάρετε στον δείκτη. Έχοντας πατημένο το αριστερό πλήκτρο του ποντικιού σύρετε το δείκτη σε μια νέα θέση στο χάρτη. Απελευθερώστε το αριστερό κουμπί και κάντε ξανά κλικ στο δείκτη για να ενεργοποιήσετε το αναδυόμενο παράθυρο. Το pop up θα έχει το νέο γεωγραφικό πλάτος και γεωγραφικού μήκους του δείκτη.

Ημερολόγιο

«  Αύγουστος 2018  »
ΔΤΤΠΠΣΚ
12345
6789101112
13141516171819
20212223242526
2728293031

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

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

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

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

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

conter12

Επαφές

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

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

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