إضافة خريطة ثلاثية الأبعاد إلى تطبيقك

اختيار النظام الأساسي: Android iOS JavaScript

خرائط أساسية لسياتل وسان فرانسيسكو وباريس

توضِّح هذه الصفحة مثالاً على كيفية إضافة خريطة ثلاثية الأبعاد أساسية إلى تطبيق iOS باستخدام حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" الثلاثية الأبعاد لأجهزة iOS. تفترض التعليمات الواردة في هذه الصفحة أنّك سبق أن اكتملت الخطوات الواردة في صفحة الإعداد وأنّ لديك ما يلي:

  • مشروع على Google Cloud تم تفعيل حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" الثلاثية الأبعاد لأجهزة iOS فيه
  • مفتاح واجهة برمجة التطبيقات لحزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" الثلاثية الأبعاد لأجهزة iOS
  • الإصدار 16.0 من Xcode أو إصدار أحدث مع حزمة "حزمة تطوير البرامج بالاستناد إلى بيانات خرائط Google الثلاثية الأبعاد لأجهزة iOS" المُضافة

لمزيد من المعلومات عن المتطلبات الأساسية هذه، يُرجى الاطّلاع على الإعداد.

اتّباع درس تطبيقي أكثر تقدّمًا حول الترميز

يمكنك الاطّلاع على المزيد من نماذج الرموز البرمجية على GitHub.

الجزء 1: إنشاء تطبيق SwiftUI أساسي

  1. أنشئ تطبيقًا جديدًا في Xcode.
  2. اضبط اسم المنتج على Hello3DWorld، مع ضبط معرّف المؤسسة على com.example. يجب أن يكون اسم الحزمة com.example.Hello3DWorld.
  3. اختَر واجهة SwiftUI.
  4. أضِف مكتبة "خرائط Google" الثلاثية الأبعاد إلى تطبيقك. اطّلِع على التعليمات في ملف الإعدادات.

الجزء 2: إضافة خريطة

خريطة ثلاثية الأبعاد بسيطة لتضاريس سطح Earth

  1. افتح الملف الذي يُسمى ContentView.swift. هذه هي نقطة الدخول وأحد مسارَي التنقّل الرئيسيَين في تطبيقك.

  2. استورِد SwiftUI وحزمة GoogleMaps3D.

  3. استبدِل كل الرمز البرمجي داخل بيان النص الأساسي بـ Map(mode: .hybrid).

    الحد الأدنى من الإعدادات الأولية التي يجب تقديمها لبدء Map هو MapMode:

    • ‎.hybrid
    • ‎.satellite

    من المفترض أن يظهر ملف ContentView.swift على النحو التالي:

    import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  var body: some View {
    Map(mode: .hybrid)
  }
}

#Preview {
  ContentView()
}

الجزء 3: ضبط مفتاح واجهة برمجة التطبيقات

  1. يجب ضبط مفتاح واجهة برمجة التطبيقات قبل بدء تشغيل "الخريطة". يمكنك إجراء ذلك من خلال ضبط Map.apiKey في معالج الحدث init() للعنصر View الذي يحتوي على Map.

    .
    import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }

  var body: some View {
    Map(mode: .hybrid)
  }
}

الجزء 4: استخدام كاميرا للتحكّم في عرض الخريطة

يتم التحكّم في طرق عرض الخريطة الثلاثية الأبعاد من خلال فئة Camera. في هذه الخطوة، ستتعرّف على كيفية تحديد الموقع الجغرافي والارتفاع والاتجاه والإمالة والدوران والنطاق لأجل تخصيص عرض الخريطة.

  1. غيِّر طلب استدعاء الدالة Map() لتضمين سمة initialCamera. اضبط initialCamera لعرض منظر لوسط مدينة مانهاتن.

    import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }
  var body: some View {
    Map(initialCamera: .init(
      latitude: 40.748339,
      longitude: -73.985912,
      altitude: 211.1,
      heading: 52,
      tilt: 68,
      range: 1039
    ), mode: .hybrid)
  }
}

يضبط الرمز أعلاه قيمًا لهذه المَعلمات:

  • heading: الاتجاه بالدرجات من الشمال لتوجيه الكاميرا نحوه
  • ‫tilt: زاوية الإمالة بالدرجات، حيث تكون القيمة 0 فوق الرأس مباشرةً و90 عند النظر بشكل أفقي
  • roll: زاوية الدوران حول المستوى العمودي للكاميرا، بالقياس بال درجات
  • range: المسافة بوحدة المتر بين الكاميرا وموقع خط العرض وخط الطول
  • altitude: ارتفاع الكاميرا فوق مستوى سطح البحر

في حال عدم تقديم أيّ من هذه المَعلمات الإضافية، سيتم استخدام قيمة تلقائية.

لعرض المزيد من البيانات الثلاثية الأبعاد في عرض الكاميرا، اضبط المَعلمات الأولية لعرض عرض أقرب ومائل.

الجزء 6: معاينة تطبيقك وتشغيله

خريطة ثلاثية الأبعاد أساسية لمدينة نيويورك

  1. إضافة معاينة Xcode

    المعاينات هي ميزة فعّالة في XCode تتيح لك الاطّلاع على تطبيقك والتفاعل معه بدون الحاجة إلى استخدام المحاكي أو جهاز خارجي.

    لإضافة معاينة، أضِف مجموعة رموز #Preview {} خارج البنية.

    #Preview {
  CameraDemo()
}

  2. تشغيل التطبيق

أنشئ التطبيق وشغِّله.

تهانينا!

لقد أضفت خريطة ثلاثية الأبعاد إلى تطبيق بنجاح.

بعد ذلك، يمكنك استكشاف ميزات أكثر تقدمًا من حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" الثلاثية الأبعاد لأجهزة iOS، مثل مؤثرات رسوم متحركة لمسار الكاميرا أو علامات ثلاثية الأبعاد أو أشكال هندسية متعددة الأضلاع.