decocode decocode deco    

Landkarten mit OpenLayers einbinden #

(OpenLayers API 3.12.1)

Übersicht
Kartenposition, Zoomfaktor, Kartentyp
Hybrider Kartentyp
Deutsches OSM-Design
Ortsmarkierungen hinzufügen
Orte mit Streckenzug verbinden
Orte mit Polygon verbinden
Infoboxen anzeigen lassen
Infoboxen schließen

Dies ist eine schrittweise Anleitung für das Einbinden der OpenLayers API in eine Website.

Im Gegensatz zu der proprietären API von Google Maps ist die verwendete Software von OpenLayers Freie Software (BSD-Lizenz). Allerdings sind dafür die Satellitenbilder, die bei OpenLayers verwendet werden, nicht so hochauflösend wie bei Google Maps.

Diese Programmierschnittstelle bietet eine Vielzahl von Einstellungen, von denen hier nur die wichtigsten vorgestellt werden. Weitere Informationen zur API findet man in der ausführlichen Dokumentation.

Grundsätzliches #

Um eine Landkarte mit OpenLayers auf einer Website zu platzieren, muss der Quelltext dieser Seite bestimmte Elemente beinhalten. Diese sind im folgenden Beispiel dargestellt:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>Landkarte von OpenStreetMap</title>
    <meta charset='UTF-8'>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
    <link rel='stylesheet' href='http://openlayers.org/en/v3.12.1/css/ol.css' type='text/css'>
    <style type='text/css'>
      #mymap { margin:auto auto 20px; width:700px; height:500px; border:2px solid #777; }
    </style>
    <script type='text/javascript' src='http://openlayers.org/en/v3.12.1/build/ol.js'></script>
    <script type='text/javascript'>
      function init_map() {
        
        var map = new ol.Map({
          target: 'mymap',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.MapQuest({layer: 'sat'})
            })
          ],
          view: new ol.View({
            center: ol.proj.fromLonLat([6.958122, 50.941309]),
            zoom: 4
          })
        });
       
      }
    </script>
  </head>
  <body>
    <div id='mymap'><noscript><p>Zur Ansicht der Karte muss JavaScript aktiviert sein!</p></noscript></div>
    <script type='text/javascript'>init_map();</script>
  </body>
</html>

Über das <script>-Element in Zeile 11 wird die API geladen. Die JavaScript-Funktion init_map() enthält die konkreten Daten für die Konfiguration der Karte, die in den <div>-Container mit der ID mymap (Zeile 32) geladen wird. Die ID kann frei gewählt werden, doch muss sie mit dem Wert in dem Funktionsaufruf in Zeile 16 übereinstimmen.

Im Folgenden wird eine Reihe von Optionen und Funktionen beschrieben, die hier gemacht werden können, um die Karte den eigenen Bedürfnissen anzupassen.

API Dokumentation: ol.Map, ol.layer, ol.source, ol.View, ol.proj
Beispiele: Simple Map, MapQuest

Kartenposition, Zoomfaktor, Kartentyp #

Die Funktion init_map() im Beispiel oben enthält zunächst die drei folgenden Parameter:

• die Koordinaten für den Mittelpunkt der Karte (6.958122 und 50.941309)
• den Zoomfaktor (4)
• den Kartentyp (sat)

Dies sind die minimalen Angaben, die nötig sind, um eine Karte darstellen zu können. Die so angezeigte Karte kann bereits mit der Maus bewegt und durch Doppelklick gezoomt werden (doppelter Linksklick = Einzoomen; Shift ⇧ + doppelter Linksklick = Auszoomen).

Koordinaten

Der erste Wert der Koordinaten gibt die geographische Länge und der zweite die geographische Breite in Grad an, wobei ein positiver Wert für Osten bzw. Norden und ein negativer Wert für Westen bzw. Süden steht. Wenn man die Position eines Ortes nicht kennt, kann man z. B. auf OpenStreetMap diesen Ort suchen und dann auf den Link Permalink unten rechts klicken. Die URL enthält dann die Koordinaten des Ortes (lat = Breite; lon = Länge). Es empfiehlt sich, dabei möglichst dicht heran zu zoomen, um eine sehr genaue Position zu erhalten.

Beispiel:
http://www.openstreetmap.de/karte.html?zoom=8&lat=52.5207846&lon=13.4093412,18&layers=B000TT

Die URL enthält die Werte 52.5207846 und 13.4093412 als Koordinaten für Berlin, Fernsehturm.

Liegen die Koordinaten eines Ortes in der Form Grad/Minuten/Sekunden vor, muss man diese Werte in eine Dezimalzahl umrechnen:

x = grad + min/60 + sek/3600

Zoomfaktor

Die Spanne für das Zoomen bewegt sich zwischen 0 (weiteste Entfernung) bis 18 (sehr kurze Entfernung), abhängig davon, ob Bilder in so hoher Auflösung verfügbar sind.

Kartentyp

Es existieren gegenwärtig zwei Kartentypen:

osm (Straßenkarte von OpenStreetMap)
sat (Luftaufnahmen)

Der Kartentyp hyb stellt eine weitere Ebene mit Ortsnamen, Straßen- und Grenzverläufen zur Verfügung, die über die Satellitenkarte gelegt werden kann:

Hybrider Kartentyp #

Um die Karte mit einer Ebene vom Typ hyb zu überlagern, muss der Code lediglich folgendermaßen ergänzt werden:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
      function init_map() {
        
        var map = new ol.Map({
          target: 'mymap',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.MapQuest({layer: 'sat'})
            }),
            new ol.layer.Tile({
              source: new ol.source.MapQuest({layer: 'hyb'})
            })
          ],
          view: new ol.View({
            center: ol.proj.fromLonLat([6.958122, 50.941309]),
            zoom: 4
          })
        });
       
      }

Deutsches OSM-Design #

Um einen individuellen Kachelserver (tile server) als Quelle für die Kartenkacheln festzulegen, muss der Code folgendermaßen geändert werden (hier für den Stil der deutschen OpenStreetMap):

Beispiel: Localized OpenStreetMap

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
      function init_map() {
        
        var map = new ol.Map({
          target: 'mymap',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.XYZ({
                url: 'http://{a-d}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png'
              })
            })
          ],
          view: new ol.View({
            center: ol.proj.fromLonLat([6.958122, 50.941309]),
            zoom: 4
          })
        });
       
      }

Ortsmarkierungen hinzufügen #

Um einen Ort durch einen Marker zu kennzeichnen, wird die Karte durch die Vektorebene markerLayer ergänzt (Zeile 39), die ab Zeile 29 definiert wurde. Diese Ebene besitzt zwei Eigenschaften: source (enthält die Positionen der Marker) und style (enthält die Eigenschaften des Icons der Marker). Die Positionen der Marker werden in der Schleife ab Zeile 11 aus dem Array places ausgelesen, das ab Zeile 3 definiert wird und den Längengrad, den Breitengrad sowie den Namen der Orte enthält.

API Dokumentation: ol.Feature, ol.geom, ol.style
Beispiel: Icon Symbolizer

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
      function init_map() {
        
        var places = [
          [13.409436, 52.520791, 'Berlin'],
          [-0.12769, 51.50736, 'London'],
          [2.34684, 48.8551, 'Paris']
        ];
        
        var markerSource = new ol.source.Vector({});
        
        for (var i = 0; i < places.length; i++){
          var markerFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([places[i][0], places[i][1]], 'EPSG:4326', 'EPSG:3857')),
            name: places[i][2]
          });
          markerSource.addFeature(markerFeature);
        }
        
        var markerStyle = new ol.style.Style({
          image: new ol.style.Icon(({
            anchor: [0.5, 41],
            anchorXUnits: 'fraction',  // sets anchor to 50% of icon width on x-axis
            anchorYUnits: 'pixels',  // sets anchor to 41 pixels from top edge of icon on y-axis
            opacity: 1,
            src: 'http://www.openstreetmap.org/assets/images/marker-icon-915e83a6fc798c599e5c9e3f759d6bc065d65151019acd0410d1f4731bcaaf72.png'
          }))
        });
        
        var markerLayer = new ol.layer.Vector({
          source: markerSource,
          style: markerStyle
        });
        
        var map = new ol.Map({
          target: 'mymap',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.MapQuest({layer: 'sat'}),
            }), markerLayer
          ],
          view: new ol.View({
            center: ol.proj.fromLonLat([6.958122, 50.941309]),
            zoom: 4
          })
        });
        
      }

Orte mit Streckenzug verbinden #

Nun kann man diese Orte mit einem Streckenzug (MultiLineString) verbinden. Streckenzüge sind eigentlich von Orten unabhängige Objekte, können theoretisch also auch für sich gezeichnet werden, ohne konkrete Orte miteinander zu verbinden. Es müssen dazu die Koordinaten von mindestens zwei Orten angegeben werden.

Im Beispiel wird der Karte dazu eine weitere Vektorebene linesLayer hinzugefügt (Zeile 93), die ab Zeile 83 definiert wurde. Diese Ebene besitzt wieder zwei Eigenschaften: source (enthält die Positionen der Eckpunkte des Streckenzugs) und style (enthält die Eigenschaften der Linien des Streckenzugs). Zusätzlich zu den Eigenschaften der Linien enthält die Variable linesStyle ab Zeile 69 Eigenschaften für die Eckpunkte (hier Scheiben mit der Farbe orange und dem Radius 3). Diese Angaben sind nicht zwingend notwendig und können auch weggelassen werden.

API Dokumentation: ol.format, GeoJSON
Beispiel: Custom Polygon Styles

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
      function init_map() {
        
        var places = [
          [13.409436, 52.520791, 'Berlin'],
          [-0.12769, 51.50736, 'London'],
          [2.34684, 48.8551, 'Paris']
        ];
        
        var markerSource = new ol.source.Vector({});
        var linesData = [];
        
        for (var i = 0; i < places.length; i++){
          var markerFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([places[i][0], places[i][1]], 'EPSG:4326', 'EPSG:3857')),
            name: places[i][2]
          });
          markerSource.addFeature(markerFeature);
          linesData.push(ol.proj.fromLonLat([places[i][0], places[i][1]]));
        }
        
        var markerStyle = new ol.style.Style({
          image: new ol.style.Icon(({
            anchor: [0.5, 41],
            anchorXUnits: 'fraction',  // sets anchor to 50% of icon width on x-axis
            anchorYUnits: 'pixels',  // sets anchor to 41 pixels from top edge of icon on y-axis
            opacity: 1,
            src: 'http://www.openstreetmap.org/assets/images/marker-icon-915e83a6fc798c599e5c9e3f759d6bc065d65151019acd0410d1f4731bcaaf72.png'
          }))
        });
        
        var markerLayer = new ol.layer.Vector({
          source: markerSource,
          style: markerStyle
        });
        
        var geojsonObject = {
          'type': 'FeatureCollection',
          'crs': {
            'type': 'name',
            'properties': {
              'name': 'EPSG:3857'
            }
          },
          'features': [
            {
              'type': 'Feature',
              'geometry': {
                'type': 'MultiLineString',
                'coordinates': [linesData]
              }
            }
          ]
        };

        var linesSource = new ol.source.Vector({
          features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
        });
        
        var linesStyle = [
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'hsl(240,100%,83%)',
              width: 3
            })
          }),
          new ol.style.Style({
            image: new ol.style.Circle({
              radius: 3,
              fill: new ol.style.Fill({
                color: 'orange'
              })
            }),
            geometry: function(feature) {
              var coordinates = feature.getGeometry().getCoordinates()[0];
              return new ol.geom.MultiPoint(coordinates);
            }
          })
        ];
        
        var linesLayer = new ol.layer.Vector({
          source: linesSource,
          style: linesStyle
        });
        
        var map = new ol.Map({
          target: 'mymap',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.MapQuest({layer: 'sat'}),
            }), linesLayer, markerLayer
          ],
          view: new ol.View({
            center: ol.proj.fromLonLat([6.958122, 50.941309]),
            zoom: 4
          })
        });
        
      }

Orte mit Polygon verbinden #

Alternativ kann man die Orte auch mit einem Polygon verbinden. Polygone werden automatisch geschlossen.

Dazu wird im Beispiel in Zeile 48 der Typ des GeoJSON-Objekts statt MultiLineString mit Polygon angegeben. Außerdem wird ab Zeile 64 eine Füllfarbe für das Polygon angegeben (optional).

API Dokumentation: ol.format, GeoJSON
Beispiel: Custom Polygon Styles

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
      function init_map() {
        
        var places = [
          [13.409436, 52.520791, 'Berlin'],
          [-0.12769, 51.50736, 'London'],
          [2.34684, 48.8551, 'Paris']
        ];
        
        var markerSource = new ol.source.Vector({});
        var linesData = [];
        
        for (var i = 0; i < places.length; i++){
          var markerFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([places[i][0], places[i][1]], 'EPSG:4326', 'EPSG:3857')),
            name: places[i][2]
          });
          markerSource.addFeature(markerFeature);
          linesData.push(ol.proj.fromLonLat([places[i][0], places[i][1]]));
        }
        
        var markerStyle = new ol.style.Style({
          image: new ol.style.Icon(({
            anchor: [0.5, 41],
            anchorXUnits: 'fraction',  // sets anchor to 50% of icon width on x-axis
            anchorYUnits: 'pixels',  // sets anchor to 41 pixels from top edge of icon on y-axis
            opacity: 1,
            src: 'http://www.openstreetmap.org/assets/images/marker-icon-915e83a6fc798c599e5c9e3f759d6bc065d65151019acd0410d1f4731bcaaf72.png'
          }))
        });
        
        var markerLayer = new ol.layer.Vector({
          source: markerSource,
          style: markerStyle
        });
        
        var geojsonObject = {
          'type': 'FeatureCollection',
          'crs': {
            'type': 'name',
            'properties': {
              'name': 'EPSG:3857'
            }
          },
          'features': [
            {
              'type': 'Feature',
              'geometry': {
                'type': 'Polygon',
                'coordinates': [linesData]
              }
            }
          ]
        };
        
        var linesSource = new ol.source.Vector({
          features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
        });
        
        var linesStyle = [
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'hsl(240,100%,83%)',
              width: 3
            }),
            fill: new ol.style.Fill({
              color: 'hsla(240,100%,83%,.3)'
            })
          }),
          new ol.style.Style({
            image: new ol.style.Circle({
              radius: 3,
              fill: new ol.style.Fill({
                color: 'orange'
              })
            }),
            geometry: function(feature) {
              var coordinates = feature.getGeometry().getCoordinates()[0];
              return new ol.geom.MultiPoint(coordinates);
            }
          })
        ];
        
        var linesLayer = new ol.layer.Vector({
          source: linesSource,
          style: linesStyle
        });
        
        var map = new ol.Map({
          target: 'mymap',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.MapQuest({layer: 'sat'}),
            }), linesLayer, markerLayer
          ],
          view: new ol.View({
            center: ol.proj.fromLonLat([6.958122, 50.941309]),
            zoom: 4
          })
        });
        
      }
Kommentare zu dieser Seite

Diese Seite wurde noch nicht kommentiert.

Bitte verwende keine HTML-Tags, da der Eintrag sonst als Spam gefiltert wird!

(freiwillige Angabe)

Sicherheitsabfrage: Welche Zeichenfolge besteht aus Zahlen, 619087 oder VTAIJZ ?