OpenLayers - Center und Zoom

Hallo zusammen,

vielleicht ist dieses Forum nicht die richtige Anlaufstelle? Vielleicht doch? Auf jedem Fall brauche ich Hilfe :slight_smile:

Ich plotte mittels eines relativ einfachen scriptes das auf einem Raspberry PI lÀuft im Netzwerk zuhause verschiedene GPX-Dateien.

Siehe Script:

  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());


var 20200414= new OpenLayers.Layer.Vector("20200414", {
				strategies: [new OpenLayers.Strategy.Fixed()],
				protocol: new OpenLayers.Protocol.HTTP({
					url: "../gpx/20200414.gpx",
					format: new OpenLayers.Format.GPX()
				}),
				style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
				projection: new OpenLayers.Projection("EPSG:4326")
			});
			map.addLayer(20200414);     

var 20200415= new OpenLayers.Layer.Vector("20200415", {
				strategies: [new OpenLayers.Strategy.Fixed()],
				protocol: new OpenLayers.Protocol.HTTP({
					url: "../gpx/20200415.gpx",
					format: new OpenLayers.Format.GPX()
				}),
				style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
				projection: new OpenLayers.Projection("EPSG:4326")
			});
			map.addLayer(20200415);    

// Weitere GPX Dateien folgend... 

 // create layer switcher widget in top right corner of map.
    var layer_switcher= new OpenLayers.Control.LayerSwitcher({});
    map.addControl(layer_switcher);
    //Set start centrepoint and zoom    
    var lonLat = new OpenLayers.LonLat( 10, 50 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
    var zoom=5;
    map.setCenter (lonLat, zoom);  
    
  </script>

Über var zoom wird der Zoom eingestellt und via var lonLat der Center der Karte.

Ist es ohne extremen Aufwand irgendwie möglich, die Karte automatisch auf die optimale Stufe zu zoomen, so dass die Tracks der GPX-Dateien vollstÀndig sichtbar sind?

Ich bin leider kein Programmierer und klicke mir das alles nur zusammen. Aus der OpenLayers Doku bin ich nicht wirklich schlau geworden :frowning:

Du suchst irgendwas in der Art:

map.zoomToExtent(20200415.getDataExtent())

wobei das halt nur die Ausdehnung eines Layers ist. Um die maximale Ausdehnung mehrerer Layer zu finden, wĂŒsste ich keinen einfachen Weg, ausser halt alle Ecken aller Extents zu vergleichen. Aber vielleicht weiss wer anderes was dazu


Erstmal: 20200414 ist kein legaler Variablenname. Der muss mit einem Buchstaben oder Unterstrich anfangen, also so etwas wie gpx_20200414.

Mehrere Extents kann man mit ‘extend()’ zusammenfassen. maxbe’s CodestĂŒck erweitert (und mit korrigierten Variablennamen):

map.zoomToExtent(gpx_20200415.getDataExtent().extend(gpx_20200414.getDataExtent()))

Danke erstmal fĂŒr eure Tipps.

Ich habe es jetzt wie folgt probiert:

<html><body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());

var Test = new OpenLayers.Layer.Vector("Test", {
				strategies: [new OpenLayers.Strategy.Fixed()],
				protocol: new OpenLayers.Protocol.HTTP({
					url: "test.gpx",
					format: new OpenLayers.Format.GPX()
				}),
				style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
				projection: new OpenLayers.Projection("EPSG:4326")
			});
			map.addLayer(Test);     

    var layer_switcher= new OpenLayers.Control.LayerSwitcher({});
    map.addControl(layer_switcher);
	map.zoomToExtent(Test.getDataExtent())
 </script>
</body></html>

Funktioniert leider nicht. Mittelpunkt wird auf Lat/Lon 0,0 gesetzt

Leider habe ich auch nirgends auf der openLayers Webseite ein entsprechendes Beispiel gefunden.

Könnt ihr mir einen Tip geben, wie ich das korrekt einbinde?

Das da sollte gehn (Beweis)

<html><body>
<div id="mapdiv"></div>

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
 map = new OpenLayers.Map("mapdiv");
 map.addLayer(new OpenLayers.Layer.OSM());

var Test = new OpenLayers.Layer.Vector("Test", {
                                strategies: [new OpenLayers.Strategy.Fixed()],
                                protocol: new OpenLayers.Protocol.HTTP({
                                        url: "test.gpx",
                                        format: new OpenLayers.Format.GPX()
                                }),
                                style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
                                projection: new OpenLayers.Projection("EPSG:4326"),
                                onFeatureInsert: function(e) {map.zoomToExtent(Test.getDataExtent());}
                        });
     map.addLayer(Test);
     var layer_switcher= new OpenLayers.Control.LayerSwitcher({});
     map.addControl(layer_switcher);
 </script>
</body></html>

Das oben ging nicht, weil diese GPX-Layer asynchron arbeiten. Erst werden die Layer auf den Bildschirm gebracht, dann die Daten dazu geladen. Dazwischen irgendwo hast Du das zoomToExtent() aufgerufen, zu einem Moment, als der Layer da war, aber das gpx noch nicht geladen. Deshalb steht es jetzt in einer Funktion, die beim Event “onFeatureInsert” aufgerufen wird. Da weiss man schon alles


GrĂŒĂŸe
Max

PS: Und das Mantra fĂŒr alle, die mit OpenLayers anfangen wollen und dann auch mit alten Versionen: https://leafletjs.com/ ist vielleicht besser, weil leichter zu erlernen und zumindest hier breiter unterstĂŒtzt


Welche Vorlage hast Du verwendet? Die sollte man mal zumindest als veraltet markieren.

HI,
also ich hab so was Àhnliches auf meiner Webseite am laufen.
Die GPX Datei wird eingelesen und dann wird die Karte erzeugt die den gesamten Track darstellt, also je nach LĂ€nge des Tracks wird dann halt der Zoom fĂŒr die Karte ermittelt.
Vorlage dazu sind diese beiden Artikel
https://wiki.openstreetmap.org/wiki/User:Aighes/GPX-Track_auf_Website
https://forum.openstreetmap.org/viewtopic.php?id=5104