Online-Karten-Download

Technologieauswahl

Vue3 + element-plus + jszip + OpenLayers

Der UI-Teil dieses Projekts basiert auf dem Projekt: xiaolidan00/offline-map-download: Reine Front-End-Offline-Kachelkarten-Download (github.com) UI-Änderung

verwenden

Die Online-Adresse dieses Projekts lautet: Online-Kachelkarten-Download

Öffnen Sie die Website, geben Sie die Adresse der XYZ-Kachel ein (standardmäßig ist das Online-Fernerkundungsbild von ArcGIS) und klicken Sie dann auf Kachel laden

Klicken Sie auf „Bereich zeichnen“, beginnen Sie dann mit dem Zeichnen des Polygons, doppelklicken Sie, um die Zeichnung abzuschließen, und berechnen Sie automatisch den Kachelbereich (roter rechteckiger Teil).

Klicken Sie auf „Herunterladen“, um die Download-Informationsoberfläche zu öffnen und die Stufe zu überprüfen, die Sie herunterladen möchten.

Klicken Sie auf „Herunterladen“. Daraufhin wird ein Informationsfeld angezeigt.

Starten Sie den Download und warten Sie, bis der Download abgeschlossen ist

Der Download ist abgeschlossen. Öffnen Sie das komprimierte Paket, um die Kacheln anzuzeigen

Kerncode

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

Website-Bereitstellung

Verwenden Sie GitHub Actions und GitHub Pages, um dieses Vue3-Projekt zu packen und bereitzustellen

Spezifische Schritte finden Sie unter: Verwenden von GitHub-Aktionen und GitHub-Seiten zum Implementieren der automatischen Verpackung und Bereitstellung von Front-End-Projekten – Zu dieser Zeit kehrte der helle Mond in Zeng Zhaocaiyun zurück – Blog Park (cnblogs.com)

Die GitHub-Adresse dieses Projekts lautet: zhnny/online-map-download: XYZ-Kartenkacheln online herunterladen (github.com)

Die Online-Adresse dieses Projekts lautet: Online-Kachelkarten-Download