Το OpenLayers είναι ένα ισχυρό εργαλείο JavaScript που μας επιτρέπει να δημιουργούμε και να εμφανίζουμε κάθε είδους χάρτες σε έναν ιστότοπο. Αυτό το άρθρο θα σας καθοδηγήσει στην προσθήκη ενός σημείου και μιας γραμμής, στη συνέχεια μετατρέψτε τις προβολές τους σε συντεταγμένες και, στη συνέχεια, προσθέστε λίγο χρώμα, ορίζοντας το στυλ του επιπέδου.
Λάβετε υπόψη ότι πρέπει να έχετε εγκατεστημένο έναν χάρτη OpenLayers σε μια ιστοσελίδα για να ακολουθήσετε αυτό το άρθρο. Εάν δεν έχετε, ανατρέξτε στην ενότητα Τρόπος δημιουργίας χάρτη χρησιμοποιώντας το OpenLayers 3.
Βήματα
Μέρος 1 από 3: Προσθήκη λειτουργιών συμβολοσειράς σημείου και γραμμής
Βήμα 1. Δημιουργήστε μια δυνατότητα σημείου
Απλώς αντιγράψτε την ακόλουθη γραμμή κώδικα στη δική σας
στοιχείο:
var point_feature = new ol. Feature ({});
Βήμα 2. Ορίστε τη γεωμετρία του σημείου
Για να πείτε στο OpenLayers πού να τοποθετήσετε το σημείο, πρέπει να δημιουργήσετε μια γεωμετρία και να της δώσετε ένα σύνολο συντεταγμένων, η οποία είναι ένας πίνακας με τη μορφή [γεωγραφικό μήκος (E-W), γεωγραφικό πλάτος (N-S)]. Ο ακόλουθος κώδικας δημιουργεί αυτό και ορίζει τη γεωμετρία του σημείου:
var point_geom = νέο ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Βήμα 3. Δημιουργήστε μια λειτουργία συμβολοσειράς γραμμής
Οι συμβολοσειρές είναι ευθείες που χωρίζονται σε τμήματα. Τα δημιουργούμε ακριβώς όπως τα σημεία, αλλά παρέχουμε ένα ζεύγος συντεταγμένων για κάθε σημείο της συμβολοσειράς γραμμής:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
Βήμα 4. Προσθέστε τις δυνατότητες σε ένα διανυσματικό επίπεδο
Για να προσθέσετε τις δυνατότητες στο χάρτη, πρέπει να τις προσθέσετε σε μια πηγή, την οποία προσθέτετε σε ένα διανυσματικό επίπεδο, το οποίο μπορείτε στη συνέχεια να προσθέσετε στο χάρτη:
var vector_layer = new ol.layer. Vector ({source: new ol.source. Vector ({features: [point_feature, linestring_feature]})}}) map.addLayer (vector_layer);
Μέρος 2 από 3: Μετασχηματισμός της γεωμετρίας των χαρακτηριστικών για τη χρήση συντεταγμένων
Όπως συμβαίνει με οποιοδήποτε ισχυρό λογισμικό χαρτογράφησης, οι χάρτες OpenLayers μπορούν να έχουν διαφορετικά επίπεδα με διαφορετικούς τρόπους εμφάνισης πληροφοριών. Επειδή η Γη είναι σφαίρα και όχι επίπεδη, όταν προσπαθούμε να την εμφανίσουμε στους επίπεδους χάρτες μας, το λογισμικό πρέπει να προσαρμόσει τις τοποθεσίες ώστε να ταιριάζει με τον επίπεδο χάρτη. Αυτοί οι διαφορετικοί τρόποι εμφάνισης πληροφοριών χάρτη ονομάζονται προβολές Το Για να χρησιμοποιήσουμε ένα στρώμα διανύσματος και ένα στρώμα πλακιδίων μαζί στον ίδιο χάρτη σημαίνει ότι πρέπει να μετατρέψουμε τα επίπεδα από τη μία προβολή στην άλλη.
Βήμα 1. Τοποθετήστε τα χαρακτηριστικά σε έναν πίνακα
Ξεκινάμε βάζοντας τα χαρακτηριστικά που θέλουμε να μετατρέψουμε μαζί σε έναν πίνακα που μπορούμε να επαναλάβουμε.
var χαρακτηριστικά = [feature_feature, linestring_feature];
Βήμα 2. Γράψτε τη συνάρτηση μετασχηματισμού
Στα OpenLayers, μπορούμε να χρησιμοποιήσουμε τη συνάρτηση transform () στο αντικείμενο γεωμετρίας κάθε χαρακτηριστικού. Βάλτε αυτόν τον κώδικα μετασχηματισμού σε μια συνάρτηση που μπορούμε να καλέσουμε αργότερα:
συνάρτηση transform_geometry (στοιχείο) {var current_projection = new ol.proj. Projection ({code: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (τρέχουσα_προβολή, νέα_προβολή);); }
Βήμα 3. Καλέστε τη λειτουργία μετασχηματισμού στις δυνατότητες
Τώρα απλά επαναλάβετε τον πίνακα.
features.forEach (transform_geometry);
Μέρος 3 από 3: Ρύθμιση του στυλ του διανυσματικού στρώματος
Για να αλλάξουμε την εμφάνιση κάθε λειτουργίας στο χάρτη, πρέπει να δημιουργήσουμε και να εφαρμόσουμε ένα στυλ. Τα στυλ μπορούν να αλλάξουν χρώματα, μεγέθη και άλλα χαρακτηριστικά σημείων και γραμμών και μπορούν επίσης να εμφανίσουν εικόνες για κάθε σημείο, κάτι που είναι πολύ βολικό για προσαρμοσμένους χάρτες. Αυτή η ενότητα δεν είναι απαραίτητη, αλλά είναι διασκεδαστική και χρήσιμη.
Βήμα 1. Δημιουργήστε το γέμισμα και το στοκ
Δημιουργήστε ένα αντικείμενο στυλ πλήρωσης και ένα ημιδιαφανές κόκκινο χρώμα και ένα στυλ κτυπήματος (γραμμής) που είναι μια συμπαγής κόκκινη γραμμή:
var fill = new ol.style. Fill ({χρώμα: [180, 0, 0, 0.3]}); var stroke = new ol.style. Stroke ({χρώμα: [180, 0, 0, 1], πλάτος: 1});
Βήμα 2. Δημιουργήστε το στυλ και εφαρμόστε το στο επίπεδο
Το αντικείμενο στυλ OpenLayers είναι αρκετά ισχυρό, αλλά θα ρυθμίσουμε μόνο την πλήρωση και τη διαδρομή προς το παρόν:
var style = new ol.style. Style ({image: new ol.style. Circle ({fill: fill, stroke: stroke, radius: 8}), fill: fill, stroke: stroke}); vector_layer.setStyle (στυλ);
