온라인 지도 다운로드 다운로드 - 온라인 지도 다운로드 소스코드 다운로드

온라인 지도 다운로드

기타 소스코드

다운로드

기술선택

Vue3 + 요소 플러스 + jszip + OpenLayers

이 프로젝트의 UI 부분은 다음 프로젝트를 기반으로 합니다: xiaolidan00/offline-map-download: 순수 프런트엔드 오프라인 타일 맵 다운로드(github.com) UI 수정

사용

이 프로젝트의 온라인 주소는 다음과 같습니다: 온라인 타일 지도 다운로드

웹사이트를 열고 XYZ 타일의 주소(기본값은 ArcGIS의 온라인 원격 감지 이미지)를 입력한 다음 타일 로드를 클릭합니다.

"그리기 범위"를 클릭한 다음 다각형 그리기를 시작하고 두 번 클릭하여 그리기를 완료하면 타일 범위(빨간색 직사각형 부분)가 자동으로 계산됩니다.

"다운로드"를 클릭하여 다운로드 정보 인터페이스를 열고 다운로드하려는 레벨을 확인하세요.

다운로드를 클릭하면 정보 프롬프트 상자가 나타납니다.

다운로드를 시작하고 다운로드가 완료될 때까지 기다립니다.

다운로드가 완료되었습니다. 압축된 패키지를 열어 타일을 확인하세요.

핵심 코드

 function lon2tile ( 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 ) ) ) ;
}

function download ( ) {
  const latlngMin = toLonLat ( [ rect . value [ 0 ] , rect . value [ 3 ] ] ) ;
  const latlngMax = toLonLat ( [ rect . value [ 2 ] , rect . value [ 1 ] ] ) ;

  const list = [ ] ;
  for ( let z = 0 ; z < 20 ; z ++ ) {
    const xMin = lon2tile ( latlngMin [ 0 ] , z ) ;
    const yMin = lat2tile ( latlngMin [ 1 ] , z ) ;
    const xMax = lon2tile ( latlngMax [ 0 ] , z ) ;
    const yMax = lat2tile ( latlngMax [ 1 ] , z ) ;

    if ( zoomMap . value [ z ] ) {
      for ( let x = xMin ; x <= xMax ; x ++ ) {
        for ( let y = yMin ; y <= yMax ; y ++ ) {
          list . push ( { x , y , z } ) ;
        }
      }
    }
  }
  downloadTiles ( list ) ;
}

async function downloadTiles ( list ) {
  isLoading . value = true ;
  const total = list . length ;
  let count = 0 ;
  let zip = new JSZip ( ) ;
  for ( let i = 0 ; i < list . length ; i += 6 ) {
    let promises = [ ] ;
    if ( i + 6 > list . length ) {
      promises = list . slice ( i , list . length ) . map ( async ( item ) => {
        const blob = await downloadTile ( item . x , item . y , item . z )
        zip . file ( ` ${ item . z } / ${ item . y } / ${ item . x } .png` , blob ) ;
        count ++ ;
        process . value = ( ( count / total ) * 100 ) . toFixed ( 2 ) ;
      } ) ;
    } else {
      promises = list . slice ( i , i + 6 ) . map ( async ( item ) => {
        const blob = await downloadTile ( item . x , item . y , item . z )
        zip . file ( ` ${ item . z } / ${ item . y } / ${ item . x } .png` , blob ) ;
        count ++ ;
        process . value = ( ( count / total ) * 100 ) . toFixed ( 2 ) ;
      } ) ;
    }
    await Promise . all ( promises ) ;
  }
}

function downloadTile ( x , y , z ) {
  return new Promise ( ( resolve , reject ) => {
    fetch ( url . value . replace ( '{x}' , x ) . replace ( '{y}' , y ) . replace ( '{z}' , z ) )
      . then ( ( res ) => res . blob ( ) )
      . then ( ( blob ) => {
        resolve ( blob ) ;
      } )
      . catch ( ( err ) => {
        reject ( err ) ;
      } ) ;
  } ) ;
}