OpenLayers - Center und Zoom

BorderCounter · 2022-06-03 14:09:03

Hallo zusammen,

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

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

maxbe · 2022-06-03 15:23:35

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...

lonvia · 2022-06-03 15:51:51

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()))

BorderCounter · 2022-06-07 15:11:58

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?

maxbe · 2022-06-08 13:13:33

BorderCounter wrote:

Danke erstmal für eure Tipps.
Ich habe es jetzt wie folgt probiert

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....

ikonor · 2022-06-11 10:26:57

maxbe wrote:

[...] mit alten Versionen

BorderCounter wrote:

Siehe Script:

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

AlterSachse · 2022-06-13 07:15:28

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/Use … uf_Website
https://forum.openstreetmap.org/viewtopic.php?id=5104

Last edited by AlterSachse (2022-06-13 07:17:27)

Announcement

#1 2022-06-03 14:09:03

OpenLayers - Center und Zoom

#2 2022-06-03 15:23:35

Re: OpenLayers - Center und Zoom

#3 2022-06-03 15:51:51

Re: OpenLayers - Center und Zoom

#4 2022-06-07 15:11:58

Re: OpenLayers - Center und Zoom

#5 2022-06-08 13:13:33

Re: OpenLayers - Center und Zoom

#6 2022-06-11 10:26:57

Re: OpenLayers - Center und Zoom

#7 2022-06-13 07:15:28

Re: OpenLayers - Center und Zoom

Board footer