онлайн загрузка карты

Выбор технологии

Vue3 + element-plus + jszip + OpenLayers

Часть пользовательского интерфейса этого проекта основана на проекте: xiaolidan00/offline-map-download: Загрузка автономной карты плиток чистого внешнего интерфейса (github.com). Модификация пользовательского интерфейса.

использовать

Интернет-адрес этого проекта: онлайн-загрузка тайловой карты.

Откройте веб-сайт, введите адрес плитки 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 ) ;
      } ) ;
  } ) ;
}

Развертывание веб-сайта

Используйте действия GitHub и страницы GitHub для упаковки и развертывания этого проекта Vue3.

Конкретные шаги см. в разделе Использование действий GitHub и страниц GitHub для реализации автоматической упаковки и развертывания интерфейсных проектов. В это время в Цзэн Чжаокайюнь вернулась яркая луна — Парк блогов (cnblogs.com).

Адрес этого проекта на GitHub: zhnny/online-map-download: Загрузите фрагменты карты XYZ онлайн (github.com).

Интернет-адрес этого проекта: онлайн-загрузка тайловой карты.