Leaflet: Streaming de blocos de folhetos sobre HTTPS/SSL

O folheto não fornece seus próprios ladrilhos: qual fonte você está usando para ladrilhos?

Por exemplo: se você estiver usando o 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);

Você pode alterar isso para usar HTTPS adicionando um s à sequência de blocos:

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

Obrigado pela resposta rápida. Eu estava usando anteriormente:

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

Eu tentei o seguinte:

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

no meu aplicativo e não foi possível carregar blocos do servidor de blocos osm. Eu recebi um:

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

erro no Chrome. O aplicativo em que estou executando isso tem seu próprio certificado SSL. Como eu carregaria blocos em meu próprio aplicativo HTTPS?

Obrigado!

Esta não é uma preocupação do Folheto. Ele apenas carrega imagens por um URL. Segurança e certificados são a lógica do servidor/aplicativo.

O suporte deles me enviou um e-mail hoje e disse: "Sim, use https com tile.openstreetmap.org - não temos um certificado para o domínio abreviado". Funciona para mim agora!

Ainda funciona para você? Eu uso https://tile.openstreetmap.org e recebo um aviso de conexão insegura

Eu também estava tendo esse problema Sammaye:

Mudar de osm para openstreetmap no URL e adicionar https://a.tile fez o truque para mim.

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

O erro que recebi antes era assim:

Eu usei um provedor diferente no final (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);
            });

As camadas ESRI funcionam com https://esri.github.io/esri-leaflet/examples/basemap-with-labels.html

Eu resolvi isso graças a @F1LT3R

eu tinha

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

e eu tive o problema SSL e mudei para

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

E feito!

obrigada

Impressionante! Que bom que pude ajudar.

Em terça-feira, 10 de novembro de 2015 às 3h51, Ayoze Barrera [email protected]
escrevi:

Eu resolvi isso graças a @F1LT3R https://github.com/F1LT3R

eu tinha

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

e eu tive o problema SSL e mudei para

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

E feito!

obrigada

—
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/Leaflet/Leaflet/issues/3186#issuecomment -155360520.

Obrigado pela dica sobre o servidor https. Na verdade, pensei que o OSM não suportaria HTTPS.

Mudei para 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' em vez de 'http://{s}.tile.osm.org/{ z}/{x}/{y}.png'. Mas o https é muito lento em comparação com o não seguro. As telhas estão carregando muito mais rápido em um não seguro.

Alguém mais tem o mesmo problema?

Oi @pango89 , ótimo saber que você achou o Leaflet útil!

No entanto, este rastreador de problemas é usado para relatar bugs e discutir novos recursos da própria biblioteca Leaflet.
Para perguntas sobre o uso do Leaflet, use o Stack Overflow ou o GIS Stack Exchange .
Outros lugares também podem ser adequados, especialmente porque seu problema é sobre um Tile Server específico (que é totalmente externo ao Leaflet).

Se você tem _realmente_ certeza de que isso é um bug no Leaflet, por favor, abra um novo problema, ao invés de comentar em um tópico antigo e fechado.

Olá @ghybs ,
Muito obrigado pela sua resposta.
Desculpe pelo post no lugar errado.
Vou postar minha consulta no GIS Stack Exchange.

Obrigado 👍

Acabei usando este URL em vez disso,
caso alguém queira:

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

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

Eu tentei todas as soluções aqui relacionadas ao código L.tileLayer, mas o que fez isso por mim: no arquivo de índice do meu site, o leaflet.css e o leaflet.js estavam sendo chamados de um site http - alterando-os para https quebrou até mesmo meu site http e não corrigiu meu site https. Então eu copiei o código para os arquivos css e js e salvei-os como leaflet.js e leaflet.css em meu próprio servidor e, portanto, a referência a eles na minha página de índice é local e agora tudo funciona corretamente.