Maperitive Tiles für leaflet

firechhe · 2018-08-23T18:11:52.000Z

Hallo Zusammen,

ich arbeite momentan an einer OSM Karte die ich mit leaflet realisieren möchte.
Diese soll auch ohne Internetverbindung auf einem Desktop PC verwendet werden können.

Nun muss ich im HTML Script einen lokalen Speicherort für die Tiles angeben. Soweit kein Problem.

Ich habe nun versucht mit Maperative Tiles herunterladen. Umfang sind 3 Städte, ca. 300km²

Ich bekomme mit Maperitive zwar Tiles exportiert, allerdings sind diese mit einer reinen Zahlenkombination (4 stellig) benannt. Leaflet benötigt ja noch die Koordinaten und Zoomstufe im Dateinamen. Wie bekomme ich das hin?

Und ist dieser Export so zulässig? Ich habe einige Artikel gelesen, dass das Herunterladen von Tiles aufgrund von Serverkapazitäten u.U. Probleme bereitet. Einen eigenen Server zum rendern der Tiles halte ich momentan für overpowered.

Vielen Dank für Eure Tipps.

Harald_Hartmann · 2018-08-23T18:48:32.000Z

Was nu? (Fertige OSM-Mapnik) Tiles heruntergeladen? Oder neue, aus OSM Daten, generierte Tiles exportiert?
Also wenn ich mit Maperative aus OSM Daten Tiles exportiere, dann werden Zoomstufen-Ordner (z.B. 15,16,17) und darin dann die entsprechenden 5-stelligen Ordner. Koordinaten braucht Leaflet definitiv nicht.

TomKlipspringer · 2018-08-23T18:55:05.000Z

Ich glaube du benötigst etwas andere “Koordinaten”, als du denkst. Bei Tiles wird ein Raster - im weitesten Sinne auch Quad-Tree - benutzt. Also auf Zoom-Level 0 hast du ein Tile. Das wird bei Zoom-Level 1 in 4 Teile unterteilt, also 2x2. Zoom-Level 2 wieder in jeweils 4 Teile, also 4x4, usw. Bei Zoom-Level 12 bist du dann bei 2 ^ 12 = 4096, also 4096x4096. Jetzt ist die Koordinate bei Leaflet (und anderen Map controls) entsprechend dem Zoom-Level (z). Und das gibt dir Maperative auch aus: Erster Ordner: Zoom-Level (z). Zweiter Ordner: Tile-Nummer von Links (x). Dateiname: Tile-Nummer von oben (y). Damit könnte die URL, ohne was zu ändern, dann so aussehen:

file://.../{z}/{x}/{y}.png

https://developers.google.com/maps/documentation/javascript/coordinates#tile-coordinates
(Keine Ahnung ob es von Leaflet auch so eine Erklärbär-Seite für Tile-Koordinaten gibt, ist aber das gleiche Prinzip)

firechhe · 2018-08-23T18:57:25.000Z

In Maperative bin ich auf Tools → Generate Tiles gegangen.
Tiles wurden auch gespeichert (bei mir allerdings 4-stellige Ordner).

Ich denke, das Problem ist der fehlerhafte HTML Code…

				L.tileLayer('Tiles/{z}/{x}/{y}.png',
				{    maxZoom: 16  }).addTo(mymap);
			}

Im root folder von leaflet habe ich einen Ordner “Tiles” der alle Unterordner für die Zoomstufen etc. enthält.

Edit:

Habe es geschafft… Die Daten waren schon richtig eingebunden, allerdings hatte ich die Koordinaten noch nicht angepasst, welcher Kartenausschnitt angezeigt werden soll.

Maperative lädt bei mir mit der “Generate Tiles” Funktion nur bis Zoomstufe 14 herunter… Kann ich das anpassen, dass auch nähere Zoomstufen geladen werden?

Harald_Hartmann · 2018-08-23T19:22:40.000Z

Wenn du mal den Debugger im Browser öffnest (F12), erscheinen da irgendwelche Fehlermeldungen? (z.B. im console.log oder im Netzwerk-Tab)
PS: Ich habe nur mal eben auf die Schnelle noch in meinen Tiles-Ordner geguckt, da sind die Zoomordner und darin 5-stellige Ordner und 5-stellige PNGs

Harald_Hartmann · 2018-08-23T19:25:13.000Z

firechhe:

Maperative lädt bei mir mit der “Generate Tiles” Funktion nur bis Zoomstufe 14 herunter… Kann ich das anpassen, dass auch nähere Zoomstufen geladen werden?

Müsste ich mir selbst nochmal irgendwann mal anschauen … habe leider aktuell kein lauffähiges Maperitive … ich habe bisher immer aus den OSM Rohdaten (vorher evtl noch mit osmfilter/osmconvert die pbfs von der geofabrik bearbeitet) und den beigelegten Styles selbst “gerendert”