Eine Karte besteht in ol3 aus einer Sammlung von Themen (layers) und verschiedenen anderen Elementen, die Benutzerinteraktionen ermöglichen und/oder verarbeiten (interactions und controls).
Um eine Karte zu erzeugen benötigen wir drei Bestandteile:
Schauen wir uns zunächst ein vollständig lauffähiges Beispiel einer ol3-basierten Karte an:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
<title>OpenLayers 3 example</title>
<script src="ol3/ol.js" type="text/javascript"></script>
</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
Laden Sie http://workshops.terrestris.de/ol3/download/resources.zip herunter und entpacken Sie die Datei in das Arbeitsverzeichnis. Anschließend sollten Sie im Verzeichnis ol3-ws/ zwei neue Verzeichnisse finden: data/ & ol3/.
Für Teilnehmer der FOSSGIS 2015 (vgl. Vorarbeiten):
cd /var/www/html/ol3-ws
wget "http://workshops.terrestris.de/ol3/download/resources.zip"
unzip resources.zip
ls -lah
drwxr-xr-x 4 user root 120 Mär 9 06:42 ./
drwxr-xr-x 1 root root 60 Mär 9 06:40 ../
drwxr-xr-x 3 user user 60 Mär 3 11:50 data/
-rw-rw-r-- 1 user user 19 Mär 9 06:42 index.html
drwxr-xr-x 2 user user 100 Mär 3 11:50 ol3/
-rw-rw-r-- 1 user user 780K Mär 5 14:25 resources.zip
Die lauffähige Karte im Browser.
Nachdem wir nun eine erste funktionsfähige Karte erzeugt haben, schauen wir uns nun die Einzelbestandteile an.
