Leaflet: Streaming Ubin Leaflet melalui HTTPS / SSL

Leaflet tidak menyediakan ubinnya sendiri: sumber apa yang Anda gunakan untuk ubin?

Misalnya: jika Anda menggunakan OpenStreetMap:

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

Anda dapat mengubah ini untuk menggunakan HTTPS dengan menambahkan s ke string ubin:

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

Terima kasih atas respon cepatnya. Saya sebelumnya menggunakan:

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

Saya mencoba yang berikut ini:

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

di aplikasi saya dan tidak dapat memuat ubin dari server ubin osm. saya menerima:

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

kesalahan di Chrome. Aplikasi tempat saya menjalankan ini memiliki sertifikat SSL sendiri. Bagaimana saya memuat ubin ke dalam aplikasi HTTPS saya sendiri?

Terima kasih!

Ini bukan masalah Leaflet. Itu hanya memuat gambar dengan url. Keamanan dan sertifikat adalah logika server/aplikasi.

Dukungan mereka mengirimi saya email hari ini dan berkata, "Ya, gunakan https dengan tile.openstreetmap.org - kami tidak memiliki sertifikat untuk domain yang disingkat." Bekerja untuk saya sekarang!

Apakah itu masih bekerja untuk Anda? Saya menggunakan https://tile.openstreetmap.org dan mendapatkan peringatan koneksi tidak aman

Saya juga mengalami masalah ini Sammaye:

Mengubah dari osm menjadi openstreetmap di url, dan menambahkan https://a.tile berhasil bagi saya.

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

Kesalahan yang saya dapatkan sebelumnya terlihat seperti ini:

Saya menggunakan penyedia yang berbeda pada akhirnya (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);
            });

Lapisan ESRI berfungsi dengan https://esri.github.io/esri-leaflet/examples/basemap-with-labels.html

Saya menyelesaikannya berkat @F1LT3R

aku punya

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

dan saya memiliki masalah SSL dan saya mengubahnya menjadi

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

dan selesai!

Terima kasih

Luar biasa! Senang aku dapat membantu.

Pada Selasa, 10 Nov 2015 jam 3:51, Ayoze [email protected]
menulis:

Saya menyelesaikannya berkat @F1LT3R https://github.com/F1LT3R

aku punya

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

dan saya memiliki masalah SSL dan saya mengubahnya menjadi

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

dan selesai!

Terima kasih

—
Balas email ini secara langsung atau lihat di GitHub
https://github.com/Leaflet/Leaflet/issues/3186#issuecomment -155360520.

Terima kasih atas petunjuk tentang server https. Saya sebenarnya berpikir OSM tidak akan mendukung HTTPS sama sekali.

Saya beralih ke 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' alih-alih 'http://{s}.tile.osm.org/{ z}/{x}/{y}.png'. Tetapi yang https sangat lambat dibandingkan dengan yang tidak aman. Ubin dimuat jauh lebih cepat di yang tidak aman.

Apakah ada orang lain yang memiliki masalah yang sama?

Hai @pango89 , senang mendengar bahwa Leaflet bermanfaat bagi Anda!

Namun, pelacak masalah ini digunakan untuk melaporkan bug dan mendiskusikan fitur baru perpustakaan Leaflet itu sendiri.
Untuk pertanyaan tentang penggunaan Leaflet, silakan gunakan Stack Overflow atau GIS Stack Exchange .
Tempat lain mungkin juga cocok, terutama mengingat fakta bahwa masalah Anda adalah tentang Server Tile tertentu (yang benar-benar di luar Leaflet).

Jika Anda _benar-benar_ yakin bahwa ini adalah bug di Leaflet, silakan buka edisi baru, daripada mengomentari utas lama dan yang sudah ditutup.

Hai @ghybs ,
Terima kasih banyak atas balasan Anda.
Maaf tentang posting di tempat yang salah.
Saya akan memposting pertanyaan saya di GIS Stack Exchange.

Terima kasih 👍

Saya akhirnya menggunakan url ini sebagai gantinya,
jika ada orang lain yang menginginkannya:

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

Pada dasarnya 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' hingga '//{s}.tile.osm.org/{z}/{x}/{y}.png'

Saya mencoba semua solusi di sini yang berkaitan dengan kode L.tileLayer, tetapi apa yang berhasil bagi saya: dalam file indeks situs saya, leaflet.css dan leaflet.js dipanggil dari situs http - mengubahnya menjadi https rusak bahkan situs http saya dan tidak memperbaiki situs https saya. Jadi saya menyalin kode untuk file css dan js dan menyimpannya sebagai leaflet.js dan leaflet.css di server saya sendiri dan oleh karena itu referensi untuk mereka di halaman indeks saya adalah lokal dan sekarang semuanya berfungsi dengan benar.