pengunduhan peta online

Pemilihan teknologi

Vue3 + elemen-plus + jszip + OpenLayers

Bagian UI dari proyek ini didasarkan pada proyek: xiaolidan00/offline-map-download: Unduhan peta ubin offline front-end murni (github.com) Modifikasi UI

menggunakan

Alamat online proyek ini adalah: Unduhan peta ubin online

Buka situs web, masukkan alamat ubin XYZ (defaultnya adalah gambar penginderaan jauh online ArcGIS), lalu klik Muat Ubin

Klik "Draw Range", lalu mulai menggambar poligon, klik dua kali untuk menyelesaikan gambar, dan secara otomatis menghitung rentang ubin (bagian persegi panjang merah)

Klik "Unduh" untuk membuka antarmuka informasi unduhan dan periksa level yang ingin Anda unduh.

Klik unduh dan kotak prompt informasi akan muncul.

Mulailah mengunduh dan tunggu hingga unduhan selesai

Pengunduhan selesai, buka paket terkompresi untuk melihat ubin

kode inti

 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 ) ;
      } ) ;
  } ) ;
}

Penerapan situs web

Gunakan Tindakan GitHub dan Halaman GitHub untuk mengemas dan menerapkan proyek Vue3 ini

Untuk langkah spesifiknya, silakan merujuk ke: Menggunakan Tindakan GitHub dan halaman GitHub untuk mengimplementasikan pengemasan otomatis dan penerapan proyek front-end - Pada saat itu, bulan cerah kembali di Zeng Zhaocaiyun - Blog Park (cnblogs.com)

Alamat GitHub proyek ini adalah: zhnny/online-map-download: Unduh ubin peta XYZ online (github.com)

Alamat online proyek ini adalah: Unduhan peta ubin online