Leaflet: HTTPS/SSL을 통한 스트리밍 전단지 타일

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 

크롬의 오류. 내가 이것을 실행하는 응용 프로그램에는 자체 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 레이어는 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 -155360520.

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 사용에 대한 질문은 Stack Overflow 또는 GIS Stack Exchange 를 사용하세요.
특히 귀하의 문제가 특정 타일 서버(전적으로 Leaflet 외부에 있음)에 관한 것이라는 사실을 고려할 때 다른 장소도 적합할 수 있습니다.

이것이 Leaflet의 버그라고 _정말_ 확신한다면, 오래되고 닫힌 스레드에 댓글을 달지 말고 새 문제를 여십시오.

안녕하세요 @gybs 님
답장해주셔서 감사합니다.
엉뚱한 곳에 글을 올려 죄송합니다.
내 쿼리를 GIS Stack Exchange에 게시할 것입니다.

감사합니다 👍

이 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로 저장했습니다. 따라서 내 인덱스 페이지에서 해당 파일에 대한 참조는 로컬이며 이제 모든 것이 올바르게 작동합니다.