OpenLayers ist ein leistungsstarkes JavaScript-Tool, mit dem wir alle Arten von Karten auf einer Website erstellen und anzeigen können. In diesem Artikel erfahren Sie, wie Sie ein Punkt- und ein Linienzug-Feature hinzufügen, ihre Projektionen dann in Koordinaten umwandeln und dann etwas Farbe hinzufügen, indem Sie den Stil des Layers festlegen.
Bitte beachten Sie, dass Sie eine funktionierende OpenLayers-Map auf einer Webseite installiert haben müssen, um diesem Artikel folgen zu können. Wenn Sie keine haben, lesen Sie So erstellen Sie eine Karte mit OpenLayers 3.
Schritte
Teil 1 von 3: Hinzufügen von Punkt- und Linienzug-Features
Schritt 1. Erstellen Sie ein Punkt-Feature
Kopieren Sie einfach die folgende Codezeile in Ihr
Element:
var point_feature = new ol. Feature({});
Schritt 2. Legen Sie die Geometrie des Punkts fest
Um OpenLayers mitzuteilen, wo der Punkt platziert werden soll, müssen Sie eine Geometrie erstellen und ihr einen Koordinatensatz zuweisen, der ein Array in der Form [Längengrad (E-W), Breitengrad (N-S)] ist. Der folgende Code erstellt dies und legt die Geometrie des Punkts fest:
var point_geom = new ol.geom. Point([20, 20]); point_feature.setGeometry(point_geom);
Schritt 3. Erstellen Sie ein Linienzug-Feature
Linienstränge sind gerade Linien, die in Segmente unterteilt sind. Wir erstellen sie genau wie Punkte, stellen jedoch für jeden Punkt der Linienfolge ein Koordinatenpaar bereit:
var linestring_feature = new ol. Feature({geometrie: new ol.geom. LineString(
Schritt 4. Fügen Sie die Features zu einer Vektorebene hinzu
Um die Features zur Karte hinzuzufügen, müssen Sie sie einer Quelle hinzufügen, die Sie einem Vektor-Layer hinzufügen, den Sie dann der Karte hinzufügen können:
var vector_layer = new ol.layer. Vector({ source: new ol.source. Vector({ features: [point_feature, linestring_feature] }) }) map.addLayer(vector_layer);
Teil 2 von 3: Transformieren der Geometrien der Features zur Verwendung von Koordinaten
Wie jede leistungsstarke Kartensoftware können OpenLayers-Karten verschiedene Ebenen mit unterschiedlichen Darstellungsweisen von Informationen haben. Da die Erde ein Globus und nicht flach ist, muss die Software die Standorte anpassen, damit sie mit der flachen Karte übereinstimmen, wenn wir versuchen, sie auf unseren flachen Karten anzuzeigen. Diese verschiedenen Möglichkeiten, Karteninformationen anzuzeigen, werden als. bezeichnet Projektionen. Um eine Vektorebene und eine Kachelebene zusammen auf derselben Karte zu verwenden, müssen wir die Ebenen von einer Projektion in eine andere transformieren.
Schritt 1. Fügen Sie die Features in ein Array ein
Wir beginnen damit, dass wir die Features, die wir transformieren möchten, in ein Array zusammenfügen, das wir iterativ durchlaufen können.
var features = [point_feature, linestring_feature];
Schritt 2. Schreiben Sie die Transformationsfunktion
In OpenLayers können wir die Funktion transform() für das Geometrieobjekt jedes Features verwenden. Setzen Sie diesen Transformationscode in eine Funktion, die wir später aufrufen können:
Funktion transform_geometry(element) { var current_projection = new ol.proj. Projection({code: "EPSG:4326"}); var new_projection = tile_layer.getSource().getProjection(); element.getGeometry().transform(aktuelle_Projektion, neue_Projektion);); }
Schritt 3. Rufen Sie die Transformationsfunktion für die Features auf
Jetzt einfach durch das Array iterieren.
features.forEach(transform_geometry);
Teil 3 von 3: Einstellen des Stils der Vektorebene
Um zu ändern, wie jedes Feature auf der Karte aussieht, müssen wir einen Stil erstellen und anwenden. Stile können Farben, Größen und andere Attribute von Punkten und Linien ändern, und sie können auch Bilder für jeden Punkt anzeigen, was für benutzerdefinierte Karten sehr praktisch ist. Dieser Abschnitt ist nicht notwendig, aber er macht Spaß und ist nützlich.
Schritt 1. Erstellen Sie die Füllung und den Stoke
Erstellen Sie ein Füllstilobjekt und eine halbtransparente rote Farbe sowie einen Strich-(Linien-)Stil, der eine durchgehende rote Linie ist:
var fill = new ol.style. Fill({ color: [180, 0, 0, 0.3] }); var Stroke = new ol.style. Stroke({ color: [180, 0, 0, 1], width: 1});
Schritt 2. Erstellen Sie den Stil und wenden Sie ihn auf die Ebene an
Das OpenLayers-Stilobjekt ist ziemlich mächtig, aber wir werden vorerst nur die Füllung und den Strich festlegen:
var style = new ol.style. Style({ image: new ol.style. Circle({ Fill: Fill, Stroke: Stroke, Radius: 8 }), Fill: Fill, Stroke: Stroke }); vector_layer.setStyle(Stil);
