Αναζήτηση

Λήψεις (downloads)

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

Δημιουργία δεικτών στο Leaflet

Στο Leaflet, ένας δείκτης αποτελείται από δύο εικόνες: μία εικόνα που αντιπροσωπεύει το δείκτη και μια δεύτερη εικόνα που χρησιμεύει ως σκιά με σκοπό την δημιουργία βάθους. Όταν γίνεται λήψη του Leaflet, υπάρχει ένας φάκελος εικόνων στον οποίο υπάρχει και ο προεπιλεγμένος δείκτης: ένας μπλε άξονας με μια μικρή εικόνα σκιάς. Οι εικόνες τους έχουν το όνομα marker-icon.png και marker-shadow.png.

Για να δημιουργηθεί ένας δείκτης από τον χρήστη θα πρέπει να χρησιμοποιηθεί ένα λογισμικό και ένα τέτοιο είναι το GIMP. Το GIMP είναι ένα ισχυρό πρόγραμμα απεικόνισης που είναι παρόμοιο με το Adobe Photoshop που τρέχει στα περισσότερα λειτουργικά συστήματα και είναι εντελώς δωρεάν. Μπορεί να γίνει η λήψη του από http://www.gimp.org/downloads/.
Μόλις εγκατασταθεί το GIMP, ξεκινήστε την εφαρμογή. Η εφαρμογή περιέχει τρία παράθυρα: δύο πίνακες στην αριστερή και δεξιά πλευρά της οθόνης και το κύριο παράθυρο στο κέντρο.

Για να δημιουργηθεί ένα νέο αρχείο εικόνας, θα πρέπει να ανοιχθεί το: Αρχείο | Νέο οπότε θα ζητηθεί μια νέα εικόνα. Καθορίστε το πλάτος και ύψος για την εικόνα του εικονιδίου που θέλετε να δημιουργήσετε. Μπορεί να εισαχθεί και μια ανάλυση ή να γίνει αποδεχθεί η προεπιλογή. Η επιλογή "Συμπλήρωση με" (Fill with) είναι η πιο σημαντική. Πρέπει να επιλέξετε την διαφάνεια από το αναπτυσσόμενο μενού. Εάν δεν επιλεχθεί η διαφάνεια, θα εμφανιστεί το εικονίδιό να έχει ένα τετράγωνο ή ορθογώνιο με χρώμα φόντου, πράγμα που δεν είναι επιθυμητό. Το παράθυρο διαλόγου θα πρέπει τώρα να μοιάζει με την ακόλουθο εικόνα:

 

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

Σχεδίαση της σκιάς του δείκτη
Δημιουργήσατε μια νέα εικόνα στο GIMP, με διαστάσεις πλάτος και ύψος: 60 x40. Η σκιά θα πρέπει να αρχίσει στο ίδιο σημείο με την άκρη του δείκτη και να επεκταθεί περίπου 45 μοίρες προς τα δεξιά. Στο GIMP, μπορεί ο δρομέας να μετακινηθεί στην εικόνα και να εμφανιστούν οι συντεταγμένες των εικονοστοιχείων (στο κάτω δεξιά μέρος). Έτσι αν οι συντεταγμένες είναι π.χ. 15, 60 θα πρέπει να αρχίσετε την σκίαση από το pixel 10 και να κινηθείτε προς το πάνω μέρος στα δεξιά της εικόνας (φυσικά θέλει λίγη εξάσκηση).

Χρησιμοποιώντας μια εικόνα ως εικονίδιο

Μπορεί επίσης να χρησιμοποιηθεί μια εικόνα ως εικονίδιο. Η εικόνα δεν χρειάζεται να είναι PNG ή να έχει αδιαφανές υπόβαθρο. Μεταβείτε στην επιλογή Αρχείο (File) / Ανοίξτε (Open) και επιλέξτε την εικόνα σας. Στον πίνακα "Επίπεδα" (Layers), θα πρέπει να δείτε ένα μόνο στρώμα με μια εικόνα της εικόνας σας πάνω σε αυτό. Κάντε δεξί κλικ στο επίπεδο και επιλέξτε Προσθήκη καναλιού Alpha. Τώρα μπορείτε να επιλέξετε το εργαλείο διαγραφής ή το μαγικό ραβδί και να αφαιρέσετε το χρώμα toy φόντου. Η εξαγωγή της εικόνας γίνεται σύμφωνα με τις οδηγίες της προηγούμενης ενότητας. Θα χρειαστεί ακόμα να σχεδιάσετε μια σκιά για το εικονίδιο του δείκτη. Ακολουθήστε τα ίδια βήματα με τη σκιά στο προηγούμενο παράδειγμα και αποθηκεύστε την εικόνα.
Χρησιμοποιώντας ένα προσαρμοσμένο δείκτη στο
Leaflet

Για να δημιουργήσετε ένα εικονίδιο δείκτη στο Leaflet, πρέπει να δημιουργήσετε μια παρουσία της κλάσης L.icon. Η κλάση L.icon παίρνει 10 επιλογές, ως εξής:
• iconUrl

• iconRetinaUrl

• iconSize

• iconAnchor

• shadowUrl

• shadowRetinaUrl

• shadowSize

• shadowAnchor

• popupAnchor

• όνομα τάξης

Η μόνη απαιτούμενη επιλογή είναι το iconUrl. Ανοίξτε το αρχείο Leaflet1.html και προσθέστε τον ακόλουθο κώδικα:

Var myIcon = L.icon ({IconUrl: 'mymarker.png',

ShadowUrl: 'shadow.png',

IconSize: [40, 60],

ShadowSize: [60, 40],

IconΕικονίδιοAnchor: [20, 60],

ShadowAnchor: [20, 40],

PopupAnchor: [0, -53]

});
Ο προηγούμενος κώδικας ορίζει τις επιλογές. Η επιλογή iconUrl κατευθύνει τη διεύθυνση URL στην εικόνα του εικονιδίου και η επιλογή shadowUrl κατευθύνει τη διεύθυνση URL στην εικόνα σκίασης. Οι επιλογές iconSize και shadowSize απαιτούν τις διαστάσεις των εικόνων σε μορφή πλάτος και ύψος.
Οι επιλογές iconAnchor ορίζουν το σημείο στο οποίο αγγίζει ο δείκτης και το εικονίδιο και όπου το pop up αγγίζει την εικόνα. Ο δείκτης έχει ένα σημείο στην οριζόντια Pixel 20, έτσι αυτό θα είναι το άγκιστρο συν το ύψος της εικόνας σε εικονοστοιχεία. Η σκιά τραβήχτηκε στο σημείο του δείκτη, οπότε η
Anchor θα είναι στα 20 και το ύψος του θα είναι 40 εικονοστοιχεία. Η επιλογή popupAnchor έχει οριστεί σε σχέση με την επιλογή iconAnchor. Το σημείο της εικόνας είναι κεντραρισμένο οριζόντια, οπότε η αναδυόμενη άγκυρα θα είναι 0 εικονοστοιχεία, καθιστώντας την αγκίστρωση στο 20. Για να τοποθετήσετε την άγκυρα στο επάνω μέρος του δείκτη, αφαιρείτε τα εικονοστοιχεία. Επιλέγοντας ένα Τιμή -53 για την αναδυόμενη άγκυρα ανοίγει το αναδυόμενο παρά πάνω από το εικονίδιο.

Στη συνέχεια, πρέπει να δημιουργήσετε ένα δείκτη και να το πείτε να χρησιμοποιήσει το νέο σας εικονίδιο. Ο παρακάτω κώδικας θα κάνει ακριβώς αυτό:
Var marker = L.marker([
40.640061, 22.944418], {εικονίδιο: MyIcon}). AddTo (map) .bindPopup ("Είμαι ο νέος δείκτης.");

Αποθηκεύστε το Leaflet1.html και ανοίξτε το στο πρόγραμμα περιήγησής σας για να δείτε το αποτέλεσμα της δουλειά σας.

Ορισμός μιας κλάσης L.Icon

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

Var MyIcon = L.Icon.extend ({

Options: {

ShadowUrl: 'shadow.png',

IconSize: [40, 60],

ShadowSize: [60, 40],

IconAnchor: [20, 60],

ShadowAnchor: [20, 40],

PopupAnchor: [0, -53]}}).

Ο προηγούμενος κώδικας φαίνεται σχεδόν πανομοιότυπος με τον κώδικα στο προηγούμενο παράδειγμα, εκτός από τις ακόλουθες διαφορές:
• Η πρώτη γραμμή, η οποία αντί να δημιουργήσει μια νέα κλάση L.icon, την επεκτείνει
• Οι επιλογές είναι τυλιγμένες σε ένα αντικείμενο στη γραμμή δύο
• Δεν υπάρχει επιλογή iconUrl

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

Var redIcon = νέο myIcon ({iconUrl: 'mymarker.png'});

Var blueIcon = νέο myIcon ({iconUrl: 'mybluemarker.png'});

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

Var marker = L.marker ([35.10418, -106.62987], {Icon: RedIcon}). AddTo (map).bindPopup “Είμαι ο νέος δείκτης."); Var marker = L.marker ([40.640061, 22.944418], {Icon: AddTo (map) .bindPopup ("Είμαι ο νέος δείκτης.");
Στο προηγούμενο κώδικα, σε κάθε δείκτη έχει εκχωρηθεί ένα διαφορετικό έγχρωμο εικονίδιο.
Χρησιμοποιώντας προκαθορισμένους δείκτες με plugins

Η Mapbox είναι μια εταιρεία που παρέχει πλατφόρμες χαρτογράφησης και εργαλεία. Τα εικονίδια της είναι διαθέσιμα μέσω της προσθήκης Leaflet. Μπορείτε να κάνετε λήψη του plugin από τη διεύθυνση https://github.com/jseppi/Leaflet.MakiMarkers. Μπορεί να μάθετε για το Mapbox όταν επισκεφθείτε τον ιστότοπο στη διεύθυνση http://mapbox.com
Οι δείκτες Maki είναι μια βιβλιοθήκη εικονιδίων ανοιχτού κώδικα με πάνω από 100 διαθέσιμους δείκτες. Μπορείτε να βρείτε έναν πλήρη κατάλογο των ονομάτων τους στο αρχείο Leaflet.MakiMarkers.js ή στην ιστοσελίδα
https://www.mapbox.com/maki/. 

Οι δείκτες στο χάρτη σας απαιτούν μόνο δύο γραμμές κώδικα και τρεις επιλογές. Τα παρακάτω βήματα θα σας βοηθήσουν να δημιουργηθεί ένας δείκτης Maki και να το τοποθετηθεί στο χάρτη:
1. Προσθέστε μια αναφορά στο αρχείο JavaScript. Δεν απαιτείται αρχείο CSS με αυτήν την προσθήκη:
<Script src = "Leaflet.MakiMarkers.js"> </ script>
2. Δημιουργήστε ένα εικονίδιο. Πρέπει να επιλέξετε τρεις επιλογές: την εικόνα εικονιδίου που θέλετε να χρησιμοποιήστε την τιμή του έγχρωμου εκθέματος του δείκτη και το μέγεθος (s, m, l):
Var icon = L.MakiMarkers.icon ({
Icon: "Θεσσαλονίκη", color: "# 0a0", size: "l"});
3. Προσθέστε το εικονίδιο σε ένα δείκτη και προσθέστε το δείκτη στον χάρτη:
L.marker ([40.639519, 22.944102], {
{icon: icon }) addTo (map).
Όταν επιλεγεί ένα χρώμα, θα υπάρχει ένα περίγραμμα σε μια ελαφρύτερη απόχρωση του ίδιου χρώματος.

Χρησιμοποιώντας δείκτες Bootstrap και Font Awesome
Μια άλλη προσθήκη για το Laeflet που σας επιτρέπει να χρησιμοποιήσετε προκαθορισμένους δείκτες είναι Leaflet.awesome.markers. Αυτό το plugin σας επιτρέπει να επιλέξετε το Twitter Δείκτες εκκίνησης (Twitter Bootstrap) ή τους δείκτες γραμματοσειράς Awesome. Οι διαφορετικές βιβλιοθήκες παρέχουν διαφορετικά εικονίδια δείκτες και ελαφρώς διαφορετικές λειτουργίες. Ποιο από αυτά είναι προσωπική προτίμηση. Μπορείτε να κατεβάσετε το plugin από τη διεύθυνση https://github.com/lvoogdt/

Η χρήση του Leaflet.awesome.markers είναι σχεδόν ίδια με την διαδικασία που χρησιμοποιήθηκε στο παράδειγμα δείκτη Maki. Πρέπει να εκτελεστούν τα παρακάτω βήματα:
1. Προσθέστε μια αναφορά στο Twitter Bootstrap ή το Font Awesome ή και τα δύο. Επίσης, προσθέστε Μια αναφορά στο CSS και τη JavaScript για το Leaflet.awesome.markers: <link rel = "stylesheet"
Href = "http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bo
Otstrap.min.css ">
<Link rel = "style sheet"
Href = "http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bo
Otstrap-theme.min.css ">
<Link href = "http://maxcdn.bootstrapcdn.com/font-Awesome  / 4.1.0 / css / font-awesome.min.css "rel =" stylesheet ">
<Link rel = "style sheet" href = "Leaflet.awesome-markers.css">
<Script
Src = "http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/boot Strap.min.js "> </ script>
<Script src = "Leaflet.awesome-markers.js"> </ script>
2. Δημιουργήστε ένα δείκτη Twitter Bootstrap και προσθέστε το στο χάρτη. Το Bootstrap είναι ο προεπιλεγμένος δείκτης. Απλώς πρέπει να ρυθμίσετε την εικόνα και τις επιλογές χρωμάτων. Δημιουργήστε το δείκτη και προσθέστε τον στο χάρτη:
Var redMarker = L.AwesomeMarkers.icon ({
Icon: 'tint',
MarkerColor: '
red'
});
L.marker ([40.639519, 22.944102], {icon: redMarker}), addTo (
map),
3. Δημιουργήστε ένα δείκτη Font Awesome και προσθέστε τον στο χάρτη. Από το Bootstrap που είναι η προεπιλογή, πρέπει να χρησιμοποιήσετε την επιλογή προθέματος με την τιμή του fa για Γραμματοσειρά Awesome. Αυτό το παράδειγμα χρησιμοποιεί επίσης την επιλογή spin: true για να δημιουργήσετε ένα κινούμενο δείκτη περιστροφής. Δημιουργήστε το δείκτη και προσθέστε τον στο χάρτη:
Var blueMarker = L.AwesomeMarkers.icon ({
prefix: 'fa',
Spin: true,
icon: 'spinner',
MarkerColor: '
blue'
});
L. marker ([40, 22], {icon: blueMarker}) addTo (map);

Δείκτες ομαδοποίησης με Leaflet.markercluster

Καθώς δημιουργείτε περισσότερους χάρτες, θα τελειώσετε σε ένα σύνολο δεδομένων που είναι χιλιάδες σημείων. Η εμφάνιση των 10.000 σημείων σε έναν χάρτη έχει ως αποτέλεσμα αργό χρόνο φόρτωσης, υστέρηση της κινούμενης εικόνας με ζουμ και πανοραμική λήψη πράγμα που καθιστά δύσκολο για τον χρήστη να επιλέξει ένα δείκτη ή για την κατανόηση των δεδομένων. Η ομαδοποίηση σας επιτρέπει να ομαδοποιήσετε τους δείκτες Συστοιχίες-μοναδικά σημεία που επεκτείνονται καθώς αυξάνεται το επίπεδο ζουμ. Με αυτόν τον τρόπο, μπορείτε να πάρετε μια αίσθηση του μεγέθους των δεδομένων χωρίς να είναι οπτικά συγκλονισμένοι από το πλήθος σημείων. Αν χρειάζεται να δείτε ένα μόνο σημείο, μπορείτε να κάνετε μεγέθυνση στο περιοχή ή σημείο ενδιαφέροντος. Το Leaflet.markercluster είναι μία γρήγορη και ισχυρή εφαρμογή που είναι επίσης οπτικά ελκυστική. Μπορείτε να κατεβάσετε αυτό το plugin από τη διεύθυνση https://github.com/Leaflet/Leaflet.markercluster

Κωδικοποίηση του πρώτου χάρτη cluster

Ένας δείκτη cluster είναι απλώς ένα άλλο παράδειγμα στρώματος στο Leaflet. Πρέπει να εκτελέσετε τα παρακάτω βήματα:

1.Χρησιμοποιώντας το Leaflet1.html, προσθέστε μια αναφορά στο Leaflet.
Τα αρχεία CSS του markercluster και το αρχείο JS, όπως φαίνεται στον παρακάτω κώδικα: <link rel = "stylesheet" href = "MarkerCluster.Default.css" />
<Script src = "Leaflet.markercluster.js"> </ script>

2. Μπορείτε να προσθέσετε μια σειρά από δείκτες στο στρώμα, αλλά δεδομένου ότι θα φορτώσετε 723 σημεία, θα χρησιμοποιήσετε ένα αρχείο JS με τα δεδομένα μέσα. Τα δεδομένα μπορούν να έχουν πρόσθετα χαρακτηριστικά. Προσθέστε μια αναφορά στο αρχείο JS που περιέχει τα δεδομένα:
<Script src = "art.js"> </ script>

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

Var abqIcon = L.Icon.extend ({

Options: {

ShadowUrl: 'vase-shadow.png',

IconSize: [50, 64],

ShadowSize: [50, 64],

IconAnchor: [25, 64],

ShadowAnchor: [0, 64],

PopupAnchor: [-3, -64]

}}
});
var vase = new abqIcon ({iconUrl: 'vase.png'});

4. Τώρα, δημιουργήστε ένα στρώμα markercluster δημιουργώντας μια εμφάνιση του Κλάση MarkerClusterGroup. Ρυθμίστε την επιλογή showCoverageOnHover σε false:

var point = new L.MarkerClusterGroup ({showCoverageOnHover: false}).
5. Για να προσθέσετε δείκτες στην ομάδα, χρειάζεστε μια συνάρτηση που χρησιμοποιεί τον πίνακα Από το αρχείο δεδομένων σε βρόχο κάθε σημείο δεδομένων και να προσθέσετε το γεωγραφικό πλάτος, γεωγραφικό μήκους και οποιωνδήποτε άλλων χαρακτηριστικών που θέλετε να χρησιμοποιήσετε στο αναδυόμενο παράθυρο. Ο βρόχος δημιουργεί ένα δείκτη, που δεσμεύει ένα αναδυόμενο παράθυρο και προσθέτει το δείκτη ως ένα στρώμα προς την ομάδα σήμανσης. Στη συνέχεια, καλέστε τη λειτουργία για να ξεκινήσει
Φόρτωση των δεδομένων:

() {

Για το (var i = 0; i <artPoints.length; i ++) {

var a = artPoints [i];

var title = α [2];

var marker = new L.Marker (new L.LatLng (a [0], a [1]), { icon: vase , title: title }),

Marker.bindPopup (title);

Markers.addLayer (marker);

}}
}}
populate();

6. Τέλος, προσθέστε το στρώμα της ομάδας περιστρεφόμενου σήματος στο χάρτη χρησιμοποιώντας το Ακόλουθο κώδικα:

Map.addLayer (markers);

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

Μέθοδοι και γεγονότα διαθέσιμα σε στρώματα markercluster

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

Υπάρχουν τέσσερις προεπιλεγμένες επιλογές που έχουν οριστεί ως αληθινές, ως εξής:
• showCoverageOnHover

• zoomToBoundsOnClick

• spiderfyOnMaxZoom

• removeOutsideVisibleBounds

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

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

Η τελευταία επιλογή βελτιώνει την απόδοση μη προβάλλοντας ομάδες που δεν βρίσκονται σε άμεση γειτνίαση με την τρέχουσα προβολή χάρτη. Δεν χρειάζεται να βλέπετε ένα σύμπλεγμα στη Θεσσαλονίκη αν κοιτάτε στη Καβάλα.
Άλλες επιλογές και συμβάντα

Οι άλλες επιλογές που μπορεί να ορίσετε είναι animateAddingMarkers και MaxClusterRadius. Οι κινούμενοι δείκτες δημιουργούν έναν οπτικά ενδιαφέροντα χάρτη, αλλά αν εσείς έχετε ένα μεγάλο αριθμό σημείων δεδομένων, αυτό μπορεί να επιβραδύνει την απόδοση του χάρτη σας. Είναι ένα Αποτέλεσμα που πρέπει να χρησιμοποιείται με φειδώ και υπό τις κατάλληλες συνθήκες. Ρύθμιση του Η ακτίνα του συμπλέγματος μπορεί να δημιουργήσει μεγαλύτερες ή μικρότερες ομάδες. Η προεπιλογή είναι 80 εικονοστοιχεία. Αν προβάλλετε καλά ομαδοποιημένα δεδομένα, θα χρειαστείτε μικρότερο αριθμό και εάν εσείς εμφανίζουν δεδομένα που είναι διασκορπισμένα, ίσως χρειαστεί μεγαλύτερη ακτίνα. Στο προηγούμενο για παράδειγμα, αν η ακτίνα είναι ρυθμισμένη στο 5, οι δείκτες αναλαμβάνουν τον χάρτη επειδή δεν είναι να συγκεντρωθούν λόγω της μικρής ακτίνας. Το επίπεδο markercluster έχει συμβάντα στα οποία μπορείτε να εγγραφείτε. Συνήθως, μπορείτε να εγγραφείτε σε ένα συμβάν στο χάρτη χρησιμοποιώντας το map.on (κλικ, λειτουργία). Με την Markercluster, προσθέτετε ένα σύμπλεγμα στα διαθέσιμα συμβάντα στρώματος έτσι ώστε να το κάνουν Ισχύουν για το στρώμα markercluster, όπως markers.on (clusterclick, λειτουργία).

Κινούμενοι δείκτες με plugins

Η κινούμενη εικόνα προσθέτει α Wow factor στον χάρτη σας, αλλά αν υπερνικηθεί, μπορεί να κάνει το χάρτη σας να φαίνεται ερασιτεχνικό.

Αναπήδηση των σημείων σας

Το plugin Leaflet.BounceMarker δεν διαθέτει μεγάλο αριθμό επιλογών
Να προσαρμόσετε τους δείκτες ή τη συμπεριφορά τους, αλλά παρέχει μια απλή κινούμενη εικόνα που είναι Χρήσιμο όταν προσθέτετε δείκτες στο χάρτη ή στο συμβάν του δείκτη. Μπορείτε να κάνετε λήψη και μάθετε περισσότερα σχετικά με το plugin στη διεύθυνση
https://github.com/maximeh/leaflet.Bouncemarker.
Τα παρακάτω βήματα θα σας δείξουν πώς να προσθέσετε ένα δείκτη αναπήδησης στον χάρτη σας:

1.Προσθέστε μια αναφορά στο αρχείο JavaScript. Δεν απαιτείται αρχείο CSS
Αυτό το πρόσθετο: <
Script src = "bouncemarker.js"> </ script>

2. Η δημιουργία ενός δείκτη αναπήδησης είναι ακριβώς η ίδια με τη δημιουργία ενός τυπικού Leaflet δείκτη. Το plugin προσθέτει μια πρόσθετη επιλογή στην κλάση L.Marker. Ο δείκτης αναπήδησης έχει μια επιλογή bounceOnAdd και έχει προεπιλεγμένη τιμή ψευδής. Κάθε δείκτης που δημιουργείτε θα αναπηδήσει αν δεν καθορίσετε διαφορετικά.

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

Marker = new L.Marker ([40.639519, 22.944102], {bounceOnAdd: true,}) addTo (χάρτης);
Οι μόνες άλλες επιλογές που μπορείτε να ορίσετε σε ένα δείκτη αναπήδησης είναι το ύψος, η διάρκεια, και μια λειτουργία επανάκλησης όταν τελειώσετε. Μπορείτε να τα ορίσετε όπως φαίνεται στον παρακάτω κώδικα:
Marker.bounce ({
duration: 1000, height: 200}, function () {alert ("Τέλος")});
Το ύψος είναι σε εικονοστοιχεία και η διάρκεια είναι σε χιλιοστά του δευτερολέπτου. Η κινούμενη κίνηση απαιτεί πόρους για εκτέλεση, οπότε βεβαιωθείτε ότι δεν δημιουργείτε κινούμενα σχέδια που εκτελούνται πολύ γρήγορα ή ότι θα βρείτε ότι ο δείκτης σας εξαφανίζεται και ότι μόνο η σκιά είναι ορατή. Επίσης, να θυμάστε ότι εάν σκοπεύετε να καταναλώσετε τον χάρτη σας σε κινητές συσκευές, η απόδοση ενδέχεται να είναι βραδύτερη από την επιφάνεια εργασίας σας.

Η μέθοδος αναπήδησης () λειτουργεί καλά με το συμβάν του hover. Όταν υπάρχουν πολλοί δείκτες και είναι ομαδοποιημένοι, κάνοντας αυτό που πετάει πάνω από την αναπήδηση βοηθά να βεβαιωθείτε ότι κάνετε κλικ στο σωστό.
Για να πραγματοποιήσετε αναπήδηση ενός δείκτη σε ένα γεγονός αιωρήματος, εγγραφείτε στο συμβάν και καλέστε μια λειτουργία όταν το ποντίκι κινείται πάνω από το δείκτη:

marker.on('mouseover',function(){marker.bounce({duration: 500, height: 100});});

Όταν το ποντίκι κινείται πάνω από το δείκτη. Η ανώνυμη λειτουργία καλεί
Η μέθοδος αναπήδησης (), κάνοντας τον δείκτη να κάνει ακριβώς αυτό όταν μετακινείτε το ποντίκι Πάνω από αυτό.

Κάνοντας τους δείκτες σας να μετακινηθούν

Με το plugin Leaflet.MnimatedMarker, μπορείτε να κάνετε τους δείκτες σας να κινούνται κατά μήκος μιας πολυσυλλεκτικής γραμμής. Αυτό είναι χρήσιμο όταν θέλετε να τραβήξετε την προσοχή σε μια διαδρομή. Ένας δείκτης που κινείται κατά μήκος της διαδρομής προσελκύει το μάτι περισσότερο από ένα Γραμμή στο χάρτη. Για περισσότερες πληροφορίες και για να κάνετε λήψη του plugin, πηγαίνετε στο Https://github.com/openplans/Leaflet.AnimatedMarker .
Για να ζωντανέψετε τους δείκτες σας, ακολουθήστε τα παρακάτω βήματα:
1. Προσθέστε μια αναφορά στο αρχείο JavaScript. Δεν απαιτείται αρχείο CSS για αυτήν την προσθήκη:

<Script src = "AnimatedMarker.js"> </ script>

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

Var line = L.polyline ([[40.463079, 22.998395], [40.378097,
23.044118], [40.348090, 23.071168], [40.318992, 23.10566], [40.289745, 23.158718]].
3. Δημιουργήστε μια μεταβλητή animatedMarker. Ο δείκτης παίρνει μια σειρά από Γεωγραφικά πλάτη και γεωγραφικά μήκη. Για να το πάρετε, χρησιμοποιήστε τη μέθοδο getLatLngs () της γραμμής που δημιουργήσατε:
Var animatedMarker = L.animatedMarker (line.getLatLngs ());

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

Map.addLayer (γραμμή);

Map.addLayer (animatedMarker);

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

• απόσταση

• διάστημα

• αυτόματη εκκίνηση

• στο τέλος

Οι επιλογές απόστασης και διαστήματος ορίζουν την ταχύτητα με την οποία ο δείκτης θα μετακινηθεί κατά μήκος της γραμμής. Η απόσταση μετριέται σε μέτρα και το διάστημα μετράτε σε xιλιοστά του δευτερολέπτου. Δεδομένου ότι πρόκειται για ρυθμό, η επιλογή {distance: 100, interval 1000} θα ήταν πιο αργή από μια επιλογή {distance: 300, interval: 1000}. Στην πρώτη ρύθμιση, ο δείκτης καλύπτει 100 μέτρα σε ένα δευτερόλεπτο και στη δεύτερη ρύθμιση θα κάλυπτε την απόσταση τριών φορές την ίδια στιγμή.

Η επιλογή autoStart έχει οριστεί ως αληθής από προεπιλογή. Εάν το ορίσετε ως ψευδές, μπορείτε να καλέσετε μια μέθοδο start () στον δείκτη όταν είστε έτοιμοι. Στον κώδικα που χρησιμοποιείται στα παρακάτω βήματα, θα κάνετε έναν χάρτη με δύο κουμπιά: Έναρξη και Διακοπή. Χρησιμοποιώντας το autoStart: false, θα επιτρέψετε στο χρήστη να καθορίσει πότε θα ξεκινήσει το δείκτη και πότε θα τον σταματήσει κατά μήκος της διαδρομής του:
1. Με βάση το προηγούμενο παράδειγμα χρησιμοποιώντας την ίδια γραμμή και δείκτη, προσθέστε ένα Επιλογή του δείκτη για την απόσταση και το διάστημα

Χρησιμοποιώντας την απεικόνιση δεδομένων των Leaftlet

Προσθήκη πλαισίου
Το προσάρτημα πλαισίου απεικόνισης δεδομένων για τα
Leaflet δεδομένα σας επιτρέπει να δημιουργείτε δείκτες που είναι απλά σχήματα: ένας τυπικός δείκτης στυλ καρφίτσας με μια διαμόρφωση σχήματος, ένα αστέρι, και ένας δείκτης πολυγώνου. Σας επιτρέπει επίσης να προσθέσετε δείκτες πίτας και δείκτες γραφήματος στον χάρτη σας.
Το προσάρτημα πλαισίου δεδομένων απεικόνισης
Leaflet δεδομένων έχει επίσης δείκτες Για διαγράμματα ακτινικών ράβδων, διάγραμμα coxcomb, στοιβαγμένος και ακτινικός μετρητής Δείκτες, καθώς και ένα στρώμα δεδομένων, choropleth στρώμα. Αυτό είναι ένα plugin που αξίζει να εξερευνήσετε και το οποίο μπορείτε να το κατεβάσετε από το http://humangeo.github.io/leaflet-dvf/.
Δημιουργία βασικών δεικτών
Η δημιουργία βασικών δεικτών είναι απλή. Ο κώδικας που χρησιμοποιείται στα παρακάτω βήματα θα σας καθοδηγήσει στη δημιουργία ενός δείκτη, ενός δείκτη πολυγώνου και ενός δείκτη αστέρος:
1. Αρχικά, δημιουργήστε μια αναφορά στο CSS και σε δύο αρχεία JavaScript:
<Link rel = "stylesheet" href = "dvf.css" />
<Script src = "Leaflet-dvf.js"> </ script>
<Script src = "Leaflet-dvf.markers.js"> </ script>
2. Στη συνέχεια, δημιουργήστε τους δείκτες. Αυτό που πραγματικά κάνει αυτό το plugin να ξεχωρίζει
Όσον αφορά τους τυπικούς δείκτες είναι ότι μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις επιλογές στην τάξη L.Path. Αυτό σας επιτρέπει να προσαρμόσετε πλήρως τους δείκτες σας. Η δημιουργία των σημάνσεων απαιτεί να επιλέξετε τον τύπο σήμανσης - MapMarker, RegularPolygonMarker ή
starMarker και, στη συνέχεια, επιλέξτε τις επιλογές:
var marker = νέος L.MapMarker ([40.463079, 22.998395], {
radius: 30,
fillOpacity: 0.5,
fillColor: ' orange ',
color: 'purple',
innerRadius: 7,
numberOfSides: 4,
rotation: 10
});
map.addLayer (marker);

var polygonmarker = new L.RegularPolygonMarker ([40, 22], {
numberOfSides: 3,
rotation: 10,
radius: 10,
fillColor: 'green',
fillOpacity: 1,
opacity: 1,
weight: 1,
radius: 30
});
map.addLayer (polygonmarker);
var star = new L.StarMarker ([35, -107], {numberOfPoints: 8,opacity: 1, weight: 2, fillOpacity: 0, radius: 30}).
map.addLayer (star);
Υπάρχουν πάρα πολλές επιλογές για να καταχωρήσετε εδώ, αλλά για να τις δείτε, μεταβείτε στην τεκμηρίωση για το plugin στη διεύθυνση https://github.com/humangeo/Leaflet-dvf/wiki/6.-Markers και την τεκμηρίωση για την κατηγορία διαδρομής των φύλλων στη διεύθυνση http://Leafletjs.com/reference Html # path.
Επιλογές MapMarker
Οι επιλογές MapMarker που χρησιμοποιούνται είναι οι εξής:
• numberOfSides: Η εσωτερική τρύπα καθορίζεται από τον αριθμό των πλευρών: τρία για ένα τρίγωνο, τέσσερα για ένα τετράγωνο. Όσο μεγαλύτερος είναι ο αριθμός, τόσο πιο κοντά σε έναν κύκλο θα είναι. Εάν αφήσετε κενή αυτή την επιλογή, θα γίνει προεπιλογή σε έναν κύκλο.
• περιστροφή: Αυτό σας βοηθά να περιστρέψετε την τρύπα στη μέση. Αυτό, φυσικά, δουλεύει μόνο σε σχήματα που δεν είναι κύκλος.
• ακτίνα: Αυτό είναι το μέγεθος του δείκτη.
• innerRadius: Αυτό είναι το μέγεθος της τρύπας στη μέση
Επιλογές RegularPolygonMarker
Οι επιλογές RegularPolygonMarker που χρησιμοποιούνται είναι οι εξής:
• numberOfSides: Αυτό είναι το σχήμα του δείκτη.
• περιστροφή: Αυτός είναι ο προσανατολισμός του δείκτη. Εάν δημιουργήσετε ένα τετράπλευρο πολύγωνο και το αφήσατε κενό, θα είναι ένα τετράγωνο. Εάν προσθέσετε περιστροφή, εσείς μπορεί να κάνει τις γωνίες να κατευθύνονται προς οποιαδήποτε κατεύθυνση.
• ακτίνα: Αυτό είναι το μέγεθος του δείκτη.
• innerRadius: Αυτό είναι το μέγεθος της τρύπας στη μέση.
Επιλογές StarMarker
Οι επιλογές StarMarker που χρησιμοποιούνται είναι οι εξής:
• numberOfPoints: Αυτό ορίζει πόσα σημεία θα πρέπει να έχει η αρχή
• περιστροφή: Αυτός είναι ο προσανατολισμός του δείκτη
• ακτίνα: Αυτό είναι το μέγεθος του δείκτη
• innerRadius: Αυτό είναι το μέγεθος της τρύπας στη μέση
Δείκτες γραμμών και πίτας
Η προσθήκη σημείων γραφήματος στον χάρτη σας επιτρέπει να εμφανίζετε πολλά κομμάτια δεδομένων για ένα ένα σημείο ή πολύγωνο. Για παράδειγμα, θα μπορούσατε να χαρτογραφήσετε όλα τα μπλοκ απογραφής σε σας και, χρησιμοποιώντας το κεντρικό σημείο κάθε μπλοκ, θα μπορούσατε να τοποθετήσετε ένα γράφημα που να δείχνει το ηλικιακές κατανομές. Αυτό σας επιτρέπει να παρουσιάζετε πολλά δεδομένα γρήγορα και οπτικά.
Για να δημιουργήσετε ένα γράφημα γραμμών ή πίτας με την προσθήκη πλαισίου δεδομένων απεικόνισης
Leaflet δεδομένων, απαιτείται μόνο να δημιουργήσετε ένα αντικείμενο επιλογών και να το μεταβιβάσετε στο δείκτη. Τα παρακάτω βήματα θα σας δείξουν πώς να κάνετε και τα δύο:

  1. 1.Δημιουργήστε ένα αντικείμενο επιλογών με επιλογές δεδομένων και γραφήματος. Τα δεδομένα χρειάζονται το όνομα της κατηγορίας δεδομένων και την τιμή. Στο αντικείμενο επιλογών χάρτη, περνάτε όλες τις επιλογές για το στυλ του γραφήματος. Τρεις σημαντικές επιλογές είναι οι minValue, MaxValue και maxHeight. Αυτές θα πρέπει, υπό τις περισσότερες περιστάσεις, να είναι το ίδιο για όλες τις κατηγορίες. Εάν επιτρέπετε σε μια κατηγορία να έχει maxHeight υψηλότερη από την υπόλοιπη, μπορεί να εμφανιστεί ως μεγαλύτερη μπάρα από μια άλλη κατηγορία με υψηλότερη τιμή. Σκεφτείτε αυτό ως ρύθμιση των ζυγών αξόνων x και y στο Excel. Όλα τα δεδομένα πρέπει να βρίσκονται στην ίδια κλίμακα με τη χαμηλότερη τιμή στο υψηλότερη τιμή. Η αλλαγή της επιλογής maxHeight θα κάνει επίσης το γράφημά σας μεγαλύτερες ή μικρότερες. Οι επιλογές εκτός των επιλογών του χάρτη είναι για τη διαδρομή ή περίγραμμα του διαγράμματος. Κατά τη δημιουργία ενός διαγράμματος πίτας, η επιλογή ακτίνας σάς επιτρέπει να ρυθμίσετε το μέγεθος του δείκτη:

var options = {

data: {

'data1': 20,
'data2': 50,
'data3': 10,

'data4': 20
},

chartOptions: {
       'data1': {

fillColor: 'blue', minValue: 0,

maxValue: 50,
maxHeight: 30,
     },

'data2': {

fillColor: 'red', minValue: 0,

maxValue: 50,
maxHeight: 30,
},

'data3': {

fillColor: 'green', minValue: 0,

maxValue: 50,
maxHeight: 30,
           },

'data4': {

fillColor: 'yellow', minValue: 0,

maxValue: 50,
maxHeight: 30,
}

},

weight: 1,

color: '#000000', radius:30,

fillOpacity:1
};

2.   Μετά δημιουργείστε τους δείκτες, βάζοντας τις επιλογές, και προσθέσετε τους στους χάρτες σας:

var bar = new L.BarChartMarker([40.67224, 22.933290], options);

map.addLayer(bar);

var pie= new L.PieChartMarker([40, 22],options); map.addLayer(p

Ημερολόγιο

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

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

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

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

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

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

conter12

Επαφές

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

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

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