téléchargement de carte en ligne

Sélection technologique

Vue3 + élément-plus + jszip + OpenLayers

La partie UI de ce projet est basée sur le projet : xiaolidan00/offline-map-download : Téléchargement de cartes de tuiles hors ligne frontale pure (github.com) Modification de l'interface utilisateur

utiliser

L'adresse en ligne de ce projet est : Téléchargement de la carte des tuiles en ligne

Ouvrez le site Web, entrez l'adresse de la vignette XYZ (la valeur par défaut est l'image de télédétection en ligne d'ArcGIS), puis cliquez sur Charger la vignette.

Cliquez sur "Dessiner la plage", puis commencez à dessiner le polygone, double-cliquez pour terminer le dessin et calculez automatiquement la plage de tuiles (partie rectangulaire rouge).

Cliquez sur "Télécharger" pour ouvrir l'interface d'informations de téléchargement et vérifier le niveau que vous souhaitez télécharger.

Cliquez sur Télécharger et une boîte de dialogue d'information apparaîtra.

Commencez le téléchargement et attendez la fin du téléchargement

Le téléchargement est terminé, ouvrez le package compressé pour afficher les vignettes

code de base

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

Déploiement de sites Web

Utilisez GitHub Actions et GitHub Pages pour empaqueter et déployer ce projet Vue3

Pour des étapes spécifiques, veuillez vous référer à : Utilisation des actions GitHub et des pages GitHub pour implémenter le packaging et le déploiement automatiques de projets front-end - À cette époque, la lune brillante est revenue à Zeng Zhaocaiyun - Blog Park (cnblogs.com)

L'adresse GitHub de ce projet est : zhnny/online-map-download : Téléchargez les tuiles de carte XYZ en ligne (github.com)

L'adresse en ligne de ce projet est : Téléchargement de la carte des tuiles en ligne