online map download下載中心 - online map download原始碼下載

online map download

其他源碼

下載

技術選型

Vue3 + element-plus + 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 ) ;
      } ) ;
  } ) ;
}