Wenn Sie ein Thema (layer) Ihrer Karte hinzufügen, ist die Themenquelle (source) in der Regel für das Abrufen der angezeigt Daten verantwortlich. Die angeforderten Daten können entweder Raster- oder Vektordaten sein. Rasterdaten stellen wir uns hierbei als serverseitig erzeugtes Bild vor. Vektordaten werden als strukturierte Informationen vom Server ausgeliefert, und sie werden für die Anzeige erst auf dem Client (also in ihrem Browser) gerendert.
Es gibt mannigfaltige Services, die Rasterdaten bereitstellen. In diesem Abschnitt werden wir uns mit denjenigen befassen, die Rasterdaten konform zur OGC Web Map Service (WMS)-Spezifikation liefern.
Wir werden nun zunächst wieder mit einem vollständigen Beispiel beginnen. Nach und nach werden wir die layer der Karte modifizieren, um ein Verständnis für die Funktionalität zu bekommen.
Schauen wir uns folgenden Code an:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
<script src="ol3/ol.js" type="text/javascript"></script>
<title>OpenLayers 3 example</title>
</head>
<body>
<h1>My Map</h1>
<div id="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
});
</script>
</body>
</html>
Übungen
Falls noch nicht geschehen, speichern Sie obigen Text als map.html im Workshopverzeichnis.
Testen Sie, ob die Karte wie erwartet funktioniert:
Der ol.layer.Tile-Konstruktor wird mit einem Konfigurationsobjekt vom Typ olx.layer.TileOptions aufgerufen (vgl. http://openlayers.org/en/master/apidoc/ol.layer.Tile.html). Im vorliegenden Fall ist der Wert des source-Schlüsselwortes eine Instanz der Klasse ol.source.TileWMS. Ein lesbarer Titel kann für den Layer mit der title-Option festgelegt werden; tatsächlich kann man beliebige Schlüssel hier verwenden und anschließend darauf über die Instanz zugreifen.
Im Gegensatz zu OpenLayers 2.x (wo die Aufgaben von source und layer gemeinsam von OpenLayers.Layer-Instanzen übernommen wurden), unterscheidet ol3 immer zwischen einem Thema (layer) und seiner Datenquelle (source).
Die Klasse ol.layer.Tile repräsentiert ein reguläres Netz oder Grid von Bildern. Ein einzelnes Bild als Thema ist durch die Klasse ol.layer.Image abgebildet.
Je nach Layertyp (...Tile oder ...Image) sollte auch eine andere source verwendet werden: ol.source.TileWMS beziehungsweise ol.source.ImageWMS.
Der ol.source.TileWMS-Konstruktor erwartet ein einzelnes Objekt als Argument. Die Struktur dieses Objektes ist unter http://openlayers.org/en/master/apidoc/ol.source.TileWMS.html aufgeführt.
Der Schlüssel url enthält den Link auf die Online Resource des Dienstes und params ist ein Objektliteral mit Parameternamen als Schlüssel und Parameterwerten als Wert. Die default VERSION eines WMS ist in ol3 1.3.0, falls Ihre Dienste diese Version nicht unterstützen, kann ein kleinerer Wert (etwa 1.1.1) über die params eingestellt werden.
layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
})
]
Übungen
Der oben verwende WMS stellt auch einen Layer namens "openstreetmap" zur Verfügung. Ändern Sie den ol.layer.Tile-Konstruktor so, dass jener Layer angefragt und angezeigt wird.
Anschließend sollte Ihr Code etwa wie folgt aussehen
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {
// hier ist die wesentliche Änderung
LAYERS: 'openstreetmap',
VERSION: '1.1.1'
}
})
})
Ändern Sie den Code dahingehend ab, dass statt vieler einzelner Kacheln nur noch ein einzelnes Bild beim WMS angefragt wird. Die folgende Seiten aus der API-Dokumentation können hilfreich sein: http://openlayers.org/en/master/apidoc/ol.layer.Image.html und http://openlayers.org/en/master/apidoc/ol.source.ImageWMS.html. Sie sollten die Adresse http://suite.opengeo.org/geoserver/wms und den Layernamen opengeo:countries verwenden.
Überprüfen Sie mittels der Developer Tools des Browsers, ob tatsächlich nur noch ein Bild angefordert wird statt der 256x256 Pixel großen Kacheln.
Eine Karte, die den Layer "openstreetmap" als "image/png" darstellt.
Nachdem wir erfolgreich mit dynamisch berechneten Bildern gearbeitet haben, wollen wir uns nun vorberechneten Kacheln zuwenden.
