지도 상자 타일 레이어를 표시하는 방법

LeafletJS의 간단한 예제를 사용하려고하지만 내지도 상자 공개 키를 사용하여 레이어를 표시 할 수 없습니다. 지도는 샘플 표식과 함께 회색 배경을 표시하고 팝업합니다.지도 상자 타일 레이어를 표시하는 방법

var map = L.map('map').setView([39.5, -105.5], 7); 

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { 
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 © <a href="http://mapbox.com">Mapbox</a>', 
maxZoom: 18, 
id: 'test.project', 
accessToken: 'copied.and.pasted.my.mapbox.key.here' 
}).addTo(mymap); 

L.marker([39.5, -105.5]).addTo(map) 
.bindPopup('This is my first marker!') 
.openPopup();

출처

2017-02-07 Rick R.

당신은 tilelayer에 .addTo(mymap);을 요구하고 있지만,지도 객체는 map입니다. 이것을 사용하십시오 : .addTo(map);

URL을 약간 변경해야 할 수도 있습니다. 당신이 특정 타일 세트 사용이 (documentation)에 대한 타일을 검색 할 경우

var map = L.map('map').setView([39.5, -105.5], 7); 

L.tileLayer('https://api.tiles.mapbox.com/styles/v1/{username}/{id}/tiles/{tileSize}/{z}/{x}/{y}?access_token={accessToken}', { 
    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 © <a href="http://mapbox.com">Mapbox</a>', 
    maxZoom: 18, 
    username: 'mapbox username', 
    id: 'mapbox style id', 
    accessToken: 'mapbox access token', 
    tileSize: 512, 
    zoomOffset: -1 
}).addTo(map); 

L.marker([39.5, -105.5]).addTo(map) 
    .bindPopup('This is my first marker!') 
    .openPopup();

가 :

L.tileLayer('https://api.mapbox.com/v4/{tilesetId}/{z}/{x}/{y}.png?access_token={accessToken}', { 
    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 © <a href="http://mapbox.com">Mapbox</a>', 
    maxZoom: 18, 
    accessToken: 'mapbox access token', 
    tilesetId: 'mapbox tileset id' 
}).addTo(map);

tilesetId 양식을 가지고 documentation here 다음 나는 스타일에 따라지도를 만들어 username.id의 경우 프로젝트 이름이 아니며 편집기/Studio에서 찾을 수 있습니다.

출처

2017-02-07 18:13:46 chrki

불일치를 수정했으며 타일 레이어가 여전히 표시되지 않습니다. URL에만 액세스하면 { "message": "Not Found"}를 나타내는 객체가 나타납니다. Leaflet.js가 깨 졌음을 나타내는 몇 가지 스레드를 읽고 있는데, 새로운 핵심 프로세스가 더 이상 Mapbox와 통합되지 않습니다. –

@RickR. 작업 URL로 답변을 업데이트했습니다. – chrki

지도 상자 타일 레이어를 표시하는 방법

답변

관련 문제