Hallo Forengemeinde,
mein Ziel ist es mit Openlayers einen Gpx-Track und einige damit verbundene Infos darzustellen.
Das Einbinden des eigentlichen Tracks funktioniert auch ohne Probleme, allerdings würde ich gerne auch das Höhenprofil (oder genauer gesagt die jeweilige Höhe an einer Position) mit einer bestimmten Farbe darstellen.
Ich habe das jetzt erstmal wie in dem folgenden Minimalbeispiel gelöst.
Die Infos für die einzelnen Punkte erzeuge ich mir über ein kleines Python-Skript aus dem gpx-File.
Frage meinerseits wäre jetzt, ist dieser Ansatz überhaupt zielführend? Denn es können ja je nach Länge des Tracks weit über 1000 Punkte zusammenkommen. (Für das Beispiel habe ich erstmal nur jeden 20. Punkt genommen)
Oder gibt es da bereits etwas fertiges in Openlayers das ich bis jetzt übersehen habe?
Weiterhin würde ich die Informationen für die Punkte (es gibt auch popups, die habe ich hier wegen der Übersichtlichkeit aber erstmal entfernt) gerne aus einer CSV oder Textdatei laden,
aber bis jetzt habe ich kein Beispiel gefunden wie das für OpenLayers.Feature.Vector funktioniert. (Für die einzelnen Punkte nutze ich OpenLayers.Geometry.Point)
Hat jemand so etwas schon mal realisiert oder ein Beispiel für einen solchen Fall?
Danke,
Marcus
<html>
<head>
<title>TEST</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
// Start position for the map
var LatCenter=49.773768;
var LonCenter=12.388962;
var zoom=12;
var proj1=new OpenLayers.Projection("EPSG:4326");
var proj2=new OpenLayers.Projection("EPSG:900913");
var map;
function init(){
map = new OpenLayers.Map('map',
{ numZoomLevel: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
controls: []
});
// Kontrollelemente hinzufügen
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.ScaleLine({geodesic:true,maxWidth:200, bottomOutUnits: "", bottomInUnits: ""}));
// Layer für den Kartenhintergrund definieren
var LayerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
var LayerCyclemap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayers([LayerMapnik, LayerCyclemap]);
// Layer für die Punkte erstellen
var PointLayer = new OpenLayers.Layer.Vector("Punkte");
var p100 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.385197, 49.784192).transform(proj1,proj2),{title:"15.91km",description:"696.3m<br>Info"},{fillColor: "#870078" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p101 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.385877, 49.782992).transform(proj1,proj2),{title:"16.05km",description:"722.4m<br>Info"},{fillColor: "#980067" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p102 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.386784, 49.782008).transform(proj1,proj2),{title:"16.19km",description:"732.3m<br>Info"},{fillColor: "#9E0061" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p103 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.387623, 49.780942).transform(proj1,proj2),{title:"16.33km",description:"751.7m<br>Info"},{fillColor: "#AA0055" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p104 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.388276, 49.779842).transform(proj1,proj2),{title:"16.46km",description:"760.0m<br>Info"},{fillColor: "#AF0050" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p105 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.389533, 49.778821).transform(proj1,proj2),{title:"16.61km",description:"765.6m<br>Info"},{fillColor: "#B3004C" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p106 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.389276, 49.777521).transform(proj1,proj2),{title:"16.76km",description:"764.4m<br>Info"},{fillColor: "#B2004D" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p107 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.388382, 49.776341).transform(proj1,proj2),{title:"16.91km",description:"769.1m<br>Info"},{fillColor: "#B5004A" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p108 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.388568, 49.774945).transform(proj1,proj2),{title:"17.07km",description:"774.5m<br>Info"},{fillColor: "#B90046" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p109 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.388962, 49.773768).transform(proj1,proj2),{title:"17.21km",description:"759.6m<br>Info"},{fillColor: "#AF0050" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p110 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.389004, 49.772624).transform(proj1,proj2),{title:"17.35km",description:"775.2m<br>Info"},{fillColor: "#B90046" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p111 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.388476, 49.771688).transform(proj1,proj2),{title:"17.49km",description:"786.2m<br>Info"},{fillColor: "#C0003F" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p112 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.388463, 49.770478).transform(proj1,proj2),{title:"17.63km",description:"810.2m<br>Info"},{fillColor: "#CF0030" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p113 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.388795, 49.769212).transform(proj1,proj2),{title:"17.77km",description:"815.9m<br>Info"},{fillColor: "#D3002C" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p114 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.388633, 49.76803).transform(proj1,proj2),{title:"17.91km",description:"825.6m<br>Info"},{fillColor: "#D90026" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p115 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.388432, 49.766764).transform(proj1,proj2),{title:"18.05km",description:"837.2m<br>Info"},{fillColor: "#E0001F" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p116 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.388348, 49.76551).transform(proj1,proj2),{title:"18.19km",description:"847.8m<br>Info"},{fillColor: "#E70018" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p117 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.388041, 49.764289).transform(proj1,proj2),{title:"18.34km",description:"857.5m<br>Info"},{fillColor: "#ED0012" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p118 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.38771, 49.763122).transform(proj1,proj2),{title:"18.47km",description:"870.6m<br>Info"},{fillColor: "#F5000A" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p119 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.38784, 49.761771).transform(proj1,proj2),{title:"18.62km",description:"867.3m<br>Info"},{fillColor: "#F3000C" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
var p120 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(12.388792, 49.760619).transform(proj1,proj2),{title:"18.77km",description:"886.0m<br>Info"},{fillColor: "#FF0000" , pointRadius: 4,fillOpacity: 1.0,strokeWidth:0});
PointLayer.addFeatures([p100,p101,p102,p103,p104,p105,p106,p107,p108,p109,p110,p111,p112,p113,p114,p115,p116,p117,p118,p119,p120]);
map.addLayers([PointLayer]);
// Ansicht auf vorgegebenen Punkt mit gewähltem Zoom zentrieren
map.setCenter(new OpenLayers.LonLat(LonCenter,LatCenter).transform(proj1,proj2),zoom);
}
</script>
</head>
<body onload="init();">
<div style="width:100%; height:100%" id="map"></div>
</body>
</html>