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:Openlayers_Track_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 
)
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
