You are not logged in.

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

BorderCounter
Member
Registered: 2008-09-12
Posts: 4

OpenLayers - Center und Zoom

Hallo zusammen,

vielleicht ist dieses Forum nicht die richtige Anlaufstelle? Vielleicht doch? Auf jedem Fall brauche ich Hilfe 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 sad

Offline

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

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

Re: OpenLayers - Center und Zoom

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

Offline

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

lonvia
Member
Registered: 2009-10-22
Posts: 64

Re: OpenLayers - Center und Zoom

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

Offline

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

BorderCounter
Member
Registered: 2008-09-12
Posts: 4

Re: OpenLayers - Center und Zoom

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?

Offline

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

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

Re: OpenLayers - Center und Zoom

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

Offline

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

ikonor
Member
Registered: 2010-11-08
Posts: 631
Website

Re: OpenLayers - Center und Zoom

maxbe wrote:

[...] mit alten Versionen

BorderCounter wrote:

Siehe Script:

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

Offline

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

AlterSachse
Member
From: D-02763
Registered: 2010-01-27
Posts: 125
Website

Re: OpenLayers - Center und Zoom

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)


GPS --Huawei Mate 20 / Garmin Oregon700 eigene OSM-Karte für meine Hometouren
Software -- Linux Debian Stable, QMapShack, JOSM

Offline

Board footer

Powered by FluxBB