الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

خريطة البلاط مقارنة

حالة البناء

تطبيق ويب مكون من صفحة واحدة لمقارنة طبقة التجانب بطبقة القمر الصناعي الخلفية.

تجريبي

خريطة البلاط مقارنة demo.mp4

أمثلة حية

  • ادنبره، اسكتلندا
  • ادنبره، اسكتلندا (عند الشفق)
  • بروكسبيرن، اسكتلندا
  • كيتلمير، هولندا
  • ماركر وادن، هولندا
  • كوبلنز، ألمانيا
  • الحدود بين ألمانيا وهولندا

تثبيت التطبيق

بعد استنساخ هذا المستودع، قم بتشغيل: 

$ cd map-tile-compare
$ npm install
$ npm run build
$ npm run serve

يجب أن يؤدي هذا إلى تشغيل خادم مضيف محلي، عادةً http://localhost:5000 .

لكي يتم تحميل الصفحة، ستحتاج إلى إلحاق عنوان URL بملف التكوين إلى عنوان URL. 

 http://localhost:5000/#https://example.com/path/to/config.json

إنشاء تكوين الخريطة

بيانات الخريطة عبارة عن سلسلة JSON مضغوطة مخزنة في تجزئة عنوان URL.

قم باستضافة ملف JSON التالي على موقع ويب وقم بتحديث كل خاصية حسب اختيارك: 

{
  "name" : " London " ,
  "beforeStyle" : " mapbox://styles/mapboxUsername/styleId " ,
  "beforeStyleAccessToken" : " xx.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxx-xxxxxxxx " ,
  "beforeStyleBeforeLayerId" : " tunnel-street-minor-low " ,
  "sourceTiles" : " https://example.com/tiles/{z}/{x}/{y}.png " ,
  "sourceTileScheme" : " tms " ,
  "sourceTileSize" : 256 ,
  "sourceMinZoom" : 9 ,
  "sourceMaxZoom" : 15 ,
  "sourceBounds" : [ -0.234 , 51.454 , -0.025 , 51.562 ],
  "referencePhotoImageUrl" : " https://example.com/previewImage.jpg "
}

ويوضح الجدول أدناه معنى كل خاصية:

ملكية وصف
name اسم الخريطة. يتم عرض هذا على شاشة البداية.
beforeStyle عنوان URL لنمط صندوق الخريطة للخريطة "قبل"، وعادةً ما يكون نمط "القمر الصناعي".
beforeStyleAccessToken رمز وصول Mapbox لنمط الخريطة "قبل".
beforeStyleBeforeLayerId معرف الطبقة داخل نمط الخريطة "قبل" حيث تريد إدراج طبقة الخريطة "بعد". عادةً ما تكون هذه هي الطبقة الموجودة مباشرة فوق الطبقة النقطية.
sourceTiles عنوان URL لمربعات الخريطة الخاصة بك.
sourceTileScheme مخطط مربعات الخريطة الخاصة بك. إما "xyz" أو "tms" .
sourceTileSize حجم صورة مربعات الخريطة بالبكسل.
sourceMinZoom الحد الأدنى لمستوى التكبير/التصغير لبلاطات الخريطة.
sourceMaxZoom الحد الأقصى لمستوى التكبير/التصغير لبلاطات خريطتك.
sourceBounds المربع المحيط ببلاطات الخريطة. بالترتيب: خط الطول الأيسر، خط العرض السفلي، خط الطول الأيمن، خط العرض العلوي.
referencePhotoImageUrl عنوان URL لصورة المعاينة المراد عرضها قبل تحميل الخريطة.

بعد إنشاء JSON، لديك خياران:

  • قم بتخزين JSON على مضيف خارجي.
  • قم بتخزين ملف JSON في الدليل public/ وقم بتشغيل npm run build . يمكن بعد ذلك الوصول إلى الملف عبر http://localhost:5000/yourConfig.json .

احصل على عنوان URL لـ JSON وألحقه بعنوان URL لمضيف التطبيق. 

 http://locahost:5000/#http://localhost/5000/config.json

تطوير 

$ npm run dev

فحص 

$ npm run lint

الاختبارات

لتشغيل الاختبارات الشاملة، قم بتشغيل وحدة تحكم واحدة: 

$ npm run build:test
$ npm run serve

build:test على إنشاء التطبيق باستخدام خرائط المصدر، مما سيسمح بتغطية التعليمات البرمجية لاحقًا.

ثم في وحدة تحكم مختلفة، قم بتشغيل: 

$ export CYPRESS_MAP_TILE_COMPARE_HOST= ' http://localhost:5000/ '
$ npm run test:e2e

سيتم إنشاء تغطية الكود تلقائيًا، ويمكن مشاهدتها في coverage/ .

لرؤية اختبارات السرو قيد التشغيل فعليًا في المتصفح، قم بتشغيل: 

$ npx cypress open
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل