Vue3 + element-plus + jszip + OpenLayers
The UI part of this project is based on the project: xiaolidan00/offline-map-download: pure front-end offline tile map download (github.com) UI modification
The online address of this project is: Online tile map download
Open the website, enter the address of the XYZ tile (the default is ArcGIS's online remote sensing image), and then click Load Tile
Click "Draw Range", then start drawing the polygon, double-click to complete the drawing, and automatically calculate the tile range (red rectangular part)
Click "Download" to open the download information interface and check the level you want to download.
Click download and an information prompt box will pop up.
Start downloading and wait for download to complete
Download is complete, open the compressed package to view the tiles
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 ) ;
} ) ;
} ) ;
}
Use GitHub Actions and GitHub Pages to package and deploy this Vue3 project
For specific steps, please refer to: Using GitHub Actions and GitHub pages to implement automatic packaging and deployment of front-end projects - At that time, the bright moon returned in Zeng Zhaocaiyun - Blog Park (cnblogs.com)
The GitHub address of this project is: zhnny/online-map-download: Download XYZ map tiles online (github.com)
The online address of this project is: Online tile map download