تحميل الخريطة على الانترنت

اختيار التكنولوجيا

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 Actions وGitHub Pages لحزم ونشر مشروع Vue3 هذا

للحصول على خطوات محددة، يرجى الرجوع إلى: استخدام إجراءات GitHub وصفحات GitHub لتنفيذ التعبئة التلقائية ونشر مشاريع الواجهة الأمامية - في ذلك الوقت، عاد القمر الساطع إلى Zeng Zhaocaiyun - Blog Park (cnblogs.com)

عنوان GitHub لهذا المشروع هو: zhnny/online-map-download: تنزيل مربعات خرائط XYZ عبر الإنترنت (github.com)

العنوان الإلكتروني لهذا المشروع هو: تنزيل خريطة البلاط عبر الإنترنت