ดาวน์โหลดแผนที่ออนไลน์

การเลือกใช้เทคโนโลยี

Vue3 + องค์ประกอบบวก + jszip + OpenLayers

ส่วน UI ของโครงการนี้ขึ้นอยู่กับโครงการ: xiaolidan00/offline-map-download: ดาวน์โหลดแผนที่ไทล์ออฟไลน์แบบส่วนหน้าล้วน (github.com) การปรับเปลี่ยน UI

ใช้

ที่อยู่ออนไลน์ของโครงการนี้คือ: ดาวน์โหลดแผนที่ภาคพื้นออนไลน์

เปิดเว็บไซต์ ป้อนที่อยู่ของไทล์ 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 Actions และ GitHub Pages เพื่อจัดทำแพ็กเกจและปรับใช้โปรเจ็กต์ Vue3 นี้

สำหรับขั้นตอนเฉพาะ โปรดดูที่: การใช้หน้า GitHub Actions และ GitHub เพื่อจัดทำแพ็กเกจอัตโนมัติและการปรับใช้โปรเจ็กต์ส่วนหน้า - ในเวลานั้น พระจันทร์อันสดใสกลับมาใน Zeng Zhaocaiyun - Blog Park (cnblogs.com)

ที่อยู่ GitHub ของโครงการนี้คือ: zhnny/online-map-download: ดาวน์โหลดแผ่นแผนที่ XYZ ออนไลน์ (github.com)

ที่อยู่ออนไลน์ของโครงการนี้คือ: ดาวน์โหลดแผนที่ภาคพื้นออนไลน์