terrestris GmbH & Co. KG

Boundless

OpenLayers Workshop

Inhalt

Vorheriges Thema

2. Basiswissen (map & view)

Nächstes Thema

2.2. Die Bestandteile der Karte

2.1. Eine Karte erstellen

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:

2.1.1. Ein lauffähiges Beispiel

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

  1. 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
  1. Kopieren Sie obigen Code in eine neue date map.html, und speichern Sie jene auch im Arbeitsverzeichnis.
  2. Öffnen Sie die Datei im Browser: http://localhost/ol3-ws/map.html
../_images/map1.png

Die lauffähige Karte im Browser.

Nachdem wir nun eine erste funktionsfähige Karte erzeugt haben, schauen wir uns nun die Einzelbestandteile an.