خرائط Leaflet باستخدام إجراءات Svelte
هيّئ مثيل خريطة Leaflet وتحكّم فيه عبر إجراء Svelte.
خرائط Leaflet باستخدام إجراءات Svelte درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
لماذا Leaflet
Leaflet مكتبة خرائط صغيرة وناضجة ومفتوحة المصدر، وتعمل جيدًا مع Svelte.
التثبيت
أضف Leaflet وملف CSS الخاص بها.
npm install leaflet
@import "leaflet/dist/leaflet.css";نمط الإجراء
غلّف تهيئة Leaflet داخل إجراء Svelte.
export function leafletMap(node, options) {
const map = L.map(node).setView(options.center, options.zoom);
L.tileLayer("https://...{z}/{x}/{y}.png").addTo(map);
return { destroy() { map.remove(); } };
}الاستخدام في المكون
طبّق الإجراء على عنصر div.
<div use:leafletMap={{ center: [40, 30], zoom: 12 }} style="height: 400px;" />التحديث
أعد دالة update للتفاعل مع تغييرات المعلمات.
update(newOptions) { map.setView(newOptions.center, newOptions.zoom); }العلامات
أضف العلامات برمجيًا أو داخل مكوّن فرعي في Svelte يشارك السياق.
التنظيف
استدعِ map.remove() دائمًا في destroy لتحرير الموارد.
ملاحظة حول SSR
يستخدم Leaflet كائنَي window وdocument. احمِ الاستخدام باستخدام onMount أو اضبط ssr = false.
موفرو البلاطات
اختر موفرين مثل OpenStreetMap أو Mapbox أو Stadia للبلاطات.
الأداء
عند التعامل مع عدد كبير من العلامات، استخدم إضافات التجميع.
غلاف المكون
غلّف الإجراء داخل مكوّن لإنشاء خرائط قابلة لإعادة الاستخدام وتغيير المعلمات.
تحقق سريع
لماذا نستخدم إجراءً مع Leaflet؟
مراجعة
غلّف Leaflet في إجراء Svelte: هيّئه عند التركيب، وتفاعل عبر update، ونظّفه في destroy. تجنب SSR عند الوصول إلى window.
الأسئلة الشائعة
هل درس «خرائط Leaflet باستخدام إجراءات Svelte» مجاني؟
نعم — نص درس «خرائط Leaflet باستخدام إجراءات Svelte» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «خرائط Leaflet باستخدام إجراءات Svelte»؟
هيّئ مثيل خريطة Leaflet وتحكّم فيه عبر إجراء Svelte. تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «خرائط Leaflet باستخدام إجراءات Svelte»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- استخدام Tailwind CSS مع SvelteKit
- مخططات D3.js في Svelte
- خرائط Leaflet باستخدام إجراءات Svelte
- محرّرات النصوص المنسّقة: Tiptap