You are not logged in.

Announcement

*** NOTICE: forum.openstreetmap.org is being retired. Please request a category for your community in the new ones as soon as possible using this process, which will allow you to propose your community moderators.
Please create new topics on the new site at community.openstreetmap.org. We expect the migration of data will take a few weeks, you can follow its progress here.***

Pages: 1

#1 2012-08-19 19:02:12

mkolb
Member
Registered: 2012-08-19
Posts: 4

GPX-Tracks werden nicht mehr dargestellt

Hallo,
vor einiger Zeit habe ich eine nette Routine gefunden, um GPX-Tracks per OSM darzustellen: http://wiki.openstreetmap.org/wiki/DE:O … ck_example
Leider funktionierte es dann nicht, weil der Osmarender nicht mehr unterstützt wurde. Dazu fand ich damals auch was: http://forum.openstreetmap.org/viewtopic.php?id=15892

Jetzt geht es wieder nicht, kann aber nicht feststellen, was falsch läuft.
Habe es immerhin geschafft, daß ich eine Karte sehe, aber der Track fehlt.
Das ist mein Code:

function init() {
        map = new OpenLayers.Map ("map", {
            controls:[
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.MousePosition(),
                new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.Attribution()],
            maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                        maxResolution: 156543.0399,
            numZoomLevels: 19,
            units: 'm',
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
        } );
        map = new OpenLayers.Map("demoMap");

        //mapnik
        //layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
        layerMapnik = new OpenLayers.Layer.OSM("Mapnik");
        map.addLayer(layerMapnik);
        map.zoomToMaxExtent();

        //osmarender (wird nicht mehr unterstützt: http://forum.openstreetmap.org/viewtopic.php?id=15892)
        //layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
        //map.addLayer(layerTilesAtHome);

        //cycleMap
        //layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
        layerCycleMap = new OpenLayers.Layer.OSM("OSM CycleMap");
        map.addLayer(layerCycleMap);

        //Marker        
        var markers = new OpenLayers.Layer.Markers("Marker");
        map.addLayer(markers);

So sieht derzeit meine Seite aus:
http://www.adfc-gps.de/gps_select.php?ID=65
Kann mir jemand Tipps geben, was ich falsch mache ?

Tschau
Martin

Offline

#2 2012-08-19 22:35:58

wambacher
Member
From: Schlangenbad/Wambach, Germany
Registered: 2009-12-16
Posts: 16,769
Website

Re: GPX-Tracks werden nicht mehr dargestellt

mkolb wrote:

Kann mir jemand Tipps geben, was ich falsch mache ?

Hi Martin,

firefox ist garnicht glücklich:
w95cf2dy8pc.png
Die zweite Meldung  in Zeile 194 ist das Problem. Da solltest du nachhaken.

Gruss
walter

Osm Software Watchlist  Osm Emergency Map
Osm Healthcare Map

Offline

#3 2012-08-19 23:14:37

maxbe
Member
Registered: 2010-01-19
Posts: 3,255
Website

Re: GPX-Tracks werden nicht mehr dargestellt

Hi Martin und willkommen im Forum,

ich glaube, der OpenLayers.Layer.GPX wurde abgeschafft (bei OL 2.12? weiss nicht mehr genau und es ist spät..)

Ich musste jedenfalls bei mir einiges umschreiben und hätte hier ein funktionierendes Stück Code rumliegen, mit dem ich bei mir neuerdings die GPX-Tracks ausgebe (nur die Tracks, keine Ahnung, was der z.B. mit Waypoints macht).

   var gpxurl="hier_den_Pfad_zum_GPX-File_einfuegen";
   var farbe="#ff0000";
   var strichbreite=3;
   gpxlayer=new OpenLayers.Layer.Vector("GPX-Track",
                 {protocol: new OpenLayers.Protocol.HTTP({   
                  url:gpxurl,
                  format: new OpenLayers.Format.GPX }),
                  styleMap: new OpenLayers.StyleMap({strokeColor: farbe, strokeWidth: strichbreite, strokeDashstyle: "solid", strokeOpacity: 1.0}),
                  strategies: [new OpenLayers.Strategy.Fixed()],
                  visibility: false,                        
                  projection: new OpenLayers.Projection("EPSG:4326"),
                  displayInLayerSwitcher: false
                 });  
   map.addLayer(gpxlayer);

vielleicht hilft das, wenn Du es ungefähr in der Zeile 195 (bei "var lgpx = new OpenLayers.Layer.GPX...") einsetzt.

Grüße, Max

Edit: Nein, "OpenLayers.Layer.GPX" wurde nie abgeschafft. Das hab ich mit "...GML" verwechselt. Das GPX wurde bei den OSM-Beispielen immer in einer extra GPX.js als Klasse definiert. Die ist bei Dir aber auskommentiert (Zeile 132).

Ich würde die GPX.js also wieder mit reinnehmen. Alternativ das Stück Code da oben verwenden...

Last edited by maxbe (2012-08-20 07:53:49)

Offline

#4 2012-08-26 20:00:30

mkolb
Member
Registered: 2012-08-19
Posts: 4

Re: GPX-Tracks werden nicht mehr dargestellt

Hallo Maxbe,
Danke für den Code.
Haste mal einen kompletten Code ? Ich finde immer viele Codefetzen, aber das passt alles nicht so recht zusammen.

Tschau
Martin

Offline

#5 2012-08-26 21:46:16

maxbe
Member
Registered: 2010-01-19
Posts: 3,255
Website

Re: GPX-Tracks werden nicht mehr dargestellt

mkolb wrote:

Haste mal einen kompletten Code ?

Da wäre ein Beispiel zum ansehen. Interessant für Dich sind die Zeilen 13 bis 26.

Grüße, Max

Edit: Ich hab das Beispiel noch mal komprimiert, da war so viel Zierde ums wesentliche rum...

Last edited by maxbe (2012-08-27 08:26:07)

Offline

#6 2012-08-27 11:22:37

mkolb
Member
Registered: 2012-08-19
Posts: 4

Re: GPX-Tracks werden nicht mehr dargestellt

super, schaue ich mir näher an. Merci.
Tschau
Martin

Offline

#7 2012-08-31 16:04:45

MOLE
Member
Registered: 2012-08-31
Posts: 3

Re: GPX-Tracks werden nicht mehr dargestellt

Hallo zusammen,
Ich bin neu hier im Forum und habe das gleiche Problem. Einstmals hatte mein GPX Plotter funktionert, tut es nun aber nicht mehr. Ich habe den Plotter schon einige Zeit nicht mehr verwendet, deshalb fällt mir das Problem erst jetzt auf. Aber ich habe mitbekommen, dass OpenStreetMap da einige Sachen geändert hatte.
Mein Code ist angelehnt an das Muster von http://wiki.openstreetmap.org/wiki/DE:O … ck_example
Der Code ist untenstehend.

Im Gegensatz zu dem Muster von mexbe habe ich die Daten lokal auf meinem PC, bzw möchte sich nicht immer ins Internet hochladen müssen.
Nun suche ich nach einer Möglichkeit wieder mehrere Tracks auf OpenStreetMap zu plotten.
Kann jemand den Fehler finden, bzw. den Part der aktualisiert werden muss, damit das Plotten lokaler GPX Daten wieder geht?
Ich mache auch gerne ein Rückschritt mit lokaler Kopie und älterem Openlayers Stand mit (Bitte mit grober Anleitung wink )

Für eure Hilfe wäre ich sehr dankbar.

PS: Benötige ich den utils.js eigentlich noch?

Mein html File

<html>
<head>
<title>GPS Vergleich</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="de" />
<meta name="generator" content="Easymap" />

<link rel="stylesheet" href="map.css" />

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script src="http://www.openlayers.org/api/Ajax.js"></script>
<script src="util.js"></script>
<script src="Openlayers\GPX.js"></script>
 
<style type="text/css">
 div.olControlPanel {
    top: 0px;
    left: 1257px;
    position: absolute;
}
.olControlPanel div {
    display: block;
    width:  20px;
    height: 8px;
    border: thin solid black;
    margin-top: 10px;
    background-color: white
}
.MyButtonItemInactive {
    background-image: url("img/quit.png");
}
</style>
 
<script type="text/javascript">
if (top != self)
  top.location = self.location;

  
var map;
var lgpx;

// Position und Zoomstufe der Karte
lon = 8.5305;
lat = 50.1503;
zoom = 17;

function drawmap() {
    OpenLayers.Lang.setCode('de');
    
    map = new OpenLayers.Map('map', {
        controls: [
		new OpenLayers.Control.Navigation(),	
		new OpenLayers.Control.Attribution(),
		new OpenLayers.Control.LayerSwitcher(),
		new OpenLayers.Control.PanZoomBar()
		//new OpenLayers.Control.ScaleLine()
		],
        maxExtent:
            new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34, 20037508.34),
			numZoomLevels: 19,
			maxResolution: 156543,
			units: 'meters',
		
		projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326")

    });
	
// Cursor Position darstellen
	map.addControl(new OpenLayers.Control.MousePosition());

// Layer hinzufügen
	layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
	map.addLayer(layerMapnik)
	//layerOsmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
	//map.addLayer(layerOsmarender);


// GPS Trace einfügen
	var gps1 = new OpenLayers.Layer.GPX("gps1", "gps1.gpx", "#FF0000");
	map.addLayer(gps1);	
	var gps2 = new OpenLayers.Layer.GPX("gps2", "gps2.gpx", "#0000FF");
	map.addLayer(gps2);	
	var gps3 = new OpenLayers.Layer.GPX("gps3", "gps3.gpx", "#00FF00");
	map.addLayer(gps3);	

// Layer Zentrieren	
	var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
	map.setCenter (lonLat, zoom);
}

function schliessen()
{
	javascript:self.close();
}

function update()
{

}

    </script>

</head>
<body onload="drawmap();">
	<div id="map"></div>	
	  
</body>
</html>

GPS.js

/* Copyright (c) 2006 MetaCarta, Inc., published under the BSD license.
 * See http://svn.openlayers.org/trunk/openlayers/release-license.txt 
 * for the full text of the license. */

/**
 * @class
 * 
 * @requires OpenLayers/Layer/Markers.js
 * @requires OpenLayers/Ajax.js
 */
OpenLayers.Layer.GPX = OpenLayers.Class.create();
OpenLayers.Layer.GPX.prototype = 
  OpenLayers.Class.inherit( OpenLayers.Layer.Markers, OpenLayers.Layer.Vector, {

    /** store url of text file
    * @type str */
    url:null,
    icolor:null,
    /** @type Array(OpenLayers.Feature) */
    features: null,

    /** @type OpenLayers.Feature */
    selectedFeature: null,

    /**
    * @constructor
    *
    * @param {String} name
    * @param {String} location
    */
    initialize: function(name, url, icolor, options) {
	var newArguments = new Array();
	newArguments.push(name, options);
	OpenLayers.Layer.Vector.prototype.initialize.apply(this, newArguments);
        OpenLayers.Layer.Markers.prototype.initialize.apply(this, [name]);
        this.url = url;
        this.icolor = icolor;
        this.features = new Array();
	var results = OpenLayers.loadURL(this.url, null, this, this.requestSuccess, this.requestFailure);
    },

    /**
     * 
     */

    destroy: function() {
        this.clearFeatures();
        this.features = null;
        OpenLayers.Layer.Markers.prototype.destroy.apply(this, arguments);
    },
        
    /**
     * @param {XMLHttpRequest} ajaxRequest
     */
    requestSuccess:function(request) {
	
        var doc = request.responseXML;
        if (!doc || request.fileType!="XML") {
            doc = OpenLayers.parseXMLString(request.responseText);
        }
        if (typeof doc == "string") {
            doc = OpenLayers.parseXMLString(doc);
        }
	
	/* search and display track */
  var trk = doc.getElementsByTagName("trk");	
	var featureTRK = [];
	var Start = trk.length-10;
	for (var i = 0; i< trk.length; i++) {
      var color=this.icolor;  // Random Color
		for (var j = 0; j < trk[i].childNodes.length; j++) {
                        switch (trk[i].childNodes[j].nodeName)
                        {
                                case 'topografix:color':
                                        color = '#' + OpenLayers.Util.getXmlNodeValue(trk[i].childNodes[j]);
                                        break;
                                case 'trkseg':
					if (color == '')
						color=this.randomColor();
                                        featureTRK.push(this.addLineGPX(trk[i].childNodes[j], color));
                                        break;
                                case '#text':
                                        break;
                                case 'name':
//FIXME: label the way
                                        break;
                                default:
//                                      alert('unknown ' + trk[i].childNodes[j].nodeName);
                                        break;
                        }
                }
        }
	this.addFeatures(featureTRK);
	/* search and display route */
  var rte = doc.getElementsByTagName("rte");		
	var featureRTE = [];
	for (var i = 0; i< rte.length; i++) {
		var color = this.randomColor();
		var style_green = {
			strokeColor: color,
			strokeOpacity: 1,
			strokeWidth: 2,
			pointRadius: 2,
			pointerEvents: "visiblePainted"
		};
		var pointList = [];
		for (var j = 0; j < rte[i].childNodes.length; j++) {
			switch (rte[i].childNodes[j].nodeName)
			{
				case 'rtept':
					var feature = this.parseFeature(rte[i].childNodes[j]);
					if (feature) {
						pointList.push(feature);
					}
					break;
				default:
					break;
			}
                }
		featureRTE.push(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(pointList),null,style_green));
        };
	this.addFeatures(featureRTE);

	/* search and display waypoint */
  var wpt = doc.getElementsByTagName("wpt");		
        var featuresWPT = [];
        for (var i = 0; i< wpt.length; i++) 
		{
			var data = {}; 
			var point = this.setToMercator(wpt[i].getAttribute('lon'),wpt[i].getAttribute('lat'));
			var location =  new OpenLayers.LonLat(point[0], point[1]);
			/* Provide defaults for title and description */
			var title = "Untitled";
			try 
			{
				title = OpenLayers.Util.getNodes(wpt[i], 'name')[0].firstChild.nodeValue;
			}
			catch (e) { title="Untitled"; }

			/* GPX descriptions */
			var description = "No description.";
			try 
			{
				description = OpenLayers.Util.getNodes(wpt[i],'desc')[0].firstChild.nodeValue;
			}
			catch (e) 
			{
				var description = "No description.";
			}
			data.icon = OpenLayers.Marker.defaultIcon();
			if ((title != null) && (description != null)) 
			{
				contentHTML = '<p><strong>' + title + '</strong><br />' + description + '</p>';
				data['popupContentHTML'] = contentHTML;
			}
			var featureWPT = new OpenLayers.Feature(this, location, data);
            featuresWPT.push(featureWPT);
            var marker = featureWPT.createMarker();
			marker.events.register('click', featureWPT, this.markerClick);
            this.addMarker(marker);
        }
    },
    /**
     * @param {Event} evt
     */
    randomColor: function() {
	var hex=new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
	var color = '#';
	for (i=0;i<6;i++){
		color += hex[Math.floor(Math.random()*hex.length)];
	}
	return color;
    },
	
    markerClick: function(evt) {
        sameMarkerClicked = (this == this.layer.selectedFeature);
        this.layer.selectedFeature = (!sameMarkerClicked) ? this : null;
        for(var i=0; i < this.layer.map.popups.length; i++) {
            this.layer.map.removePopup(this.layer.map.popups[i]);
        }
        if (!sameMarkerClicked) {
            var popup = this.createPopup(true);
            OpenLayers.Event.observe(popup.div, "click",
            function() { 
              for(var i=0; i < this.layer.map.popups.length; i++) { 
                this.layer.map.removePopup(this.layer.map.popups[i]); 
              } 
            }.bindAsEventListener(this));
            this.layer.map.addPopup(popup); 
        }
        OpenLayers.Event.stop(evt);
    },
	
    addLineGPX: function(xmlNode, color) {
        var style_green = {
                strokeColor: color,
                strokeOpacity: 0.6,
                strokeWidth: 2,
                pointRadius: 2,
                pointerEvents: "visiblePainted"
        };
        var pointList = [];
		//Start= xmlNode.childNodes.length -200;
		Start=0;
        for (var i = Start; i < xmlNode.childNodes.length; i++) {
                if (xmlNode.childNodes[i].nodeName == "trkpt")
                {
                        var feature = this.parseFeature(xmlNode.childNodes[i]);
                        if (feature) {
                                pointList.push(feature);
                        }
                }
        };
/*	layerMarkers = new OpenLayers.Layer.Markers("Actual Position",{ projection: new OpenLayers.Projection("EPSG:4326"),visibility: true, displayInLayerSwitcher: true });
	lon_Marker = xmlNode.childNodes[i-1].getAttribute('lon'); // 8.5948
	lat_Marker = xmlNode.childNodes[i-1].getAttribute('lat'); //50.134
	var act_pos = new OpenLayers.LonLat(lon_Marker, lat_Marker).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
	var size = new OpenLayers.Size(30,25);
	var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
	var icon = new OpenLayers.Icon('img/car.png',size,offset);
	layerMarkers.addMarker(new OpenLayers.Marker(act_pos,icon));
	map.addLayer(layerMarkers);
*/	
	
	var gpx_line = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(pointList),null,style_green);
	
	return gpx_line;
        //return new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(pointList),null,style_green);
    },

     /**
      * This function is the core of the GPX parsing code in OpenLayers.
      * It creates the geometries that are then attached to the returned
      * feature, and calls parseAttributes() to get attribute data out.
      * @param DOMElement xmlNode
      */
     parseFeature: function(xmlNode) {
        if (xmlNode.getAttribute('lat') && xmlNode.getAttribute('lon')) {
		var point = this.setToMercator(xmlNode.getAttribute('lon'),xmlNode.getAttribute('lat'));
		return new OpenLayers.Geometry.Point(point[0], point[1]);
        }
        return false;
    },
	
    setToMercator: function(lon, lat) {
    	x = parseFloat(lon);
	y = parseFloat(lat);
	var PI = 3.14159265358979323846;
	x = x * 20037508.34 / 180;
	y = Math.log (Math.tan ((90 + y) * PI / 360)) / (PI / 180);
	y = y * 20037508.34 / 180;
	return new Array(x,y);
    },
    /**
     * 
     */
    clearFeatures: function() {
        if (this.features != null) {
            while(this.features.length > 0) {
                var feature = this.features[0];
                OpenLayers.Util.removeItem(this.features, feature);
                feature.destroy();
            }
        }        
    },
	
    requestFailure: function(request) {
    },
	
    moveTo:function(bounds, zoomChanged, dragging) { 
	OpenLayers.Layer.Vector.prototype.moveTo.apply(this, arguments);
        if (!dragging) {
            this.div.style.left = - parseInt(this.map.layerContainerDiv.style.left) + "px";
            this.div.style.top = - parseInt(this.map.layerContainerDiv.style.top) + "px";
            var extent = this.map.getExtent();
            this.renderer.setExtent(extent);
	    for(i=0; i < this.markers.length; i++) {
		marker = this.markers[i];
		lonlat = this.map.getLayerPxFromLonLat(marker.lonlat);
                if (marker.icon.calculateOffset) {
                    marker.icon.offset = marker.icon.calculateOffset(marker.icon.size);
                }
                var offsetPx = lonlat.offset(marker.icon.offset);
		marker.icon.imageDiv.style.left = offsetPx.x+parseInt(this.map.layerContainerDiv.style.left) + "px";
		marker.icon.imageDiv.style.top = offsetPx.y+parseInt(this.map.layerContainerDiv.style.top) + "px";
	    }
		
        }
        if (!this.drawn || zoomChanged) {
            this.drawn = true;
            for(var i = 0; i < this.features.length; i++) {
                var feature = this.features[i];
                this.drawFeature(feature);
            }
        }

    },
	
    setMap: function(map) {
        OpenLayers.Layer.prototype.setMap.apply(this, arguments);

        if (!this.renderer) {
            this.map.removeLayer(this);
        } else {
            this.renderer.map = this.map;
            this.renderer.setSize(this.map.getSize());
        }

    },
    /** @final @type String */
    CLASS_NAME: "OpenLayers.Layer.GPX"
});

Gruß

MOLE

Last edited by MOLE (2012-08-31 16:07:53)

Offline

#8 2012-08-31 19:19:34

maxbe
Member
Registered: 2010-01-19
Posts: 3,255
Website

Re: GPX-Tracks werden nicht mehr dargestellt

MOLE wrote:

Im Gegensatz zu dem Muster von mexbe habe ich die Daten lokal auf meinem PC, bzw möchte sich nicht immer ins Internet hochladen müssen.

Tag,

das zurückgehen auf eine ältere OpenLayers-Version wird ein bisschen schwierig. Die OL-Leute sind zwar so freundlich, auch alte Versionen lange Zeit vorrätig zu halten (einfach "www.openlayers.org/api/OpenLayers.js" durch z.B. "www.openlayers.org/api/2.9/OpenLayers.js" ersetzen), aber als nächstes fehlt Dir dann die "Ajax.js". Die ist zumindest bei den historischen Versionen nicht mehr dabei...

Das Beispiel da oben ist recht schnell auch für drei oder vier Tracks erweiterbar. Das läuft auch lokal, kann allerdings nicht die ganze Funktionalität der GPX.js ersetzen. Die GPX.js z.B. kann auch Waypoints mit Markern aus der Datei holen, um WPTs hab ich mich aber nicht gekümmert.

Grüße, Max

Offline

#9 2012-09-01 11:25:04

MOLE
Member
Registered: 2012-08-31
Posts: 3

Re: GPX-Tracks werden nicht mehr dargestellt

Hallo,

Erst mal Danke für die Antwort. Ja ich möchte auch ungern eine ältere Version von Open Streetmap nutzen, da es irgendwann Probleme deswegen kann.
Die volle Funktionalität von GPX benötige ich nicht. Allerdings die Möglichkeit mehrere Tracks in verschiedenen Farben (+ eventuell Linienbreite ) zu verwenden. Außerdem sollen die Tracks von der Lokalen Festplatte geöffnet werden können. Da ich die Tracks zum Teil mehrfach am Tag ändere (bis zu 20 mal mit kleinen Änderungen) und sie mir ansehen will, ist die Lösung des Upload auf einen Server eher unpraktikabel.

Was müsste ich in deinem Beispiel denn ändern, damit dies geht? Einfach die URL auf einen lokalen Link stellen?
Oder gibt es eine Möglichkeit mein altes Programm zu reaktivieren?

Gruß

Mole

Offline

#10 2012-09-01 11:50:18

maxbe
Member
Registered: 2010-01-19
Posts: 3,255
Website

Re: GPX-Tracks werden nicht mehr dargestellt

Tag,

MOLE wrote:

Was müsste ich in deinem Beispiel denn ändern, damit dies geht? Einfach die URL auf einen lokalen Link stellen?

Einfach den Quelltext kopieren und lokal ablegen. Die GPX-Tracks liegen im gleichen Verzeichnis.

Anpassen müsste man

  • Die Dateinamen der Tracks (da wo bei mir "jochberg.gpx",  "unnuetz.gpx", "seekarkreuz.gpx" und "lenggries.gpx" steht)

  • Die Darstellung der Striche. Da steht bei jedem der vier z.B. Blöcke {strokeColor:"#0000ff",  strokeWidth: 5, strokeDashstyle: "solid", strokeOpacity:  0.8} Was so viel heisst wie "blau, Strichstärke 5, durchgezogen, 80% Deckung (also 20% Transparenz)".
    Der vierte Track ist z.B. {strokeColor: "#000000", strokeWidth: 3, strokeDashstyle: "dashdot",  strokeOpacity: 1}, was dann eine schwarze durchgezogene Strich-Punkt-Linie mit Strichstärke 3 und 100% Deckung ist.

Und wen man das auch noch schöner dargestellt haben möchte

  • Bei "map.setCenter" die Koordinate (11.585,47.582) und den Zoomlevel (10, am Zeilenende) auf was passenderes ändern

  • Die Kartengröße (style="width:600px;height: 600px;">) auf was hübscheres setzen. style="width:100%;height: 100%;" wäre z.B. schön gross

  • den Text unten wegmachen

MOLE wrote:

Oder gibt es eine Möglichkeit mein altes Programm zu reaktivieren?

Da müsste halt jemand sich in GPX.js einarbeiten, ändern und im Wiki veröffentlichen, vielleicht auch die Ajax.js einer alten Version ausgraben und anpassen. Und er (oder andere) müssten bereit sein, das bei Änderungen von OpenLayers zeitnah weiter zu pflegen... Am letzten Kriterium liegt es, dass z.B. ich mit OL-code im Wiki gar nicht erst anfange, aber vielleicht findet sich jemand wink

Grüße, Max

Last edited by maxbe (2012-09-01 12:12:05)

Offline

#11 2012-09-02 11:26:27

mkolb
Member
Registered: 2012-08-19
Posts: 4

Re: GPX-Tracks werden nicht mehr dargestellt

>> Bei "map.setCenter" die Koordinate (11.585,47.582) und den Zoomlevel (10, am Zeilenende) auf was passenderes ändern <<

so, bei mir paßt es nun wieder, sieht ganz nett aus. Aber einen Mangel habe ich noch, wie errechne ich anhand des GPS-Tracks, das Zentrieren des Tracks ? Ich habe div. Tracks aus ganz Europa und da wäre eine allgemeine Zentrierung etwas ungünstig.

Tschau
Martin

Offline

#12 2012-09-02 12:19:46

maxbe
Member
Registered: 2010-01-19
Posts: 3,255
Website

Re: GPX-Tracks werden nicht mehr dargestellt

mkolb wrote:

wie errechne ich anhand des GPS-Tracks, das Zentrieren des Tracks ?

Ich habs mal eingebaut. Mit 

onFeatureInsert: function(e) {e.layer.map.zoomToExtent(e.geometry.bounds);}

zoomt die Karte nach jedem Laden eines features auf dieses.

Ist aber auch nicht so perfekt, eher ein Hinweis auf die nächste Baustelle wink

Weil eine GPX-Datei kann ja beliebig viele Tracks, Routen und Waypoints enthalten und wenn man nach jedem Laden zoomt, gewinnt einfach das zuletzt eingefügte Ding. Schlimmstenfalls ist das zuletzt eingefügte feature ein Waypoint. dann gewinnt dieser WPT und man hat maximalen Zoom auf einen Punkt, den man nicht mal darstellt...
Das da ist das Negativbeispiel: zwei GPX-Kringel über München und Innsbruck. Aber den münchner sieht man nicht, weil die Karte nur auf den zweiten Kringel zoomt.

Grüße, Max


Edit: Das Einfügen von Waypoints kann man verhindern, indem man OpenLayers.Format.GPX ({extractWaypoints:  false, extractTracks: true, extractRoutes: false}) verwendet, dann nimmt OL nur die Tracks.

Last edited by maxbe (2012-09-02 12:56:09)

Offline

#13 2012-09-03 13:30:07

MOLE
Member
Registered: 2012-08-31
Posts: 3

Re: GPX-Tracks werden nicht mehr dargestellt

@maxbe
Danke.

Mit deiner Unterstützung konnte ich mir ein vergleichbares HTML Skript bauen, das mehrere lokale GPX Traces lesen kann. -> Ich habe hier auch einen Funktionsaufruf (ähnlich dem GPX Skript) eingebaut, um den Part des Traceaufrufes übersichtlich zu halten. Auch die "Autozoom Funktion" habe ich drin, was mir die Arbeit des Raussuchens passender Größen und Regionen erleichtert. (Sicher geht es effektiver, vor allem für alle Tracks gemeinsam nicht gegenseitig überschreibens. Aber Effektivität und Rechenzeit ist vernachlässigbar, ich spare mir jedenfalls die mühevolle Handarbeit. Außerdem sind auch von meiner Seite noch einige Datenleichen drin, die man entfernen kann wink )

Nochmal vielen Dank.

PS: Habe zusätzlich lange gebraucht, da der Internetexplorer (Mein Programmstandard zum Öffnen von HTML, und hat bisher immer gut geklappt) hierbei Fehler verursacht hat (Openlayers Skript konnte nicht geladen werden -> Zugriff verweigert). Mit Firefox geht es aber einwandfrei. Seltsamer Fehler...

Zudem geht die neue Variante gefühlt besser und schneller bei großen Tracks (einige Tausend Messpunkte). Und ein weiterer Vorteil, ich benötige keine lokalen Daten mehr wie Ajax.js, GPX.js, Openstreetmap.js etc. Das vereinfacht die Sache zusätzlich.

Anbei als Dankeschön mein Quellcode.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>Theatertunnel Frankfurt</title>
    
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	
<!--<style type="text/css">
 div.olControlPanel {
    top: 0px;
    left: 1257px;
    position: absolute;
}
.olControlPanel div {
    display: block;
    width:  20px;
    height: 8px;
    border: thin solid black;
    margin-top: 10px;
    background-color: white
}
.MyButtonItemInactive {
    background-image: url("img/quit.png");
}
</style>	-->
    <script type="text/javascript">
	if (top != self)
	top.location = self.location;
	
	// Position und Zoomstufe der Karte
//	lon = 8.671059;
//	lat = 50.107361;
//	zoom = 18;
	
	function GPS_Trace (Name, Link, Farbe)
	{
		var Trace = new OpenLayers.Layer.Vector(Name,
				 {protocol:   new OpenLayers.Protocol.HTTP(
						{   
							   url:             Link,
							format:          new OpenLayers.Format.GPX ({
													extractWaypoints:  false,
													extractTracks:     true,
													extractAttributes: true,
													extractRoutes:     false })
					   }),
					  styleMap:   new OpenLayers.StyleMap({ 
											   strokeColor:     Farbe, 
											   strokeWidth:     2, 
											   strokeDashstyle: "solid",
											   strokeOpacity:   1}),
					  strategies: [new OpenLayers.Strategy.Fixed()],
					  projection: new
					  OpenLayers.Projection("EPSG:4326"),
					  onFeatureInsert: function(e) {e.layer.map.zoomToExtent(e.geometry.bounds);}
				  });  
	  return Trace;
	}
	
        function Draw_GPS_Traces()
		{
			OpenLayers.Lang.setCode('de');
			
			    var map = new OpenLayers.Map('map', 
				{
					controls: [
					new OpenLayers.Control.Navigation(),	
					new OpenLayers.Control.Attribution(),
					new OpenLayers.Control.LayerSwitcher(),
					new OpenLayers.Control.PanZoomBar()
					//new OpenLayers.Control.ScaleLine()
					],
					maxExtent:
						new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34, 20037508.34),
						numZoomLevels: 19,
						maxResolution: 156543,
						units: 'meters',
					
					projection: new OpenLayers.Projection("EPSG:900913"),
					displayProjection: new OpenLayers.Projection("EPSG:4326")

				});
				map.addLayer (new OpenLayers.Layer.OSM("OSM Mapnik"));
				
			// Cursor Position darstellen
			map.addControl(new OpenLayers.Control.MousePosition());
	
			// GPS Traces Einfügen 
			map.addLayer(GPS_Trace ("GPS1", "GPS1.gpx", "#FFE500"));
			map.addLayer(GPS_Trace ("GPS2", "GPS2.gpx", "#00FF00"));
			map.addLayer(GPS_Trace ("GPS3", "GPS3.gpx", "#0000FF"));
			map.addLayer(GPS_Trace ("GPS4", "GPS4.gpx", "#FF7F00"));
			
			// Layer Zentrieren	
			//var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
			//map.setCenter (lonLat, zoom);			
			
        }
		
    </script>
 
</head>
<body onload="Draw_GPS_Traces();">
<div id="map"></div>

</body>
</html>

Last edited by MOLE (2012-09-03 13:31:47)

Offline

Pages: 1

Board footer

Powered by FluxBB