빠른 표시를 위해 브라우저 캐시에 알려진 범위의 전단지 타일을 미리로드하는 방법은 무엇입니까?

전단지 맵에 애니메이션 마커를 표시하는 웹 애플리케이션을 개발 중입니다. 지도는 프로그래밍 방식으로 첫 번째 애니메이션 경계로 확대 된 다음 애니메이션이 재생 된 다음지도가 두 번째 애니메이션 경계로 확대되고 두 번째 애니메이션이 재생됩니다 ...빠른 표시를 위해 브라우저 캐시에 알려진 범위의 전단지 타일을 미리로드하는 방법은 무엇입니까?

내 문제는 OpenStreetMap 타일 로딩 시간이 애니메이션 지속 시간을 초과하는 경우가 있으므로 마커 애니메이션이 끝날 때지도가 부분적으로로드되거나로드되지 않습니다.

처음부터 모든 범위를 확대 할 예정이며, 모든 유용한 타일 이미지를 미리 다운로드하여 (애니메이션 시작 전) 아약스 호출을 통해 브라우저에 있는지 확인하고 싶습니다. 캐시가 필요할 때.

나는 많은 것을 검색했으며 리플릿 경계에서 타일 URL 목록을 얻는 방법을 찾지 못했습니다. 알려진 경계와 줌 레벨을 위해 수동으로 브라우저 캐시에 타일을로드하는 방법이 있습니까? YaFred의 대답

해결 감사 : 여기

20 % 패딩 주변에 "mypolyline을"타일을 미리로드하는 코드입니다 :

var bounds = mypolyline.getBounds().pad(0.2); 
var zoom = map.getBoundsZoom(bounds); 
var east = bounds.getEast(); 
var west = bounds.getWest(); 
var north = bounds.getNorth(); 
var south = bounds.getSouth(); 

var dataEast = long2tile(east, zoom); 
var dataWest = long2tile(west, zoom); 
var dataNorth = lat2tile(north, zoom); 
var dataSouth = lat2tile(south, zoom); 

for(var y = dataNorth; y < dataSouth + 1; y++) { 
    for(var x = dataWest; x < dataEast + 1; x++) { 
     var url = 'https://a.tile.openstreetmap.fr/osmfr/' + zoom + '/' + x + '/' + y + '.png'; 
     var img=new Image(); 
     img.src=url; 
    } 
}

그것은 그의 두 답변을 결합합니다. 애니메이션이 실행 중일 때 이제 다음 타일을 미리로드 할 수 있습니다. 그것은 환상적으로 작동합니다.

1/어떻게 타일을 미리로드 : 하나이 개 질문

출처

2017-03-10 Julien V

있다?

타일은 이미지입니다. 이 이미지에 대한 참조 만 작성하면됩니다. 찾아보기 JavaScript Preloading Images

2/경계를 알 때 어떤 타일을로드해야합니까?

내가 도움이 될 것을 여기에 예를 요리 https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames

를 살펴 보자. https://yafred.github.io/leaflet-tests/20170311-preloading-tiles/

이 먼저 계산하면 다음 코드와 경계의 각 모서리에 필요한 타일 : 당신이지도를 이동할 때 다음 줌 레벨에서 타일을 사전로드의 당시

function long2tile(lon,zoom) { return (Math.floor((lon+180)/360*Math.pow(2,zoom))); } 
function lat2tile(lat,zoom) { return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom))); }

를,이 타일이있는 계산 경계 안쪽에.

출처

2017-03-11 15:53:51 YaFred

빠른 표시를 위해 브라우저 캐시에 알려진 범위의 전단지 타일을 미리로드하는 방법은 무엇입니까?

답변

관련 문제