OpenStreetsMap und OpenLayer

juedan

FreeBSDler
Hallo Gemeinde,

seit längerem plage ich mich schon OpenStreetMap und OpenLayer ab. Ich schaffe es einfach nicht einen GPS-Track oder Punkte mit einem Label darzustellen. Sämtliche Anleitungen, die ich per Google finden konnte, habe ich inzwischen durchprobiert. Probieren deshalb, weil die Dokumentation zu diesem Thema übel ist.

Hier mein Code-Beispiel:
Code:
<html>
<head>
 <title>Simple OSM GPX Track</title>
 <!-- bring in the OpenLayers javascript library
   (here we bring it from the remote site, but you could
   easily serve up this javascript yourself) -->
 <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
 <!-- bring in the OpenStreetMap OpenLayers layers.
   Using this hosted file will make sure we are kept up
   to date with any necessary changes -->
 <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
 <script src="gpx.js"></script>
 
 <script type="text/javascript">
  // Start position for the map (hardcoded here for simplicity,
  // but maybe you want to get this from the URL params)
  var lat=47.38857 
  var lon=10.78510
  var zoom=13
 
  var map; //complex object of type OpenLayers.Map
 
  function init() {
   map = new OpenLayers.Map ("map", {
    controls:[
     new OpenLayers.Control.Navigation(),
     new OpenLayers.Control.PanZoomBar(),
     new OpenLayers.Control.LayerSwitcher(),
     new OpenLayers.Control.Attribution()],
    numZoomLevels: 13,
    units: 'm',
    projection: new OpenLayers.Projection("EPSG:900913"),
    displayProjection: new OpenLayers.Projection("EPSG:4326")
   } );
 
   // Define the map layer
   // Here we use a predefined layer that will be kept up to date with URL changes
   layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
   map.addLayer(layerMapnik);
   layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
   map.addLayer(layerTilesAtHome);
   layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
   map.addLayer(layerCycleMap);
   layerMarkers = new OpenLayers.Layer.Markers("Markers");
   map.addLayer(layerMarkers);
 
   // Add the Layer with the GPX Track
   // GPX
   var pfad = "osm_bergtour_bichlbaechle_roterstein.gpx";
   var lgpx = new OpenLayers.Layer.GPX("RoterStein", 
    pfad, "#000000");
   lgpx.requestSuccess(pfad);
 
   map.addLayer(lgpx);
  
   var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
   map.setCenter(lonLat, zoom);
 
   var size = new OpenLayers.Size(21, 25);
   var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
   var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
   layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
  }
 </script>
 
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
 <!-- define a DIV into which the map will appear. Make it take up the whole window -->
 <div style="width:90%; height:90%" id="map"></div>
</body>
</html>

Verwendet wird die neueste Version von OpenLayers: OpenLayers 2.10 -- $Revision: 10721 $

Auszug aus dem GPS-Track:
Code:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<gpx version="1.1" creator="MagicMaps Tour Explorer"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xmlns="http://www.topografix.com/GPX/1/1">
  <trk>
    <name>roter stein</name>
    <trkseg>
      <trkpt lat="47.398769000" lon="10.787547000">
        <ele>1230.1</ele>
        <time>2007-10-14T10:09:57Z</time>
      </trkpt>
[...]
</trkseg>
  </trk>
</gpx>

Aussagekräftige Fehlermeldungen gibt es natürlich auch:
Code:
Fehler: Syntax-Fehler
Quelldatei: http://www.dankoweit.de/test/map_gpx.html
Zeile: 1, Spalte: 1
Quelltext:
osm_bergtour_bichlbaechle_roterstein.gpx

Interessant ist, wenn ich den GPS-Track über diese Seite darstellen lasse, ist alles korrekt.
Link: http://www.openrouteservice.org/index.php

Hat jemand hier aus dem Forum Erfahrung mit diesem OpenLayers-Gedöns?

Vielen Dank schon mal für die Antworten.

Viele Grüße
JueDan
 
Last edited:
Ich hab zwar keine Ahnung davon, war aber neugierig. Hab dann das hier gefunden: GPX Track Example

Ich habe das etwas angepasst, andere Position und anderes Track File, aber es funktioniert. :D

Dein Hinzufuegen des GPX Tracks scheint problematisch zu sein. Im Beispiel sieht das etwas anders aus.

Code:
// Add the Layer with the GPX Track
var lgpx = new OpenLayers.Layer.GML("Lakeside cycle ride",
                                       "around_lake.gpx", {
                                       format: OpenLayers.Format.GPX,
                                       style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
                                       projection: new OpenLayers.Projection("EPSG:4326")
                                       });
map.addLayer(lgpx);

So funktioniert es mit meinem Track jedenfalls.
 
Hallo xbit,

danke für eine Antwort.

Ich hab zwar keine Ahnung davon, war aber neugierig. Hab dann das hier gefunden: GPX Track Example

Ich habe das etwas angepasst, andere Position und anderes Track File, aber es funktioniert. :D

Dein Hinzufuegen des GPX Tracks scheint problematisch zu sein. Im Beispiel sieht das etwas anders aus.

Code:
// Add the Layer with the GPX Track
var lgpx = new OpenLayers.Layer.GML("Lakeside cycle ride",
                                       "around_lake.gpx", {
                                       format: OpenLayers.Format.GPX,
                                       style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
                                       projection: new OpenLayers.Projection("EPSG:4326")
                                       });
map.addLayer(lgpx);

So funktioniert es mit meinem Track jedenfalls.

Habe ich schon probiert geht auch nicht.
Die Beispiele kenne ich alle und ´habe sie alle erfolglos durchprobiert. Es wäre einfacher, wenn es dazu eine gute Dokumentation gäbe.

Inzwischen habe ich mir ein kleines Skript gebastelt, dass einen GPS-Track in KML umwandelt.Funktioniert prächtig:
http://www.dankoweit.de/Bergtouren/hp_bergtouren_alpenvorland_lechtaler.html
Rechts das Symbol anklicken.

Viele Grüße

Jürgen
 
Das ja seltsam. Bei mir hat es so auf anhieb funktioniert.

Soweit ich das bisher gesehen habe, geb ich dir recht, die Dokumentation ist in jedem Fall verbesserungswuerdig.

Hier nochmal der vollstaendigkeithalber der Code, der bei mir funktioniert.
Code:
 <html>
<head>
 <title>Simple OSM GPX Track</title>
 <!-- bring in the OpenLayers javascript library
   (here we bring it from the remote site, but you could
   easily serve up this javascript yourself) -->
 <script src="http://www.openlayers.org/api/OpenLayers.js">
 </script>
 <!-- bring in the OpenStreetMap OpenLayers layers.
   Using this hosted file will make sure we are kept up
   to date with any necessary changes -->
 <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js">
 </script>
 <script src="gpx.js">
 </script>

 
 <script type="text/javascript">
  // Start position for the map (hardcoded here for simplicity,
  // but maybe you want to get this from the URL params)
  var lat=53.57;
  var lon=10.03;
  var zoom=13;
 
  var map; //complex object of type OpenLayers.Map
 
  function init() {
   map = new OpenLayers.Map ("map", {
    controls:[
     new OpenLayers.Control.Navigation(),
     new OpenLayers.Control.PanZoomBar(),
     new OpenLayers.Control.LayerSwitcher(),
     new OpenLayers.Control.Attribution()],
    numZoomLevels: 13,
    units: 'm',
    projection: new OpenLayers.Projection("EPSG:900913"),
    displayProjection: new OpenLayers.Projection("EPSG:4326")
   } );
 
   // Define the map layer
   // Here we use a predefined layer that will be kept up to date with URL changes
   layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
   map.addLayer(layerMapnik);
   layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
   map.addLayer(layerTilesAtHome);
   layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
   map.addLayer(layerCycleMap);
   layerMarkers = new OpenLayers.Layer.Markers("Markers");
   map.addLayer(layerMarkers);

   // Add the Layer with the GPX Track
   // GPX
   var pfad = "track.gpx";
   var lgpx = new OpenLayers.Layer.GML("Test", pfad, {
                    format: OpenLayers.Format.GPX,
                    style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
                    projection: new OpenLayers.Projection("EPSG:4326")});
   map.addLayer(lgpx);
  
   var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
   map.setCenter(lonLat, zoom);
 
   var size = new OpenLayers.Size(21, 25);
   var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
   var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
   layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
  }
 </script>
 
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
 <!-- define a DIV into which the map will appear. Make it take up the whole window -->
 <div style="width:90%; height:90%" id="map"></div>
</body>
</html>

Auch das Ein- bzw. Ausblenden des Tracks funktioniert. Gefaellt mir ganz gut. Da werde ich mich dann auch nochmal weiter mit beschaeftigen. Danke fuer deinen Fehlerbericht, war eine gute Motivation. ;)
 
Hallo xbit,

Das ja seltsam. Bei mir hat es so auf anhieb funktioniert.
Es funktioniert einfach nicht, auch Dein Beispiel nicht.
Nun ja, ich wandle jetzt alle GPS-Tracks nach KML um. Das geht sehr gut, wie Du unter dem im vorherigen Posting angegebenen Link erkennen kannst.

Soweit ich das bisher gesehen habe, geb ich dir recht, die Dokumentation ist in jedem Fall verbesserungswuerdig.
Oh ja!
Auch das Ein- bzw. Ausblenden des Tracks funktioniert. Gefaellt mir ganz gut. Da werde ich mich dann auch nochmal weiter mit beschaeftigen. Danke fuer deinen Fehlerbericht, war eine gute Motivation. ;)

Bevor Du dir die Zähne ausbeißt noch zwei wichtige Hinweise:
Erster Hinweis: Frag Deine Krankenkasse, ob die in so einem Fall die Zahnbehandlung bezahlen.:D
Zweiter Hinweis:
Es ist auch möglich, Google-Satellitenbilder per OpenLayers zu aktivieren. Dazu wird das Google-API benötigt. Allerdings funktioniert das Verschieben des Bildausschnitts per Maus erst ab Version 3 des APIs! Dazu musst Du folgendes einbinden:
Code:
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
Weiterhin muss die Projektion angepasst werden, wie im Beispiel gezeigt:
Code:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='DE' lang='DE' dir='a4'>

<head>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src='http://www.openlayers.org/api/OpenLayers.js'></script>
<script src='http://www.openstreetmap.org/openlayers/OpenStreetMap.js'></script>
</head>
		
<body>
		
<div id='mapdiv' style='height:400px;width:600px;'></div>

<script>
var sphericalMercator = new OpenLayers.Projection('EPSG:900913');
var epsg4326 = new OpenLayers.Projection('EPSG:4326');
var zoom = 14;
var extent = new OpenLayers.Bounds( 6.96, 48.1, 13.09, 47);

extent.transform(epsg4326, sphericalMercator);

map = new OpenLayers.Map('mapdiv', {
	projection: sphericalMercator,
	displayProjection: epsg4326,
	theme: 'Test',
	controls: [
		new OpenLayers.Control.PanZoomBar(),
		/*
		new OpenLayers.Control.LayerSwitcher({
		'ascending':false,
		'title': 'Kartenauswahl'
		}),
		*/
		new OpenLayers.Control.ScaleLine(),
		new OpenLayers.Control.MouseDefaults()
	]
});

var mapnik = new OpenLayers.Layer.OSM.Mapnik('Standardkarte');
map.addLayer(mapnik);

var cyclemap = new OpenLayers.Layer.OSM.CycleMap(('Radl- und Wanderkarte'), {
	keyid: 'cyclemap',
	displayOutsideMaxExtent: true,
	wrapDateLine: true,
	layerCode: 'C'
});
map.addLayer(cyclemap);

var gsat = new OpenLayers.Layer.Google(
	'Google Satellitenbild', {type: google.maps.MapTypeId.SATELLITE, 'sphericalMercator': true, numZoomLevels: 22});
map.addLayer(gsat);

/* Verschiebe Karte an diese Position */
lonLat = new OpenLayers.LonLat(<longitude>, <latitude>).transform(epsg4326, sphericalMercator);
map.setCenter(lonLat, zoom);

map.addControl(new OpenLayers.Control.LayerSwitcher());

</script>
</body>
</html>
Beim zweiten Hinweis bin nur durch Zufall draufgekommen: probieren bis es passt:grumble:

Viele Grüße

JueDan
 
Back
Top