trainings

View on GitHub

Theoretische Einführung

Was ist OpenLayers?

Selbstdarstellung des Projektes

A high-performance, feature-packed library for all your mapping needs.

http://openlayers.org/

Merkmale

Was ist OpenLayers nicht?

Was kann OpenLayers?

Erster Eindruck

Eine einfache Karte

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat([7.112222,51.430556]),
    zoom: 11
  })
});

https://bjoernschilberg.github.io/trainings/openlayers/beispiele/erste_karte.html

Übung 1

Interaktions-,Steuer- und Navigationsmöglichkeiten

Steuerelemente

Übung 2

Interaktionen

Übung 3

Unterstütze Daten- & Layerquellen

Freie Ebenen Restriktive Ebenen
OGC WMS Google Maps
OGC WFS(-T) Yahoo! Maps
OGC TMS MSN Virtual Earth
OGC GML Map24
GeoRSS Mulitmap
GeoJSON Bing
KML  
GPX  
WKT  
OSM  

Übungen

Anwendungsbeispiele

Populäre

Weitere

Gemeinschaft

Geschichte

Timeline

Weitere Infos zu den einzelnen Versionen

https://github.com/openlayers/openlayers/releases

Version3

v3.4.0

v3.4.0 — v3.10.0

v3.11.0

v3.15.0

v3.16.0

v3.17.0

v3.18.0

v3.20.0

Version4

Wiederverwendbarkeit 1

Exkurs ES2015

import Map from 'ol/map';
import View from 'ol/view';
import TileLayer from 'ol/layer/tile';
import OSM from 'ol/source/osm';
import proj from 'ol/proj';

new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: proj.fromLonLat([13.4319466, 48.5667364]),
    zoom: 14
  })
});

Komplette Anleitung für die Verwendung mit rollup.js unter https://gist.github.com/tschaub/32a5692bedac5254da24fa3b12072f35.

Wiederverwendbarkeit 2

Verbesserungen getZoom / setZoom

Vorher

view.setZoom(1.5);
view.getZoom(); // undefined

Nachher

view.setZoom(1.5);
view.getZoom(); // 1.5

Details:

Version 5

Das Hauptthema der Version v5.0.0 ist eine verbesserte Entwickler-/Benutzererfahrung mit OpenLayers. Zu diesem Zweck wurd die Bibliothek als eine Reihe von ES-Modulen überarbeitet, um jegliche Abhängigkeit vom Closure Compiler zu beseitigen und die Kompatibilität mit Mainstream-Modul-Bundlern zu verbessern.

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 0
  })
});

Übung 4

Testen Sie setZoom und getZoom in der Browser Console der Developer Tools/DevTools am Beispiel der ersten_Karte.

Geometrien skalieren

var geom = new ol.geom.Polygon([[
    [-1, -2],
    [1, -2],
    [1, 2],
    [-1, 2],
    [-1, -2]
]]);

geom.scale(2);

geom.scale(2, 1);

geom.scale(2, 1, [-1, -2]);

Intersects & Within

Damit nur Feature zurückkommen die sich innerhalb des Polygons befinden. Vorteil: Performanter.

new ol.format.WFS().writeGetFeature({
  srsName: 'EPSG:4326',
  featureTypes: ['area'],
  filter: ol.format.filter.intersects(
    'the_geom',
    new ol.geom.Polygon([[
        [10, 20],
        [10, 25],
        [15, 25],
        [15, 20],
        [10, 20]
    ]])
  )
});

https://github.com/openlayers/openlayers/pull/5668

overlaps & Vector / VectorTile

new ol.source.Vector({
  url: 'data/westfalen_kreise.geojson',
  format: new ol.format.GeoJSON(),
  overlaps: false
})

Sinnvoll bei nicht überlappenden Geometrien. Vorteil höhere Ausführungsgeschwindigkeit.

Details: https://github.com/openlayers/openlayers/pull/5196

Übung 5

Testen Sie dies an dem GeoJSON-Beispiel aus: https://bjoernschilberg.github.io/trainings/openlayers/beispiele/geojson.html.

rotateWithView

Sonstige Änderungen

Zukünftiges

weitere Funktionen

Übung 6

Vektor Geometrieebenen stylen

Layer style

Ein Vektorlayer akzeptiert als Wert für die style-Konfigurationsoption eine Instanz:

Beispiel für die Verwendung eines statischen ol.style-Objektes:

var layer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: new ol.style.Style({
    // ...
  })
});

ol.style.Style-Objekt

Besitzt vier Schlüssel:

Rückgabe: Array von ol.style.Style-Objekten.

Angenommen alle Features sollten rot gezeichnet werden, außer denjenigen, die ein class-Attribut mit dem Wert “someClass” haben (und diese sollen wie oben blau gefüllt sein und einen 1-Pixel breiten Rand in oliv haben), so könnte die Funktion wie folgt aussehen.

style: (function() {
  var someStyle = [new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'blue'
    }),
    stroke: new ol.style.Stroke({
      color: 'olive',
      width: 1
    })
  })];
  var otherStyle = [new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'red'
    })
  })];
  return function(feature, resolution) {
    if (feature.get('class') === "someClass") {
      return someStyle;
    } else {
      return otherStyle;
    }
  };
}())

Wegen der besseren Performance und damit die style Funktion nicht mehrmals während des Renders aufgerufen wird, da ansonsten Artefakte beim Darstellen entstehen können. Sollten wenn möglich, die tatsächlichen Stil-Objekte außerhalb der Funktion möglichst nur einmal erzeugt werden und in der Funktion nur Referenzen hierauf zurückgegeben werden. Im obigen Beispiel wird hierzu eine closure verwendet.

Feature können auch in Abhängigkeit der resolution ausgestaltet werden.

Stildeklarationsböcke: Symbolizer

Ähnlich zu den Stildeklarationblöcken in CSS.

h1 {
  color: green;
}

Gibt es in OpenLayers die Symbolizer. Diese sind Instanzen der Klassen im Namensraum ol.style.

Hier ein Beispiel für Polygon-Features welche mit transparent blauem Hintergrund und einem 3-Pixel breiten Rahmen in blau dargestellt werden soll.

new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: 'blue',
    width: 3
  }),
  fill: new ol.style.Fill({
    color: 'rgba(0, 0, 255, 0.1)'
  })
})

In diesem Beispiel wurden die zwei Symbolizer Stroke und Fill verwendet.

Je nach Geometrietyp können verschiedene Symbolizer verwendet werden. Linien verhalten sich weitestgehend wie Polygone, akzeptieren jedoch keine Füllung. Punkte können mittels ol.style.Circle (für Kreissymbole) oder ol.style.Icon (z.B. für png-Bilder) ausgestaltet werden. Weitere Klassen:

Beispiel für Kreissymbole:

new ol.style.Circle({
  radius: 10,
  fill: new ol.style.Fill({
    color: 'red',
    opacity: 0.6
  }),
  stroke: new ol.style.Stroke({
    color: 'blue',
    opacity: 0.4
  })
});

Übung 7

Style-Funktion

Ein Vektorlayer akzeptiert als Wert für die style-Konfigurationsoption auch eine Funktion, in welcher unterschiedliche Stile anhand von Featureattributen zurückgegeben werden kann. Ist zum Beispiel bei Klassifikation sinnvoll.

Der Funktion werden zwei Argumente übergeben: Das zu stylende feature und die aktuelle resolution. Im folgenden Beispiel werden Features, welche ein Attribut class und ein Wert someClass besitzen speziell ausgestaltet.

var layer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: function(feature, resolution) {
    if (feature.get('class') === 'someClass') {
      // create styles...
      return styles;
    }
  },
});

Übung 8

Pseudoklassen

In CSS sprechen die CSS-Pseudoklassen :hover, :active und :focus auf unmittelbare Interaktion des Benutzers an. Die Pseudoklassen selektieren Elemente, die

Ursprünglich für Verweise gedacht, sind diese Pseudoklassen in allen relevanten Browsern auf beliebige Elemente anwendbar.

In OpenLayers gibt es mit ol.interaction.Select ein ähnliches Konzept.

  new ol.interaction.Select({
          style: new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'red',
              width: 3
            }),
            fill: new ol.style.Fill({
              color: 'rgba(0, 0, 255, 0.1)'
            })
          })
        })

Übung 9

Exkurse

LonLat vs LatLon

 Bei der Angabe von Ortskoordinaten ist die Breite stets zuerst anzugeben, dann erst die Länge: „B vor L, wie im Alphabet“. Bei den englischen Bezeichnung „Latitude“ und „Longitude“ funktioniert die alphabetische Regel ebenso. Ihren Grund hat diese Konvention in der Geschichte: die Breite konnte bereits Jahrhunderte vor der Länge ziemlich exakt bestimmt werden.

Diese Regel gilt leider aber nicht immer und nicht für alle Formate oder Dienste, wie der folgende Überlick zeigt:

Webpack

Sinnvoller Einsatz vermutlich ab v5.0.0 möglich.

OpenLayers Builder

weitere Quellen