Leaflet: HTTPS / SSLを介したリーフレットタイルのストリーミング

リーフレットは独自のタイルを提供していません。タイルにどのソースを使用していますか？

例：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で画像を読み込むだけです。 セキュリティと証明書はサーバー/アプリケーションロジックです。

彼らのサポートは今日私に電子メールを送り、「はい、tile.openstreetmap.orgでhttpsを使用してください。省略されたドメインの証明書はありません」と述べました。 今私のために働きます！

それはまだあなたのために働きますか？ 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レイヤーはhttpshttps ： //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 [email protected]
書きました：

@ F1LT3Rhttps ： //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をまったくサポートしないと思っていました。

「http：// {s} .tile.osm.org / {」ではなく、「https：// {s} .tile.openstreetmap.org / {z} / {x} / {y} .png」に切り替えました。 z} / {x} / {y} .png '。 しかし、httpsのものは、安全でないものと比較して非常に遅いです。 安全でないタイルでは、タイルの読み込みがはるかに速くなります。

他の誰かが同じ問題を抱えていますか？

こんにちは@ pango89 、Leafletが便利だと聞いてうれしいです！

ただし、この課題追跡システムは、バグを報告し、Leafletライブラリ自体の新機能について説明するために使用されます。
Leafletの使用に関する質問については、 StackOverflowまたはGISStackExchangeを使用してください。
他の場所も適している可能性があります。特に、問題が特定のTile Server（Leafletの完全に外部にある）に関するものであるという事実を考えると。

これがLeafletのバグであると_本当に_確信している場合は、古くて閉じたスレッドにコメントするのではなく、新しい問題を開いてください。

こんにちは@ghybs 、
お返事ありがとうございます。
間違った場所での投稿について申し訳ありません。
クエリをGISStackExchangeに投稿します。

ありがとう👍

代わりにこのURLを使用することになりました。
他の誰かがそれを望む場合に備えて：

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コードに関連するすべての解決策を試しましたが、何をしましたか：私のサイトのインデックスファイルでは、leaflet.cssとleaflet.jsがhttpサイトから呼び出されていました-それらをhttpsに変更すると壊れました私のhttpサイトでさえ、私のhttpsサイトを修正しませんでした。 そこで、cssファイルとjsファイルの両方のコードをコピーして、leaflet.jsとleaflet.cssとして自分のサーバーに保存しました。したがって、インデックスページでのそれらへの参照はローカルであり、すべてが正しく機能するようになりました。