オンライン地図のダウンロード

テクノロジーの選択

Vue3 + エレメントプラス + jszip + OpenLayers

このプロジェクトの UI 部分は、プロジェクト xiaolidan00/offline-map-download: 純粋なフロントエンド オフライン タイル マップ ダウンロード (github.com) UI の変更に基づいています。

使用

このプロジェクトのオンライン アドレスは次のとおりです: オンライン タイル マップのダウンロード

Web サイトを開き、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 ) ;
      } ) ;
  } ) ;
}

ウェブサイトの展開

GitHub Actions と GitHub Pages を使用して、この Vue3 プロジェクトをパッケージ化してデプロイします

具体的な手順については、「GitHub Actions と GitHub ページを使用してフロントエンド プロジェクトの自動パッケージ化とデプロイメントを実装する - そのとき、Zeng Zhaocaiyun に明るい月が戻った - Blog Park (cnblogs.com)」を参照してください。

このプロジェクトの GitHub アドレスは次のとおりです: zhnny/online-map-download: XYZ マップ タイルをオンラインでダウンロードします (github.com)

このプロジェクトのオンライン アドレスは次のとおりです: オンライン タイル マップのダウンロード