descarga de mapas en línea

Selección de tecnología

Vue3 + elemento-plus + jszip + OpenLayers

La parte de la interfaz de usuario de este proyecto se basa en el proyecto: xiaolidan00/offline-map-download: descarga pura de mapas de mosaicos sin conexión de front-end (github.com) Modificación de la interfaz de usuario

usar

La dirección en línea de este proyecto es: Descarga de mapas de mosaicos en línea

Abra el sitio web, ingrese la dirección del mosaico XYZ (el valor predeterminado es la imagen de detección remota en línea de ArcGIS) y luego haga clic en Cargar mosaico

Haga clic en "Dibujar rango", luego comience a dibujar el polígono, haga doble clic para completar el dibujo y calcule automáticamente el rango del mosaico (parte rectangular roja)

Haga clic en "Descargar" para abrir la interfaz de información de descarga y verifique el nivel que desea descargar.

Haga clic en descargar y aparecerá un cuadro de información.

Comience a descargar y espere a que se complete la descarga.

La descarga está completa, abra el paquete comprimido para ver los mosaicos

código central

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

Implementación del sitio web

Utilice GitHub Actions y GitHub Pages para empaquetar e implementar este proyecto Vue3

Para conocer pasos específicos, consulte: Uso de acciones de GitHub y páginas de GitHub para implementar el empaquetado y la implementación automáticos de proyectos front-end - En ese momento, la luna brillante regresó a Zeng Zhaocaiyun - Blog Park (cnblogs.com)

La dirección de GitHub de este proyecto es: zhnny/online-map-download: descargue mosaicos de mapas XYZ en línea (github.com)

La dirección en línea de este proyecto es: Descarga de mapas de mosaicos en línea