Karte erstellen

In OpenLayers ist eine Karte eine Sammlung von Ebenen, Interaktionen und Controls. Eine Karte besteht immer aus folgenden drei Elementen: markup, styles, ol-library, und initialization code.

Das folgende Beispiel zeigt die Anzeige einer Karte mit ol.

Beispiel

Der Code im Detail

JS – Library einbinden

Die OpenLayer JavaScript Library wird im head Bereich des HTML Dokumentes eingefügt.

<script src="ol3/ol.js"></script>

HTML – Map Markup

Damit die Karte auf der Webseite angezeigt werden kann, wird ein div Tag in der HTML Seite platziert . Dieses Tag wird zur identifizierung mit dem id Attribut map versehen und die ol API platziert in der Folge die Karte genau in dieses div Element.

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

CSS – Karten Style

OpenLayer hat ein standard Stylesheet. Dieses kann explizit in die HTML Seite eingebunden werden:

<link rel="stylesheet" href="ol3/ol.css" type="text/css">

Damit die Grösse der Karte festgelegt ist, muss mindestens folgender Style für das map div Element zustätzlich festgelegt werden:

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

Die Style-Definition wird in diesem Fall dem Element mit der id map die Höhe und Breite setzen.

Karten Initialisierung

Damit die Karte angezeigt wird, muss mit JavaScript die Initalisierung erfolgen. Ein Script Block am Ende des HTML Dokumentes erledigt diese Arbeit.

<script>
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        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>

Bemerkungen:
Die Reihenfolge der beschriebenen Schritte ist absolut wichtig. Bevor das oben notierte Script ausgeführt werden kann, muss zuerst die OpenLayer Library ol.js geladen sein. Dies wird erreicht, indem die Referenz im head Bereich des HTML Dokumentes eingefügt wird.
Das gleiche gilt auch für den div Container. Auch dieser muss bereit sein, bevor das script der Initialisierung durchläuft.

Die Konfiguration ol.Map näher betrachtet.

Viewport:

target : 'map'

Der Karte wird so mitgeteilt, welches der viewport ist. Das Element im HTML Code wird über die ID map referenziert.

Layers:

layers: [
  new ol.layer.Tile({
    source: new ol.source.TileWMS({
      url: 'http://maps.opengeo.org/geowebcache/service/wms',
      params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
    })
  })
],

Auf die genauen Details der Layer-Konfiguration wird an späterer Stelle noch eingegangen. Es ist nur wichtig zu verstehen, dass die Karten-View aus einer Collection von Layers besteht. Um mindestens die Karte angezeigt zu bekommen, muss ein Layer hinzugefügt werden.

View:

view: new ol.View({
   projection: 'EPSG:4326',
   center: [0, 0],
   zoom: 0,
   maxResolution: 0.703125
})

Im letzten Schritt der Karten-Konfiguration wird die View definiert. Es wird eine projection, ein center und ein zoom level gesetzt. Über die maxResolution wird sichergestellt, dass nur mögliche Auflösungen vom GeoWebCache angefordert werden.