../../_images/logo_openlayers.png ../../_images/OSGeo_project.png

OpenLayers Quickstart

Dieses Quickstart beschreibt die grundlegenden Schritte, die notwendig sind, um mit OpenLayers zu beginnen: eine Basiskarte erstellen, Raster- und Vektorlayer hinzufügen und Objekte stylen.

OpenLayers macht es einfach, eine dynamische Karte in jeder Webseite zu platzieren. Es kann Kartenkacheln, Vektordaten und Marker anzeigen, die aus jeder Quelle geladen werden können. OpenLayers wurde entwickelt, um die Nutzung geographischer Informationen aller Art zu fördern. Es ist völlig kostenlos, Open Source JavaScript, veröffentlicht unter der 2-Klausel-BSD-Lizenz (auch bekannt als FreeBSD).

Grundprinzipien

Bevor wir mit der Arbeit mit OpenLayers beginnen einige Kernbegriffe:

Map

Die map ist die Kernkomponente von OpenLayers. Für das Rendern der map werden eine view, ein oder mehrere layer und ein Zielcontainer benötigt.

View

Der view bestimmt, wie die Karte dargestellt wird. Er wird verwendet, um die Auflösung, die zentrale Position usw. festzulegen. Es ist wie eine Kamera, durch die wir den Inhalt der Karte betrachten.

Layers

layer können der Karte in gestapelter Reihenfolge hinzugefügt werden. Layer können entweder Raster-Layer (Bilder) oder Vektor-Layer (Punkte/Linien/Polygone) sein.

Source

Jede Ebene verfügt über eine source (Quelle), die weiß, wie der Layerinhalt geladen wird. Bei vektor-Layern liest die Quelle Vektordaten mit einer format-Klasse (z. B. GeoJSON oder KML) und stellt dem Layer eine Reihe von Features zur Verfügung.

Features

Features stellen reale Objekte dar und können mit verschiedenen Geometrien (wie Punkt, Linie oder Polygon) mit einem definierten Stil dargestellt werden, der das Aussehen bestimmt (Liniendenken, Füllfarbe usw.).

Erstellen einer einfachen Karte

Erstellen Sie eine Datei z.B. /home/user/ genannt basic-map.html , und kopieren Sie den folgenden Inhalt in die Datei.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Basic map</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

        <!-- OpenLayers CSS -->
        <link rel="stylesheet" href="http://localhost/openlayers/dist/ol.css" type="text/css">

        <!-- Custom styles -->
        <style>
          #map {
            width: 100%;
            height: 500px;
          }
        </style>
    </head>
    <body>
        <h1>Basic map</h1>

        <div id="map"></div>

        <!-- OpenLayers JS-->
        <script src="http://localhost/openlayers/dist/ol.js" type="text/javascript"></script>

        <!-- App code -->
        <script>
          var map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              })
            ],
            view: new ol.View({
              center: ol.proj.fromLonLat([2.1833, 41.3833]),
              zoom: 6
            })
          });
        </script>

    </body>
</html>

Versuchen Sie nun, die Datei basic-map.html über einen Webbrowser mit File->Open File zu öffnen. Folgendes sollte angezeigt werden:

../../_images/openlayers-basic-map.png

Anmerkung:

  • Der Code folgt der bewährten Methode, JavaScipt-Code am Ende der HTML-Datei zu laden.

  • Eine OpenLayers-Karte muss an ein HTML-DOM-Element angehängt werden, daher haben wir ein ‚‘<div>‘‘-Element, das durch die map-ID identifiziert wird.

  • Karten werden durch die ‚‘ol. Map‘‘-Klasse repräsentiert. Wir geben das DOM-Element an, in das die Karte eingefügt werden soll. Dies erfolgt über die Eigenschaft target.

  • OpenLayers ermöglicht das Rendern von Karten mit zwei verschiedenen Mechanismen: Canvas und WebGL. Der Standardrenderer ist canvas.

  • Eine Karte zeigt Daten in Layern an, daher haben wir einen gekachelten Layer erstellt, der durch die Klasse ‚‘ol.layer.Tile‘‘ dargestellt wird und Inhalte aus dem OpenStreetMap-Projekt lädt, indem die Quellklasse ‚‘ol.source.OSM‘‘ verwendet wird.

  • Schließlich legen wir die Ausgangsposition der Kamera über die ol.View-Klasse fest, definieren zudem die anfängliche Zoomstufe und zentrieren die Position.

Hinzufügen von Raster-Layern

Die am häufigsten verwendeten Raster-Layer sind gekachelten Layer, die von OpenStreetMap, Stamen, Bing usw. bereitgestellt werden. Gekachelte Layer werden durch die Klasse ‚‘ol.layer.Tile‘‘ dargestellt und müssen eine Quelle verwenden, die weiß, wie Kacheln von einem bestimmten Anbieter geladen werden, z. B. ‚‘ol.source.OSM‘‘ oder ‚‘ol.source.Stamen‘‘:

var osm = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var stamen = new ol.layer.Tile({
  source: new ol.source.Stamen({
    layer: 'watercolor'
  })
});

Es gibt zwei Möglichkeiten, um einen Layer zur Karte hinzuzufügen:

  • Nutzen Sie die ‚‘layers‘‘-Eigenschaft: beim Aufbau der ‚‘ol. Map‘.‘

    var map = new ol.Map({
  ...
  layers: [osm, stamen]
  ...
});

  • Fügen Sie sie mit der ‚‘map.addLayer()‘‘-Methode hinzu:

    map.addLayer(osm);
map.addLayer(stamen);

Hinzufügen von Vektor-Layern

Vektor-Layer werden durch die Klasse ‚‘ol.layer.Vector‘‘ dargestellt und müssen eine Quelle verwenden, die zum jeweiligen Vektorformat passt, z. B. ‚‘ol.source.GeoJSON‘‘, ‚‘ol.source.KML‘‘ oder ‚‘ol.source.TopoJSON‘‘.

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.GeoJSON({
    url: 'url_to_geojson_file'
  })
});

// Add Vector layer to map
map.addLayer(vectorLayer);
../../_images/openlayers-vector.png

Beachten Sie, dass wir im vorherigen Beispiel die ‚‘url_to_file‘‘ so ändern müssen, dass sie auf eine gültige GeoJSON-Datei verweist, die auf unserem Server abgelegt wurde. Beachten Sie, dass JavaScript-Sicherheit es verhindert auf Datensätze von einer externen URL auf einer anderen Domäne/Port zuzugreifen (auch als same-origin policy bezeichnet).

Objekte können auch manuell erstellt werden. In diesem Fall müssen wir eine Geometrie erstellen, die das Objekt darstellt:

// Geometries
var point = new ol.geom.Point(
    ol.proj.transform([3,50], 'EPSG:4326', 'EPSG:3857')
);
var circle = new ol.geom.Circle(
    ol.proj.transform([2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'),
    1000000
);

// Features
var pointFeature = new ol.Feature(point);
var circleFeature = new ol.Feature(circle);

// Source
var vectorSource = new ol.source.Vector({
    projection: 'EPSG:4326'
});
vectorSource.addFeatures([pointFeature, circleFeature]);

// Vector layer
var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

// Add Vector layer to map
map.addLayer(vectorLayer);

Anwenden eines Stils auf Objekte

Features innerhalb von Vektor-Layern können mit einem Stil versehen werden. Der Stil wird durch eine Kombination aus Füllung, Strich, Text und Bild bestimmt, die alle optional sind. Darüber hinaus kann ein Stil auf einen Layer angewendet werden, der den Stil aller enthaltenen Features bestimmt, oder auf ein einzelnes Feature.

Ein Stil wird durch die Klasse ‚‘ol.style.Style‘‘ repräsentiert. Es können die Eigenschaften ‚‘fill‘‘, ‚‘stroke‘‘‘, ‚‘text‘‘ und ‚‘image‘‘ gesetzt werden. Das folgende Beispiel zeigt das Dataset der administrativen Grenzen in einer Darstellung mit grüner Füllung und Umrandung:

../../_images/openlayers-styling.png 
var limitsLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'data/world_limits.json',
    format: new ol.format.TopoJSON(),
    projection: 'EPSG:3857'
  }),
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(55, 155, 55, 0.3)'
    }),
    stroke: new ol.style.Stroke({
      color: 'rgba(55, 155, 55, 0.8)',
      width: 1
    }),
    image: new ol.style.Circle({
      radius: 7,
      fill: new ol.style.Fill({
        color: 'rgba(55, 155, 55, 0.5)',
      })
    })
  })
});

In dem Beispiel haben wir eine TopoJSON-Datei geladen und durch die ‚style‘‘-Eigenschaft gestylt. Wir haben ‚‘fill‘‘ und ‚‘stroke‘‘‘ festgelegt, das für Linien und Polygone benötigt wird. Außerdem wurde ‚‘image‘ definiert (in diesem Fall ein Kreis) und auf Punkt- Objekte angewendet.

Arbeiten mit Ereignissen (Events)

Die meisten Komponenten, z. B. Karte, Layer oder Steuerelemente, lösen Ereignisse aus, und informieren so über Änderungen. Beispielsweise können wir jedes Mal benachrichtigt werden, wenn die Maus über der Karte bewegt wird oder wenn ein Feature zu einem Vektor-Layer hinzugefügt wird usw.

Ereignisse können leicht für ein Objekt mit der Methode ‚‘on()‘‘ registriert und mit der Methode ‚‘un()‘‘ abgemeldet werden.

Das folgende Beispiel registriert ein Ereignis auf einer Karteninstanz und benachrichtigt jedes Mal, wenn der Zeiger verschoben wird. Innerhalb der callback-Funktion holen wir die aktuellen Mauszeiger-Koordinaten und geben sie in der Browser-Konsole in zwei verschiedenen Projektionen aus.

map.on('pointermove', function(event) {
  var coord3857 = event.coordinate;
  var coord4326 = ol.proj.transform(coord3857, 'EPSG:3857', 'EPSG:4326');

  console.log(coord3857, coord4326);
});

Was kommt als Nächstes?

Manchmal ist der schnellste Weg, um herauszufinden, wie OpenLayers funktioniert, Beispiele und ihren Quellcode zu betrachten. Weitere OpenLayers-Informationen finden Sie hier: