Leaflet: 通过 HTTPS / SSL 流式传输 Leaflet Tiles

Leaflet 不提供自己的图块：您使用的图块来源是什么？

例如：如果您使用的是 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);

您可以通过将s添加到磁贴字符串来将其更改为使用 HTTPS：

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

感谢您的迅速回复。 我之前使用的是：

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

我尝试了以下方法：

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

在我的应用程序中，无法从 osm 切片服务器加载切片。 我收到了一个：

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

Chrome 中的错误。 我在其中运行的应用程序有自己的 SSL 证书。 如何将磁贴加载到我自己的 HTTPS 应用程序中？

谢谢！

这不是传单的问题。 它只是通过 url 加载图像。 安全性和证书是服务器/应用程序逻辑。

他们的支持今天给我发了电子邮件说：“是的，使用 https 和 tile.openstreetmap.org - 我们没有缩写域的证书。” 现在为我工作！

它仍然对你有用吗？ 我使用https://tile.openstreetmap.org并收到不安全的连接警告

我也有这个问题Sammaye：

在 url 中从osm更改为openstreetmap并添加https://a.tile对我有用。

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

我之前得到的错误是这样的：

我最后使用了不同的提供者（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 层使用https://esri.github.io/esri-leaflet/examples/basemap-with-labels.html

感谢@F1LT3R ，我解决了

我有

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

我遇到了 SSL 问题，我将其更改为

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

并做了！

谢谢

惊人的！ 很高兴我能帮助你。

2015 年 11 月 10 日星期二凌晨 3:51，Ayoze Barrera [email protected]
写道：

感谢@F1LT3R https://github.com/F1LT3R我解决了

我有

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

我遇到了 SSL 问题，我将其更改为

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

并做了！

谢谢

—
直接回复此邮件或在 GitHub 上查看
https://github.com/Leaflet/Leaflet/issues/3186#issuecomment -15536​​0520。

感谢您提供有关 https 服务器的提示。 我实际上认为 OSM 根本不支持 HTTPS。

我切换到 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' 而不是 'http://{s}.tile.osm.org/{ z}/{x}/{y}.png'。 但是与非安全的相比，https 的速度非常非常慢。 在不安全的情况下，瓷砖的加载速度要快得多。

有没有其他人有同样的问题？

嗨@pango89 ，很高兴听到您发现 Leaflet 很有用！

但是，此问题跟踪器用于报告错误和讨论 Leaflet 库本身的新功能。
有关使用 Leaflet 的问题，请使用Stack Overflow或GIS Stack Exchange 。
其他地方也可能是合适的，特别是考虑到您的问题是关于特定的 Tile 服务器（完全在 Leaflet 之外）。

如果您_真的_确定这是 Leaflet 中的错误，请打开一个新问题，而不是评论一个旧的和关闭的线程。

嗨@ghybs ，
非常感谢你的回复。
抱歉发错地方了。
我将在 GIS Stack Exchange 上发布我的查询。

谢谢👍

我最终改用了这个网址，
如果其他人想要它：

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

基本上'http://{s}.tile.osm.org/{z}/{x}/{y}.png'到'//{s}.tile.osm.org/{z}/{x}/{y}.png'

我在这里尝试了与 L.tileLayer 代码有关的所有解决方案，但这对我有什么帮助：在我网站的索引文件中，从 http 站点调用了 leaflet.css 和 leaflet.js - 将它们更改为 https 中断甚至我的 http 网站也没有修复我的 https 网站。 所以我复制了 css 和 js 文件的代码，并将它们保存为我自己的服务器中的 leaflet.js 和 leaflet.css，因此在我的索引页面中对它们的引用是本地的，现在一切正常。