trainings

View on GitHub

Erste Schritte

Voraussetzungen

Erste Karte

Bestandteile einer OpenLayers-Karte

HTML-Markup (Auszeichnung)

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

CSS-Deklarationen (Stil)

<link rel="stylesheet" href="https://openlayers.org/en/v5.2.0/css/ol.css" type="text/css" />

<style>
  #map {
    height: 256px;
    width: 512px;
  }
</style>

JavaScript-Initialisierungs-Code (Verhalten)

    <script>
      var map = new ol.Map({
        // Wert des id-Attributs des Karten-Containers
        // Alternativ: document.getElementById("map")
        target: 'map',
        //Liste (als JavaScript-Array) aller Kartenthemen
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        //Kartenausschnitt
        view: new ol.View({
          //Kartenzentrum
          center: ol.proj.fromLonLat([7.013056,51.450833]),
          //initialen Zoomlevel
          zoom: 12
        })
      });
    </script>

Weitere Daten- & Layerquellen einbinden

Neue source für die erste_karten.html einbinden

Bing Maps einbinden

Die Bing-API kann nur mit einem API-Schlüssel key verwendet werden. Die Übungsaufgabe / das Beispiel verwendet einen solchen Schlüssel, dieser sollte nicht für Ihre eigenen Anwendungen verwendet werden. Ein eigener Bing-API-Schlüssel kann kostenlos nach der Registrierung unter https://www.bingmapsportal.com/ erstellt werden.

Vektor Geometrieebene einbinden (GeoJSON)

Vektor Geometrieebenen stylen (GeoJSON)

Stylen Sie die Westfalen Kreise nach Ihren Vorstellungen neu. Setzen Sie dazu am Layer ol.layer.Vector einen neuen ol.style.Style, welcher die Linien ol.style.Strokeder Polygone in Farbe color und Dicke width ausgestaltet. Wählen Sie für die Fläche der Polygone eine ansprechende Füllung mittels ol.style.Fill.

Metadaten der Vektor Geometrieebene abfragen

Jede Fläche repräsentiert ein ol.Feature Objekt des ol.layer.Vector und jedes Feature hat bspw. die Attribute Kreisname und Oberbürgermeister. Registrieren Sie eine Funktion, welche bei jedem singleclick-Event, welcher auf der ol.Map gefeuert wird, die Funktion forEachFeatureAtPixel der map aufruft und gegebenenfalls weitere Informationen über den Kreis ausgibt.

Tipps: HTML-Markup (Auszeichnung)

<div id="info"></div>

JavaScript-Schnipsel

map.on('singleclick', function(e) {
//map.forEachFeatureAtPixel()
});

Statische Vektoren (ImageVector)

OpenLayers erzeugt ein Rasterbild der Vektordaten mittels ol.layer.Vector. Vorteil:

new ol.layer.Image({
          title: 'Westfalen Kreise',
          renderMode: 'image',
          source: new ol.source.Vector({
            url: 'data/westfalen_kreise.geojson',
            format: new ol.format.GeoJSON(),
          }),
          style: 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)'
            })
          })
        })

style wird nicht mehr dem Layer sondern der ol.source.ImageVector mitgegeben!

Interaktionen einbinden

Drag, Rotate und Zoom

Fügen Sie die Interaktion DragRotateAndZoom Ihrer Karte (Map) hinzu. Tipp:

interactions: ol.interaction.defaults().extend([
  //DragRotateAndZoom()
]),

Features selektieren

Ändern Sie dazu das Beispiel: beispiele/geojson.html Erweitern Sie die vorhanden Interaktionen um ol.interaction.Select. Erweitern Sie ol.interaction.Select um eine style-Option. Orientieren Sie sich dabei an dem bereits vorhandenen Style von ol.source.Vector. Achten Sie dabei darauf sinnvolle und andere Angaben bei color zu wählen.

Features neuzeichnen (Teil 1)

Ändern Sie dazu das Beispiel: beispiele/geojson.html Neue Features können mittels ol.interaction.Draw gezeichnet werden. Eine Draw-Interaktion benötigt beim Initialisieren eine entsprechende Vektor-Source source und einen Geometrietyp type.

Features neuzeichnen (Teil 2)

Geben Sie mittels des Eventhandler drawend die Koordinaten des gezeichnetes Feature auf der Konsole aus.

Features modifizieren

Ändern Sie dazu das Beispiel: beispiele/geojson_select.html

Um Features zu verändern, wird ol.interaction.Select mit ol.interaction.Modify kombiniert. Diese Interaktionen teilen sich einen gemeinsame Menge an Features (ol.Collection). Features welche ol.interaction.Select selektiert wurden, werden zu potentiellen Kandidaten für die Modifikation mittels ol.interaction.Modify.

Steuerelemente einbinden

Einen Maßstabsbalken anzeigen

Fügen Sie den nachfolgenden Code-Schnipsel irgendwo innerhalb der ol.Map-Konfiguration hinzu:

controls: ol.control.defaults().extend([
  new ol.control.ScaleLine()
]),

Stylen des Maßstabsbalken

In der CSS-Deklaration:

.ol-scale-line, .ol-scale-line:not([ie8andbelow]) {
  background: black;
  padding: 5px;
}

Maßstabsbalken auslagern

Der Maßstabsbalken soll in ein separates <div>-Element außerhalb der Karte plaziert werden.

<div id="scale-line" class="scale-line"></div>

Passen Sie die controls-Konfiguration entsprechend an:

new ol.control.ScaleLine({
    className: 'ol-scale-line',
    target: document.getElementById('scale-line')
  })

Passen Sie die CSS-Deklaration entsprechend an:

.scale-line {
  position: absolute;
  top: 350px;
}
.ol-scale-line {
  position: relative;
  bottom: 0px;
  left: 0px;
}

Eine OverviewMap anzeigen

.ol-custom-overviewmap,
.ol-custom-overviewmap.ol-uncollapsible {
   bottom: auto;
   left: auto;
   right: 0;
   top: 0;
}

className: 'ol-overviewmap ol-custom-overviewmap'

MousePosition anzeigen

ZoomToMaxExtent

Zoomen Sie auf die Ausdehnung von Deutschland. Die BoundingBox kann über http://boundingbox.klokantech.com/ ermittelt werden. Achtung: Die Angaben sind in EPSG:4326 und müssen in OpenLayers-Standardprojektion EPSG:3857 transformiert werden. Tipp: ol.proj.transformExtent

ZoomSlider

Fügen Sie einer beliegenden Karte einen ZoomSilder hinzu. Indem Sie die Console der Firefox Developer Tools oder Chrome DevTools benutzen.

map.addControl(new ol.control.ZoomSlider());

Fortgeschrittene Themen (optional)

Vektor Geometrieebenen klassifizieren (GeoJSON)

Klassifizieren Sie die Einwohnerzahlen Einwohner Westfalen Kreise data/data/westfalen_kreise.geojson mittels einer Style-Funktion. Sie können dazu das folgende Beispiel verwenden: https://bjoernschilberg.github.io/trainings/openlayers/beispiele/geojson_style.html

WMS-Ebene einbinden

Exkurs WMS

OpenLayers Sources

layers: [
        new ol.layer.Tile({
          title: 'wms_nw_dop20',
          source: new ol.source.TileWMS({
            url: 'https://www.wms.nrw.de/geobasis/wms_nw_dop20',
            params: {
              LAYERS: 'nw_dop20',
              TILED: true,
            }
          })
        })
      ],

Abfrage von Informationen mittels GetFeatureInfo (WMS)

Fügen Sie den Layer nw_dtk25_info des Dienstes https://www.wms.nrw.de/geobasis/wms_nw_dtk25 als wmsSource dem wmsLayer hinzu. Fügen Sie den wmsLayer der Karte (map) hinzu.

Registrieren Sie eine Funktion, die bei jedem singleclick-Event, welcher auf der ol.Map gefeuert wird, die Funktion getGetFeatureInfoUrl des Dienstes aufruft und gegebenenfalls weitere Informationen ausgibt.

map.on('singleclick', function(evt) {
  document.getElementById('info').innerHTML = '';
  var viewResolution = /* FIX ME */ ;
  var url = wmsSource.getGetFeatureInfoUrl( /* FIX ME */ );
  if (url) {
    document.getElementById('info').innerHTML = '<iframe width=650 height=570 seamless src="' + url + '"></iframe>';
  }
});

Beachten Sie die Funktion singleclick eine wmsSource erwartet!

OpenLayers WMS NRW GetFeatureInfo Beispiel

Zoom-Anzeigen fixen.

WFS Dienst einbinden

Fügen Sie WFS-Feature mit dem typename=dvg:nw_dvg1_krs des Dienstes https://www.wfs.nrw.de/geobasis/wfs_nw_dvg?service=WFS als ol.source.Vector dem ol.layer.Vector hinzu. Fügen Sie den Vektor Layer der Karte (map) hinzu.

Fügen Sie zusätzlich noch eine geeignete Hintergrundkarte hinzu.

    var vectorSource = new ol.source.Vector({
      format: new ol.format.GML2(),
      url: function(extent) {
        return 'https://www.wfs.nrw.de/geobasis/wfs_nw_dvg?service=WFS&' +
          'version=1.1.0&request=GetFeature&typename=dvg:nw_dvg1_krs&' +
          'outputFormat=text/xml;%20subtype=gml/2.1.2&srsname=EPSG:3857&' +
          'bbox=' + extent.join(',');
      },
      strategy: ol.loadingstrategy.bbox
    });

    var vector = new ol.layer.Vector({
      source: vectorSource,
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'rgba(0, 0, 255, 1.0)',
          width: 2
        })
      })
    });

Metadaten der WFS Vektor Geometrieebene abfragen

Jede Fläche repräsentiert ein ol.Feature Objekt des ol.layer.Vector, und jedes Feature hat bspw. die Attribute GN. Registrieren Sie eine Funktion, die bei jedem singleclick-Event, welcher auf der ol.Map gefeuert wird, die Funktion forEachFeatureAtPixel der map aufruft und gegebenenfalls weitere Informationen über den Kreis ausgibt.

Tipps: HTML-Markup (Auszeichnung)

<div id="info"></div>

JavaScript-Schnipsel

map.on('singleclick', function(e) {
//map.forEachFeatureAtPixel()
});

Rotate geometries

var geom = ol.geom.Polygon.fromExtent([-5, -5, 5, 5]);
geom.rotate(Math.PI / 4);

Kartenlabel

Reprojektion

Siehe dazu die folgende Beispiele:

ArcGIS Rest Feature Service

https://openlayers.org/en/latest/examples/vector-esri.html mit https://services1.arcgis.com/W47q82gM5Y2xNen1/ArcGIS/rest/services

weitere Vektoren (CSV,KML, GeoRSS)

http://openlayers.org/workshop/en/layers/vector.html

Zeichnen / Modifizieren / Entfernen eigener Geometrien (Features)

Fügen Sie der Karte folgende Controls hinzu: