Αναζήτηση

Λήψεις (downloads)

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

Δημιουργία βασικού χάρτη

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

• Αναφορά στα αρχεία της βιβλιοθήκης JavaScript και Cascading Style Sheet (CSS)

• Δημιουργία ενός στοιχείου <div> που θα κρατήσει τον χάρτη

• Δημιουργία ενός αντικειμένου χάρτη

• Πρόσθεση μίας ετικέτας στο επίπεδο (βασικό επίπεδο, base layer)

Το πρώτο βήμα είναι η δημιουργία ενός αρχείου HTML, το οποίο θα πρέπει να περιέχει τα ακόλουθα μέρη:

 

<!DOCTYPE html><html>

<head><title>Leaflet παράδειγμα </title>

</head>

<body>
</
body>
</
html>

 

(Για τα παραδείγματα ονομάσαμε το αρχείο Leaflet1.html)

(το αρχείο HTML δημιουργείτε μια ένα απλό text κειμενογράφο, με το ελεύθερο λογισμικό FreshHTML (https://fresh-html.jaleco.com/download ) με το DreamWaver κ.ά.

Αναφορά στα αρχεία της βιβλιοθήκης JavaScript και CSS

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

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

Χρησιμοποιώντας ένα φιλοξενούμενο αντίγραφο

Με ένα πρόγραμμα επεξεργασίας κειμένου, θα πρέπει να ανοίξει το αρχείο που θα δημιουργήσει με τον κώδικά του (Leaflet1.html).

Στο στοιχείο <head> και μετά το στοιχείο </ title>, προσθέτει τον ακόλουθο κώδικα: <Link rel = "stylesheet" href = http://cdn.leafletjs.com/leaflet- 1.2.0 / leaflet.css 1.2.0 />
Μετά την ετικέτα <body>, προσθέτει τον ακόλουθο κώδικα: <Script src = "http://cdn.leafletjs.com/leaflet-1.2.0 /
Leaftlet"> </ script>
Οι σύνδεσμοι είναι ένα τυπικό αρχείο HTML για <link> και <script>.
Χρησιμοποιώντας ένα τοπικό αντίγραφο
Η χρήση ενός τοπικού αντιγράφου είναι το ίδιο με το φιλοξενούμενο αντίγραφο, εκτός από την διαδρομή που πρέπει να καταχωρίσει ο χρήστης. Πρώτα θα πρέπει να κατεβάσει το Leaflet.js από το
http://leafletjs.com/download.html και να το εξάγει σε κάποιο φάκελο του υπολογιστή του. Στο φάκελο, θα βρει έναν υποφάκελο που ονομάζεται images και τα ακόλουθα τρία αρχεία:
• Leaflet.css: Αυτό είναι το στυλ του
Leaflet
Leaflet: Αυτή είναι μια συμπιεσμένη έκδοση του Leaflet
• Leaflet-src.js: Αυτή είναι η πλήρης έκδοση του φυλλαδίου για προγραμματιστές.

Θα πρέπει μετά να προσθέσει τον ακόλουθο κώδικα στην ετικέτα <head> του Leaflet1.html:
<Link rel = "stylesheet" href = "\ διαδρομή φακέλου όπου υπάρχει το
Leaflet \leaflet-1.2.0 \ leaflet.css "/>
Προσθέτει τον ακόλουθο κώδικα στην ετικέτα <body> του Leaflet1.html:
<Script src = "\ leaflet-1.2.0 \ Leaflet"> </ script> 1.2.0Leaflet
Τώρα υπάρχουν οι τοπικές αναφορές στη βιβλιοθήκη
Leaflet και το CSS.

Στην περίπτωση που ο χρήστης δεν έχει σκοπό να προσθέσει κάποιο κωδικό στο αρχείο, μπορεί να διαγράψει το αρχείο Leaflet-src.js. Χρησιμοποιείτε το αρχείο Leaflet γιατί είναι μικρότερο και τρέχει πιο γρήγορα.

Δημιουργία ενός στοιχείου <div> που θα κρατήσει τον χάρτη

Χρειάζεται να καθοριστεί για το που θα μπει ο χάρτης. Αυτό επιτυγχάνεται με την ετικέτα <div> με αναγνωριστικό που θα αναφέρεται από ένα αντικείμενο χάρτη. Η ετικέτα <div> απαιτεί να καθορισθεί ένα πλάτος και ένα ύψος.

Ο χρήστης προσθέτει τον ακόλουθο κώδικα στην ετικέτα <body> του
Leaflet1.html μετά την αναφορά <script> στο αρχείο των φύλλων:


<Div id = "map" style = "width: 600px; height: 400px"> </ div>

 

Δημιουργία ενός αντικειμένου χάρτη

Το πρώτο βήμα είναι να δημιουργηθεί ένα αντικείμενο χάρτη. Η κλάση χάρτη παίρνει μια ετικέτα <div> (που δημιουργήθηκε στο προηγούμενο βήμα) και τις επιλογές: L.map (id div, επιλογές). Για να δημιουργηθεί ένα αντικείμενο χάρτη που ονομάζεται map, ο χρήστης προσθέτει τον ακόλουθο κώδικα μετά το στοιχείο <script> στο Leaflet1.html:

var map = L.map ('map', {κέντρο: [40.640061, 22.944418],

zoom: 10

});

Εναλλακτικά, μπορεί να συντομεύσει τον κώδικα χρησιμοποιώντας τη μέθοδο setView (), η οποία λαμβάνει τις επιλογές κέντρο και μεγέθυνση ως παραμέτρους:
Var map = L.map ('map'). SetView ([40.640061, 22.944418], 10).


(Είναι καλή πρακτική να εκχωρείτε πάντα τις επιλογές κεντραρίσματος και μεγένθυνσης).

Πρόσθεση μίας ετικέτας στο επίπεδο (βασικό επίπεδο, base layer)

Το τελευταίο βήμα για να δημιουργηθεί ο πρώτος χάρτη στο Leaftlet είναι να προστεθεί ένα στρώμα πλακιδίων. Ένας εξυπηρετητής πλακιδίων συνήθως διασπά το στρώμα σε εικόνες 256 x 256 pixel. Ο χρήστης για να ανακτήσει τις απαιτούμενες εικόνες με βάση την τοποθεσία που τον ενδιαφέρει και να κάνει μεγέθυνση μέσω μιας διεύθυνσης URL που απαιτεί /z/x/y.png.
Το επίπεδο του πλακιδίου, στο ελάχιστο, απαιτεί τη διεύθυνση URL σε ένα διακομιστή πλακιδίων. Μπορεί να χρησιμοποιηθεί το OpenStreetMap για το στρώμα πλακιδίων.

Ο χρήστης θα πρέπει να συμμορφωθεί με τους όρους παροχής υπηρεσιών για να χρησιμοποιήσει το OpenStreetMap. Το TOS είναι διαθέσιμο στη διεύθυνση http://wiki.openstreetmap.org/Wiki /Tile_usage_policy.

Η διεύθυνση URL στον εξυπηρετητή κελιών OpenStreetMap εμφανίζεται στον ακόλουθο κώδικα: L.tileLayer ('http: // {s} .tile.osm.org / {z} / {x} / {y} .png') .addTo (map);

Στον κώδικα, παρέχετε το πρότυπο διεύθυνσης URL στο OpenStreetMaps. Με αυτό τον τρόπο καλείτε επίσης το AddTo (), έτσι ώστε να σχεδιαστεί το στρώμα. Πρέπει να μεταβιβαστεί το L.map () ως παράμετρο της συνάρτησης addTo (). Ονομάσαμε τον χάρτη εμφάνισης L.map () στην προηγούμενη (Var map = L.map ()).

Συνοψίζοντας τα παραπάνω το τελικό αρχείο Leaflet1.html θα πρέπει να έχει την παρακάτω μορφή:

<html>

<head><title>Leaflet παράδειγμα</title>

<link rel="stylesheet" https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />

</head>

<body>

<script src="/https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>

<div id="map" style="width: 1550px; height: 1000px"></div>
<script>

var map = L.map('map',
{

center:[ 40.640061, 22.944418],
zoom: 10

});

L.tileLayer ('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
</script>

</body>
</
html>

Το αποτέλεσμα είναι η παρακάτω εικόνα

 

Στην τελευταία παράγραφο αναφερθήκαμε στα στρώματα πλακιδίων (tile layers). Εκτός από OpenStreetMap υπάρχουν και οι ακόλουθοι προμηθευτές: Thunderforest και Stamen. Η Thunderforest υπερέχουν του OpenStreetMap , ενώ οι Stamen είναι πιο καλλιτεχνικοί. Το ποιος θα χρησιμοποιηθεί εξαρτάται από τον χρήστη. Το μόνο που έχει να κάνει είναι να αλλάξει στον κώδικα:

var layer = new L.TileLayer('http://{s}.tile.thunderforest.com/
landscape/{z}/{x}/{y}.png');

map.addLayer(layer);

 

Άρα ο παραπάνω κώδικας θα αλλάξει:

<html>

<head><title>Leaflet παράδειγμα</title>

<link rel="stylesheet" //unpkg.com/leaflet@1.2.0/dist/leaflet.css">https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />

</head>

<body>

<script src=//unpkg.com/leaflet@1.2.0/dist/leaflet-src.js">https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js ></script>

<div id="map" style="width: 1550px; height: 1000px"> </div>
<script>

var map = L.map('map',
{

center: [40.640061, 22.944418],
zoom: 10

});

var layer = new L.TileLayer('http://{s}.tile.thunderforest.com/
landscape/{z}/{x}/{y}.png');

map.addLayer(layer);

</script>

</body>
</html>

Οπότε το αποτέλεσμα είναι

 

Με αυτόν τον τρόπο δημιουργήσατε τον πρώτο χάρτη με τη βοήθεια του Leaflet

Ημερολόγιο

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

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

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

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

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

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

conter12

Επαφές

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

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

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