Leaflet: Streaming von Leaflet-Kacheln über HTTPS / SSL

Leaflet stellt keine eigenen Kacheln zur Verfügung: Welche Quelle verwenden Sie für Kacheln?

Zum Beispiel: Wenn Sie OpenStreetMap verwenden:

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Sie können dies ändern, um HTTPS zu verwenden, indem Sie der Tile-Zeichenfolge ein s hinzufügen:

L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Vielen Dank für die schnelle Antwort. Ich habe bisher verwendet:

 var url = 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg',
     attr ='Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Map data {attribution.OpenStreetMap}',
     service = new L.TileLayer(url, {subdomains:"1234",attribution: attr});
     map.addLayer(service);

Folgendes habe ich versucht:

 L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 }).addTo(map);

in meiner Anwendung und konnte keine Kacheln vom osm-Kachelserver laden. Ich erhielt ein:

 GET https://{s}.tile.osm.org/{x}/{y}/{z}.png net::ERR_INSECURE_RESPONSE 

Fehler in Chrome. Die Anwendung, in der ich dies ausführe, verfügt über ein eigenes SSL-Zertifikat. Wie würde ich Kacheln in meine eigene HTTPS-Anwendung laden?

Danke!

Dies ist kein Anliegen der Broschüre. Es lädt nur Bilder über eine URL. Sicherheit und Zertifikate sind Server-/Anwendungslogik.

Ihr Support hat mir heute eine E-Mail geschickt und gesagt: "Ja, verwenden Sie https mit tile.openstreetmap.org - wir haben kein Zertifikat für die abgekürzte Domain." Funktioniert jetzt bei mir!

Funktioniert es bei dir noch? Ich verwende https://tile.openstreetmap.org und bekomme eine Warnung wegen unsicherer Verbindung

Ich hatte auch dieses Problem Sammaye:

Das Ändern von osm in openstreetmap in der URL und das Hinzufügen https://a.tile hat den Trick für mich getan.

https://a.tile.openstreetmap.org/{z}/{x}/{y}.png

Der Fehler, den ich vorher bekam, sah so aus:

Ich habe am Ende einen anderen Anbieter verwendet (mapquest):

            $('#MapModal').on('shown.bs.modal', function (e) {

                var data = $(e.relatedTarget).data();
                var map = L.map('modalMap').setView([data.lat, data.long], 9);

                L.tileLayer('https://otile2-s.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
                    maxZoom: 18,
                    attribution: 'Map data &copy; <a href=\"http://openstreetmap.org\">OpenStreetMap</a> contributors, ' +
                        '<a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>, ' +
                        'Imagery &copy; <a href=\"http://mapquest.com\">Mapquest</a>',
                    id: 'examples.map-i875mjb7'
                }).addTo(map);
            });

ESRI-Layer funktionieren mit https://esri.github.io/esri-leaflet/examples/basemap-with-labels.html

Ich habe es dank @F1LT3R gelöst

ich hatte

http://{s}.tile.osm.org/{z}/{x}/{y}.png

und ich hatte das SSL-Problem und ich habe es auf geändert

https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

und fertig!

Danke

Fantastisch! Froh, dass ich helfen konnte.

Am Dienstag, 10. November 2015 um 3:51 Uhr, Ayoze Barrera [email protected]
schrieb:

Ich habe es dank @F1LT3R https://github.com/F1LT3R gelöst

ich hatte

http://{s}.tile.osm.org/{z}/{x}/{y}.png http://tile.osm.org/%7Bz%7D/%7Bx%7D/%7By% 7D.png

und ich hatte das SSL-Problem und ich habe es auf geändert

https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png http://tile.openstreetmap.org/%7Bz%7D/%7Bx%7D/%7By% 7D.png

und fertig!

Danke

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/Leaflet/Leaflet/issues/3186#issuecomment -155360520.

Danke für den Hinweis zum https-Server. Ich dachte eigentlich, OSM würde HTTPS überhaupt nicht unterstützen.

Ich bin zu 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' statt zu 'http://{s}.tile.osm.org/{ gewechselt z}/{x}/{y}.png'. Aber das https ist im Vergleich zum nicht sicheren sehr sehr langsam. Die Kacheln werden in nicht sicheren Kacheln viel schneller geladen.

Hat noch jemand das gleiche Problem?

Hallo @pango89 , schön zu hören, dass Sie die Broschüre nützlich finden!

Dieser Issue-Tracker wird jedoch verwendet, um Fehler zu melden und neue Funktionen der Leaflet-Bibliothek selbst zu diskutieren.
Bei Fragen zur Verwendung von Leaflet verwenden Sie bitte Stack Overflow oder GIS Stack Exchange .
Andere Orte könnten ebenfalls geeignet sein, insbesondere angesichts der Tatsache, dass es bei Ihrem Problem um einen bestimmten Tile-Server geht (der völlig außerhalb von Leaflet liegt).

Wenn Sie _wirklich_ sicher sind, dass dies ein Fehler in Leaflet ist, öffnen Sie bitte ein neues Problem, anstatt einen alten und geschlossenen Thread zu kommentieren.

Hallo @ghybs ,
Vielen Dank für Ihre Antwort.
Entschuldigung für den Post an der falschen Stelle.
Ich werde meine Anfrage auf GIS Stack Exchange veröffentlichen.

Danke 👍

Am Ende habe ich stattdessen diese URL verwendet,
falls es noch jemand haben möchte:

L.tileLayer('//{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Grundsätzlich 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' bis '//{s}.tile.osm.org/{z}/{x}/{y}.png'

Ich habe alle Lösungen hier in Bezug auf den L.tileLayer-Code ausprobiert, aber was hat es für mich getan: In der Indexdatei meiner Site wurden die leaflet.css und leaflet.js von einer http-Site aufgerufen - das Ändern dieser zu https brach sogar meine http-Site und habe meine https-Site nicht repariert. Also habe ich den Code sowohl für die CSS- als auch für die js-Dateien kopiert und sie als leaflet.js und leaflet.css auf meinem eigenen Server gespeichert, und daher ist der Verweis auf sie auf meiner Indexseite lokal und jetzt funktioniert alles korrekt.