SwiftUI দিয়ে আপনার প্রথম 3D মানচিত্র তৈরি করুন

1. আপনি শুরু করার আগে

এই কোডল্যাব আপনাকে শেখায় কিভাবে iOS এর জন্য Maps 3D SDK ব্যবহার করে SwiftUI এ একটি 3D মানচিত্র অ্যাপ তৈরি করতে হয়।

আপনি শিখবেন:

• অবস্থানগুলি দেখতে এবং মানচিত্রের চারপাশে উড়তে কীভাবে ক্যামেরা নিয়ন্ত্রণ করবেন।
• মার্কার এবং মডেল কিভাবে যোগ করতে হয়
• কিভাবে লাইন এবং বহুভুজ আঁকতে হয়
• প্লেস মার্কারগুলিতে ব্যবহারকারীর ক্লিকগুলি কীভাবে পরিচালনা করবেন।

পূর্বশর্ত

• বিলিং সক্ষম সহ একটি Google কনসোল প্রকল্প৷
• একটি API কী, ঐচ্ছিকভাবে iOS এর জন্য Maps 3D SDK-এ সীমাবদ্ধ৷
• SwiftUI এর সাথে iOS উন্নয়নের প্রাথমিক জ্ঞান।

আপনি কি করবেন

• Xcode সেট আপ করুন এবং Swift Package Manager ব্যবহার করে SDK আনুন৷
• একটি API কী ব্যবহার করতে আপনার অ্যাপ কনফিগার করুন
• আপনার অ্যাপে একটি মৌলিক 3D মানচিত্র যোগ করুন
• নির্দিষ্ট স্থানে এবং আশেপাশে উড়তে ক্যামেরা নিয়ন্ত্রণ করুন
• আপনার মানচিত্রে চিহ্নিতকারী, লাইন, বহুভুজ এবং মডেল যোগ করুন

আপনি কি প্রয়োজন হবে

• Xcode 15 বা তার পরে।

2. সেট আপ করুন

নিম্নলিখিত সক্রিয়করণ পদক্ষেপের জন্য, আপনাকে iOS এর জন্য মানচিত্র 3D SDK সক্ষম করতে হবে৷

Google Maps প্ল্যাটফর্ম সেট আপ করুন

আপনার যদি ইতিমধ্যেই একটি Google ক্লাউড প্ল্যাটফর্ম অ্যাকাউন্ট না থাকে এবং বিলিং সক্ষম করা একটি প্রকল্প থাকে, তাহলে অনুগ্রহ করে একটি বিলিং অ্যাকাউন্ট এবং একটি প্রকল্প তৈরি করতে Google মানচিত্র প্ল্যাটফর্মের সাথে শুরু করা নির্দেশিকাটি দেখুন৷

1. ক্লাউড কনসোলে , প্রকল্পের ড্রপ-ডাউন মেনুতে ক্লিক করুন এবং এই কোডল্যাবের জন্য আপনি যে প্রকল্পটি ব্যবহার করতে চান সেটি নির্বাচন করুন।

2. Google ক্লাউড মার্কেটপ্লেসে এই কোডল্যাবের জন্য প্রয়োজনীয় Google মানচিত্র প্ল্যাটফর্ম API এবং SDK সক্ষম করুন৷ এটি করতে, এই ভিডিও বা এই ডকুমেন্টেশনের ধাপগুলি অনুসরণ করুন৷
3. ক্লাউড কনসোলের শংসাপত্র পৃষ্ঠায় একটি API কী তৈরি করুন। আপনি এই ভিডিও বা এই ডকুমেন্টেশনের ধাপগুলি অনুসরণ করতে পারেন। Google মানচিত্র প্ল্যাটফর্মের সমস্ত অনুরোধের জন্য একটি API কী প্রয়োজন৷

iOS এর জন্য মানচিত্র 3D SDK সক্ষম করুন৷

আপনি কনসোলে Google মানচিত্র প্ল্যাটফর্ম > API এবং পরিষেবা মেনু লিঙ্ক ব্যবহার করে iOS এর জন্য Maps 3D SDK খুঁজে পেতে পারেন।

আপনার নির্বাচিত প্রকল্পে API সক্ষম করতে সক্ষম ক্লিক করুন।

3. একটি মৌলিক SwiftUI অ্যাপ তৈরি করুন

দ্রষ্টব্য: আপনি GitHub-এ কোডল্যাব নমুনা অ্যাপ রেপোতে প্রতিটি ধাপের জন্য সমাধান কোড খুঁজে পেতে পারেন।

এক্সকোডে একটি নতুন অ্যাপ তৈরি করুন।

এই ধাপের কোড GitHub-এ GoogleMaps3DDemo ফোল্ডারে পাওয়া যাবে।

Xcode খুলুন এবং একটি নতুন অ্যাপ তৈরি করুন। SwiftUI নির্দিষ্ট করুন।

একটি প্যাকেজ নাম com.example.GoogleMaps3DDemo সহ আপনার অ্যাপ GoogleMaps3DDemo কল করুন।

আপনার প্রকল্পে GoogleMaps3D লাইব্রেরি আমদানি করুন

সুইফট প্যাকেজ ম্যানেজার ব্যবহার করে আপনার প্রোজেক্টে SDK যোগ করুন।

আপনার Xcode প্রকল্প বা কর্মক্ষেত্রে, ফাইল > প্যাকেজ নির্ভরতা যোগ করুন এ যান। URL হিসেবে https://github.com/googlemaps/ios-maps-3d-sdk লিখুন, প্যাকেজ টানতে এন্টার টিপুন এবং "প্যাকেজ যোগ করুন" এ ক্লিক করুন।

প্যাকেজ পণ্য চয়ন করুন উইন্ডো থেকে, যাচাই করুন যে GoogleMaps3D আপনার মনোনীত প্রধান লক্ষ্যে যোগ করা হবে। সম্পূর্ণ হয়ে গেলে Add Package এ ক্লিক করুন।

আপনার ইনস্টলেশন যাচাই করতে, আপনার লক্ষ্যের সাধারণ ফলকে নেভিগেট করুন। ফ্রেমওয়ার্ক, লাইব্রেরি এবং এমবেডেড সামগ্রীতে, আপনি ইনস্টল করা প্যাকেজগুলি দেখতে পাবেন। আপনি প্যাকেজ এবং এর সংস্করণ যাচাই করতে প্রজেক্ট নেভিগেটরের প্যাকেজ নির্ভরতা বিভাগটিও দেখতে পারেন।

আপনার API কী যোগ করুন

আপনি অ্যাপে আপনার API কী হার্ড কোড করতে পারেন, কিন্তু এটি ভাল অনুশীলন নয়। একটি কনফিগারেশন ফাইল যোগ করা আপনাকে আপনার API কী গোপন রাখতে দেয় এবং এটিকে উৎস নিয়ন্ত্রণে চেক করা এড়িয়ে যায়।

প্রোজেক্ট রুট ফোল্ডারে একটি নতুন কনফিগারেশন ফাইল তৈরি করুন

Xcode এ, নিশ্চিত করুন যে আপনি প্রজেক্ট এক্সপ্লোরার উইন্ডোটি দেখছেন। প্রজেক্ট রুট রাইট-ক্লিক করুন এবং "টেমপ্লেট থেকে নতুন ফাইল" নির্বাচন করুন। যতক্ষণ না আপনি "কনফিগারেশন সেটিংস ফাইল" দেখতে পান ততক্ষণ স্ক্রোল করুন। এটি নির্বাচন করুন এবং "পরবর্তী" ক্লিক করুন। Config.xcconfig ফাইলটির নাম দিন এবং নিশ্চিত করুন যে প্রকল্প রুট ফোল্ডারটি নির্বাচন করা হয়েছে। ফাইলটি তৈরি করতে "তৈরি করুন" এ ক্লিক করুন।

সম্পাদকে, কনফিগারেশন ফাইলে নিম্নরূপ একটি লাইন যোগ করুন: MAPS_API_KEY = YOUR_API_KEY

আপনার API কী দিয়ে YOUR_API_KEY প্রতিস্থাপন করুন।

Info.plist এ এই সেটিং যোগ করুন।

এটি করতে, প্রকল্পের মূল নির্বাচন করুন এবং "তথ্য" ট্যাবে ক্লিক করুন।

$(MAPS_API_KEY) এর মান সহ MAPS_API_KEY নামে একটি নতুন সম্পত্তি যোগ করুন।

নমুনা অ্যাপ কোডে একটি Info.plist ফাইল রয়েছে যা এই বৈশিষ্ট্যটি নির্দিষ্ট করে।

একটি মানচিত্র যোগ করুন

GoogleMaps3DDemoApp.swift নামে ফাইলটি খুলুন। এটি আপনার অ্যাপের প্রবেশ বিন্দু এবং প্রধান নেভিগেশন।

এটি ContentView() কল করে যা একটি হ্যালো ওয়ার্ল্ড বার্তা দেখায়।

সম্পাদকে ContentView.swift খুলুন।

GoogleMaps3D এর জন্য একটি import বিবৃতি যোগ করুন।

var body: some View {} কোড ব্লক। body ভিতরে একটি নতুন Map() ঘোষণা করুন।

একটি Map আরম্ভ করার জন্য আপনাকে যে ন্যূনতম কনফিগারেশন প্রয়োজন তা হল একটি MapMode । এটির দুটি সম্ভাব্য মান রয়েছে:

• .hybrid - রাস্তা এবং লেবেল সহ স্যাটেলাইট ছবি, বা
• .satellite - শুধুমাত্র স্যাটেলাইট ছবি।

.hybrid নির্বাচন করুন।

আপনার ContentView.swift ফাইলটি এইরকম হওয়া উচিত।

import GoogleMaps3D
import SwiftUI

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

আপনার API কী সেট করুন।

ম্যাপ আরম্ভ করার আগে API কী সেট করা আবশ্যক।

আপনি মানচিত্র ধারণকারী যেকোনো View এর init() ইভেন্ট হ্যান্ডলারে Map.apiKey সেট করে এটি করতে পারেন। আপনি এটিকে ContentView() কল করার আগে GoogleMaps3DDemoApp.swift এ সেট করতে পারেন।

GoogleMaps3DDemoApp.swift এ, WindowGroup এর onAppear ইভেন্ট হ্যান্ডলারে Map.apiKey সেট করুন।

কনফিগার ফাইল থেকে আপনার API কী আনুন

আপনার কনফিগারেশন ফাইলে তৈরি করা MAPS_API_KEY সেটিং অ্যাক্সেস করতে Bundle.main.infoDictionary ব্যবহার করুন।

import GoogleMaps3D
import SwiftUI

@main
struct GoogleMaps3DDemoApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
    .onAppear {
      guard let infoDictionary: [String: Any] = Bundle.main.infoDictionary else {
        fatalError("Info.plist not found")
      }
      guard let apiKey: String = infoDictionary["MAPS_API_KEY"] as? String else {
        fatalError("MAPS_API_KEY not set in Info.plist")
      }
      Map.apiKey = apiKey
    }
  }
}

এটি সঠিকভাবে লোড হচ্ছে কিনা তা পরীক্ষা করতে আপনার অ্যাপ তৈরি করুন এবং চালান। আপনি বিশ্বের একটি মানচিত্র দেখতে হবে.

4. মানচিত্র দৃশ্য নিয়ন্ত্রণ করতে একটি ক্যামেরা ব্যবহার করুন

একটি ক্যামেরা স্টেট অবজেক্ট তৈরি করুন

3D মানচিত্র দৃশ্য Camera ক্লাস দ্বারা নিয়ন্ত্রিত হয়. এই ধাপে আপনি মানচিত্র দৃশ্য কাস্টমাইজ করার জন্য অবস্থান, উচ্চতা, শিরোনাম, কাত, রোল এবং পরিসীমা নির্দিষ্ট করতে শিখবেন।

ক্যামেরা সেটিংস সঞ্চয় করতে একটি হেল্পার ক্লাস তৈরি করুন৷

MapHelpers.swift নামে একটি নতুন খালি ফাইল যোগ করুন। আপনার নতুন ফাইলে, GoogleMaps3D আমদানি করুন এবং Camera ক্লাসে একটি এক্সটেনশন যোগ করুন। sanFrancisco নামক একটি পরিবর্তনশীল যোগ করুন। এই ভেরিয়েবলটিকে একটি নতুন Camera অবজেক্ট হিসাবে শুরু করুন। latitude: 37.39, longitude: -122.08 ।

import GoogleMaps3D

extension Camera {
 public static var sanFrancisco: Camera = .init(latitude: 37.39, longitude: -122.08)
}

আপনার অ্যাপে একটি নতুন ভিউ যোগ করুন

CameraDemo.swift নামে একটি নতুন ফাইল তৈরি করুন। ফাইলটিতে একটি নতুন SwiftUI ভিউ-এর মৌলিক রূপরেখা যোগ করুন।

Camera টাইপ camera নামক একটি @State ভেরিয়েবল যোগ করুন। আপনি এইমাত্র সংজ্ঞায়িত sanFrancisco ক্যামেরায় এটি চালু করুন।

@State ব্যবহার করে আপনি মানচিত্রটিকে ক্যামেরা স্টেটে আবদ্ধ করতে এবং এটিকে সত্যের উৎস হিসেবে ব্যবহার করতে দেয়।

@State var camera: Camera = .sanFrancisco

একটি camera বৈশিষ্ট্য অন্তর্ভুক্ত করতে Map() ফাংশন কল পরিবর্তন করুন। আপনার ক্যামেরা @State অবজেক্ট ( .sanFrancisco ) এ camera প্রপার্টি শুরু করতে ক্যামেরা স্টেট বাইন্ডিং $camera ব্যবহার করুন।

import SwiftUI
import GoogleMaps3D

struct CameraDemo: View {
  @State var camera: Camera = .sanFrancisco
  var body: some View {
    VStack {
      Map(camera: $camera, mode: .hybrid)
    }
  }
}

আপনার অ্যাপে মৌলিক নেভিগেশন UI যোগ করুন

মূল অ্যাপ এন্ট্রি পয়েন্ট, GoogleMaps3DDemoApp.swift এ একটি NavigationView যোগ করুন।

এটি ব্যবহারকারীদের ডেমোগুলির একটি তালিকা দেখতে এবং এটি খুলতে প্রতিটিতে ক্লিক করার অনুমতি দেবে।

একটি নতুন NavigationView যোগ করতে GoogleMaps3DDemoApp.swift সম্পাদনা করুন।

দুটি NavigationLink ঘোষণা সম্বলিত একটি List যোগ করুন।

প্রথম NavigationLink একটি Text বিবরণ Basic Map সহ ContentView() খুলতে হবে।

দ্বিতীয় NavigationLink CameraDemo() খুলতে হবে।

...
      NavigationView {
        List {
          NavigationLink(destination: ContentView()) {
            Text("Basic Map")
          }
          NavigationLink(destination: CameraDemo()) {
            Text("Camera Demo")
          }
        }
      }
...

একটি Xcode পূর্বরূপ যোগ করুন

প্রিভিউ হল একটি শক্তিশালী Xcode বৈশিষ্ট্য যা আপনাকে আপনার অ্যাপে পরিবর্তন করার সাথে সাথে দেখতে এবং তার সাথে ইন্টারঅ্যাক্ট করতে দেয়।

একটি পূর্বরূপ যোগ করতে, CameraDemo.swift খুলুন। struct বাইরে একটি #Preview {} কোড ব্লক যোগ করুন।

#Preview {
 CameraDemo()
}

এক্সকোডে পূর্বরূপ ফলকটি খুলুন বা রিফ্রেশ করুন। মানচিত্র সান ফ্রান্সিসকো দেখানো উচিত.

কাস্টম 3D ভিউ সেট আপ করুন

ক্যামেরা নিয়ন্ত্রণ করতে আপনি অতিরিক্ত পরামিতি নির্দিষ্ট করতে পারেন:

• heading : ক্যামেরার দিকে নির্দেশ করতে উত্তর থেকে ডিগ্রীতে বিয়ারিং।
• tilt : ডিগ্রীতে কাত হওয়ার কোণ, যেখানে 0 সরাসরি ওভারহেড এবং 90 অনুভূমিকভাবে দেখছে।
• roll : ক্যামেরার উল্লম্ব সমতলের চারপাশে রোলের কোণ, ডিগ্রিতে
• range : অক্ষাংশ, দ্রাঘিমাংশের অবস্থান থেকে ক্যামেরার মিটারের দূরত্ব
• altitude : সমুদ্রপৃষ্ঠ থেকে ক্যামেরার উচ্চতা

আপনি যদি এই অতিরিক্ত পরামিতিগুলির কোনো সরবরাহ না করেন, তাহলে ডিফল্ট মান ব্যবহার করা হবে।

ক্যামেরা ভিউকে আরও 3D ডেটা দেখানোর জন্য, কাছাকাছি, কাত হওয়া ভিউ দেখাতে প্রাথমিক পরামিতি সেট করুন।

altitude , heading , tilt , roll এবং range মানগুলি অন্তর্ভুক্ত করতে আপনি MapHelpers.swift এ সংজ্ঞায়িত Camera সম্পাদনা করুন

public static var sanFrancisco: Camera = .init(
  latitude: 37.7845812,
  longitude: -122.3660241,
  altitude: 585,
  heading: 288.0,
  tilt: 75.0,
  roll: 0.0,
  range: 100)

নতুন 3D ভিউ দেখতে এবং অন্বেষণ করতে অ্যাপটি তৈরি করুন এবং চালান৷

5. বেসিক ক্যামেরা অ্যানিমেশন

এখন পর্যন্ত আপনি একটি কাত, উচ্চতা, শিরোনাম এবং পরিসর সহ একটি একক অবস্থান নির্দিষ্ট করতে ক্যামেরা ব্যবহার করেছেন৷ এই ধাপে আপনি শিখবেন কিভাবে এই বৈশিষ্ট্যগুলিকে প্রারম্ভিক অবস্থা থেকে একটি নতুন অবস্থায় অ্যানিমেট করে ক্যামেরা ভিউ সরানো যায়।

একটি অবস্থানে উড়ে যান

আপনি Map.flyCameraTo() পদ্ধতিটি ব্যবহার করবেন ক্যামেরাটিকে প্রারম্ভিক অবস্থান থেকে একটি নতুন অবস্থানে অ্যানিমেট করতে।

flyCameraTo() পদ্ধতিতে অনেকগুলি পরামিতি লাগে:

• শেষ অবস্থানের প্রতিনিধিত্বকারী একটি Camera ।
• duration : অ্যানিমেশন কতক্ষণ চলবে, সেকেন্ডে।
• trigger : একটি পর্যবেক্ষণযোগ্য বস্তু যা অ্যানিমেশনকে ট্রিগার করবে যখন এর অবস্থা পরিবর্তন হবে।
• completion : কোড যা অ্যানিমেশন সম্পূর্ণ হলে কার্যকর করা হবে।

উড়ে যাওয়ার জন্য একটি অবস্থান নির্ধারণ করুন

আপনার MapHelpers.swift ফাইল খুলুন।

সিয়াটেল দেখানোর জন্য একটি নতুন ক্যামেরা অবজেক্ট সংজ্ঞায়িত করুন।

public static var seattle: Camera = .init(latitude:
47.6210296,longitude: -122.3496903, heading: 149.0, tilt: 77.0, roll: 0.0, range: 4000)

অ্যানিমেশন ট্রিগার করতে একটি বোতাম যোগ করুন।

আপনার CameraDemo.swift খুলুন। struct ভিতরে একটি নতুন বুলিয়ান ভেরিয়েবল ঘোষণা করুন।

এটিকে false প্রাথমিক মান দিয়ে animate বলুন।

@State private var animate: Bool = false

VStack এর নিচে একটি Button যোগ করুন। Button মানচিত্র অ্যানিমেশন শুরু করবে।

Button কিছু উপযুক্ত Text দিন যেমন "স্টার্ট ফ্লাইং"।

import SwiftUI
import GoogleMaps3D

struct CameraDemo: View {
  @State var camera:Camera = .sanFrancisco
  @State private var animate: Bool = false

  var body: some View {
    VStack{
      Map(camera: $camera, mode: .hybrid)
      Button("Start Flying") {
      }
    }
  }
}

বোতাম ক্লোজারে animate ভেরিয়েবলের অবস্থা টগল করতে কোড যোগ করুন।

      Button("Start Flying") {
        animate.toggle()
      }

অ্যানিমেশন শুরু করুন।

যখন animate ভেরিয়েবলের অবস্থা পরিবর্তিত হয় তখন flyCameraTo() অ্যানিমেশন ট্রিগার করতে কোড যোগ করুন।

  var body: some View {
    VStack{
      Map(camera: $camera, mode: .hybrid)
        .flyCameraTo(
          .seattle,
          duration: 5,
          trigger: animate,
          completion: {  }
        )
      Button("Start Flying") {
        animate.toggle()
      }
    }
  }

একটি অবস্থান কাছাকাছি উড়ে

Map.flyCameraAround() পদ্ধতি ব্যবহার করে একটি অবস্থানের চারপাশে উড়ে যাওয়া সম্ভব। এই পদ্ধতিটি বেশ কয়েকটি পরামিতি নেয়:

• একটি Camera অবস্থান এবং দৃশ্য নির্ধারণ করে।
• সেকেন্ডে একটি duration ।
• rounds : অ্যানিমেশনটি পুনরাবৃত্তি করার সংখ্যা।
• trigger : একটি পর্যবেক্ষণযোগ্য বস্তু যা অ্যানিমেশনকে ট্রিগার করবে।
• callback : কোড যা অ্যানিমেশন চালানোর সময় কার্যকর হবে।

flyAround নামে একটি নতুন @State ভেরিয়েবল সংজ্ঞায়িত করুন, যার প্রাথমিক মান false ।

আপনি এটি করার পরে, flyCameraTo() পদ্ধতি কলের পরপরই flyCameraAround() এ একটি কল যোগ করুন।

ফ্লাই চারপাশের সময়কাল অপেক্ষাকৃত দীর্ঘ হওয়া উচিত যাতে দৃশ্যটি মসৃণভাবে পরিবর্তিত হয়।

flyCameraTo() flyCameraAround() অ্যানিমেশন ট্রিগার করা নিশ্চিত করুন।

আপনার কোড এই মত দেখতে হবে.

import SwiftUI
import GoogleMaps3D

struct CameraDemo: View {
  @State var camera:Camera = .sanFrancisco
  @State private var animate: Bool = false
  @State private var flyAround: Bool = false

  var body: some View {
    VStack{
      Map(camera: $camera, mode: .hybrid)
        .flyCameraTo(
          .seattle,
          duration: 5,
          trigger: animate,
          completion: { flyAround = true }
        )
        .flyCameraAround(
          .seattle,
          duration: 15,
          rounds: 0.5,
          trigger: flyAround,
          callback: {  }
        )
      Button("Start Flying") {
        animate.toggle()
      }
    }
  }
}

#Preview {
  CameraDemo()
}

flyCameraTo() অ্যানিমেশন সম্পূর্ণ হলে ক্যামেরা গন্তব্যের চারপাশে উড়ে যায় তা দেখতে অ্যাপটির পূর্বরূপ দেখুন বা চালান।

6. আপনার মানচিত্রে একটি মার্কার যোগ করুন।

এই ধাপে আপনি শিখবেন কিভাবে মানচিত্রে একটি মার্কার পিন আঁকতে হয়।

আপনি একটি Marker অবজেক্ট তৈরি করবেন এবং এটি আপনার মানচিত্রে যোগ করবেন। SDK চিহ্নিতকারীর জন্য একটি ডিফল্ট আইকন ব্যবহার করবে। অবশেষে আপনি মার্কার উচ্চতা এবং অন্যান্য বৈশিষ্ট্যগুলিকে এটি কীভাবে প্রদর্শন করে তা পরিবর্তন করতে সামঞ্জস্য করবেন।

আপনার মার্কার ডেমোর জন্য একটি নতুন SwiftUI ভিউ তৈরি করুন।

আপনার প্রকল্পে একটি নতুন সুইফট ফাইল যোগ করুন। একে MarkerDemo.swift বলুন।

একটি SwiftUI ভিউ এর রূপরেখা যোগ করুন এবং মানচিত্রটি শুরু করুন যেমন আপনি আপনার CameraDemo করেছিলেন।

import SwiftUI
import GoogleMaps3D

struct MarkerDemo: View {
  @State var camera: Camera = .sanFrancisco
  var body: some View {
    VStack {
      Map(camera: $camera, mode: .hybrid)
    }
  }
}

একটি মার্কার অবজেক্ট শুরু করুন

mapMarker নামে একটি নতুন মার্কার ভেরিয়েবল ঘোষণা করুন। MarkerDemo.swift এ struct কোড ব্লকের শীর্ষে।

আপনার camera ঘোষণার নীচের লাইনে সংজ্ঞাটি রাখুন। এই নমুনা কোড সমস্ত উপলব্ধ বৈশিষ্ট্য আরম্ভ করে.

  @State var mapMarker: Marker = .init(
    position: .init(
      latitude: 37.8044862,
      longitude: -122.4301493,
      altitude: 0.0),
    altitudeMode: .absolute,
    collisionBehavior: .required,
    extruded: false,
    drawsWhenOccluded: true,
    sizePreserved: true,
    zIndex: 0,
    label: "Test"
  )

আপনার মানচিত্রে চিহ্নিতকারী যোগ করুন.

মার্কারটি আঁকতে, মানচিত্র তৈরি হওয়ার সময় এটিকে একটি ক্লোজারে যোগ করুন।

struct MarkerDemo: View {
  @State var camera: Camera = .sanFrancisco
  var body: some View {
    VStack {
      Map(camera: $camera, mode: .hybrid) {
        mapMarker
      }
    }
  }
}

GoogleMaps3DDemoApp.swift এ MarkerDemo() এর গন্তব্য সহ একটি নতুন NavigationLink যোগ করুন এবং এটিকে "মার্কার ডেমো" হিসাবে বর্ণনা করা Text ।

...
      NavigationView {
        List {
          NavigationLink(destination: Map()) {
            Text("Basic Map")
          }
          NavigationLink(destination: CameraDemo()) {
            Text("Camera Demo")
          }
          NavigationLink(destination: MarkerDemo()) {
            Text("Marker Demo")
          }
        }
      }
...

প্রিভিউ এবং আপনার অ্যাপ চালান

প্রিভিউ রিফ্রেশ করুন বা মার্কার দেখতে আপনার অ্যাপ চালান।

এক্সট্রুড মার্কার

মার্কার মাটির উপরে বা 3D জাল altitude এবং altitudeMode ব্যবহার করে স্থাপন করা যেতে পারে।

MarkerDemo.swift এ mapMarker ঘোষণাটি extrudedMarker নামক একটি নতুন Marker ভেরিয়েবলে অনুলিপি করুন।

altitude জন্য একটি অ-শূন্য মান সেট করুন, 50 যথেষ্ট।

altitudeMode .relativeToMesh এ পরিবর্তন করুন এবং extruded true সেট করুন। স্কাইস্ক্র্যাপারের উপরে মার্কার স্থাপন করতে কোড স্নিপেট থেকে latitude এবং longitude ব্যবহার করুন।

  @State var extrudedMarker: Marker = .init(
    position: .init(
      latitude: 37.78980534,
      longitude:  -122.3969349,
      altitude: 50.0),
    altitudeMode: .relativeToMesh,
    collisionBehavior: .required,
    extruded: true,
    drawsWhenOccluded: true,
    sizePreserved: true,
    zIndex: 0,
    label: "Extruded"
  )

অ্যাপটি আবার চালান বা পূর্বরূপ দেখুন। মার্কারটি একটি 3D বিল্ডিংয়ের উপরে উপস্থিত হওয়া উচিত।

7. আপনার মানচিত্রে একটি মডেল যোগ করুন।

একটি Model একটি Marker হিসাবে একই ভাবে যোগ করা যেতে পারে. আপনার একটি মডেল ফাইলের প্রয়োজন হবে যা URL দ্বারা অ্যাক্সেস করা যেতে পারে বা আপনার প্রকল্পে একটি স্থানীয় ফাইল হিসাবে যোগ করা যেতে পারে। এই ধাপের জন্য আমরা একটি স্থানীয় ফাইল ব্যবহার করব যা আপনি এই কোডল্যাবের জন্য GitHub সংগ্রহস্থল থেকে ডাউনলোড করতে পারেন।

আপনার প্রকল্পে একটি মডেল ফাইল যোগ করুন

আপনার Xcode প্রকল্পে Models নামে একটি নতুন ফোল্ডার তৈরি করুন।

GitHub নমুনা অ্যাপ সংগ্রহস্থল থেকে মডেলটি ডাউনলোড করুন । Xcode প্রজেক্ট ভিউতে নতুন ফোল্ডারে টেনে এনে আপনার প্রোজেক্টে যোগ করুন।

নিশ্চিত করুন যে আপনি লক্ষ্যটি আপনার অ্যাপের প্রধান লক্ষ্য হিসাবে সেট করেছেন।

আপনার প্রকল্পের জন্য বিল্ড ফেজ > কপি বান্ডেল রিসোর্স সেটিংস চেক করুন। মডেল ফাইলটি বান্ডেলে কপি করা সম্পদের তালিকায় থাকা উচিত। এটি সেখানে না থাকলে এটি যোগ করতে "+" ক্লিক করুন।

আপনার অ্যাপে মডেল যোগ করুন।

ModelDemo.swift নামে একটি নতুন SwiftUI ফাইল তৈরি করুন।

আগের ধাপের মতো SwiftUI এবং GoogleMaps3D জন্য import বিবৃতি যোগ করুন।

আপনার body একটি VStack ভিতরে একটি Map ঘোষণা করুন।

import SwiftUI
import GoogleMaps3D

struct ModelDemo: View {
  @State var camera: Camera = .sanFrancisco
  
  var body: some View {
    VStack {
      Map(camera: $camera, mode: .hybrid) {
        
      }
    }
  }
}

আপনার বান্ডেল থেকে মডেল পাথ পান। struct এর বাইরে এর জন্য কোড যোগ করুন।

private let fileUrl = Bundle.main.url(forResource: "balloon", withExtension: "glb")

কাঠামোর ভিতরে আপনার মডেলের জন্য একটি পরিবর্তনশীল ঘোষণা করুন।

fileUrl সরবরাহ করা না হলে একটি ডিফল্ট মান সরবরাহ করুন।

  @State var balloonModel: Model = .init(
    position: .init(
      latitude: 37.791376,
      longitude: -122.397571,
      altitude: 300.0),
    url: URL(fileURLWithPath: fileUrl?.relativePath ?? ""),
    altitudeMode: .absolute,
    scale: .init(x: 5, y: 5, z: 5),
    orientation: .init(heading: 0, tilt: 0, roll: 0)
  )

3. আপনার মানচিত্রের সাথে মডেলটি ব্যবহার করুন৷

একটি Marker যোগ করার মতো, Map ঘোষণায় আপনার Model রেফারেন্স সরবরাহ করুন।

  var body: some View {
    VStack {
      Map(camera: $camera, mode: .hybrid) {
        balloonModel
      }
    }
  }

প্রিভিউ এবং আপনার অ্যাপ্লিকেশন চালান

GoogleMaps3DDemoApp.swift এ একটি নতুন NavigationLink যোগ করুন, ModelDemo() এর গন্তব্য এবং "মডেল ডেমো" Text সহ।

...
          NavigationLink(destination: ModelDemo()) {
            Text("Model Demo")
          }
...

প্রিভিউ রিফ্রেশ করুন বা মডেল দেখতে আপনার অ্যাপ চালান।

8. আপনার মানচিত্রে একটি রেখা এবং একটি বহুভুজ আঁকুন।

এই ধাপে আপনি শিখবেন কিভাবে আপনার 3D মানচিত্রে লাইন এবং বহুভুজ আকার যোগ করতে হয়।

সরলতার জন্য আপনি LatLngAltitude অবজেক্টের অ্যারে হিসাবে আকারগুলিকে সংজ্ঞায়িত করবেন। একটি বাস্তব অ্যাপ্লিকেশনে ডেটা একটি ফাইল, একটি API কল বা একটি ডাটাবেস থেকে লোড হতে পারে।

আকৃতির ডেটা পরিচালনা করতে কিছু আকৃতির বস্তু তৈরি করুন।

MapHelpers.swift এ একটি নতুন Camera সংজ্ঞা যোগ করুন যা সান ফ্রান্সিসকো শহরের কেন্দ্রস্থলে দেখায়।

  public static var downtownSanFrancisco: Camera = .init(latitude: 37.7905, longitude: -122.3989, heading: 25, tilt: 71, range: 2500) 

ShapesDemo.swift নামে আপনার প্রকল্পে একটি নতুন ফাইল যোগ করুন। ShapesDemo নামে একটি struct যোগ করুন যা View প্রোটোকল প্রয়োগ করে এবং এতে একটি body যোগ করুন।

struct ShapesDemo: View {
  @State var camera: Camera = .downtownSanFrancisco

  var body: some View {
    VStack {
      Map(camera: $camera, mode: .hybrid) {

      }
    }
  }
}

আকৃতির ডেটা পরিচালনা করতে আপনি যে ক্লাসগুলি ব্যবহার করবেন তা হল Polyline এবং Polygon ৷ ShapesDemo.swift ওপেন করুন এবং সেগুলিকে নিম্নরূপ struct যোগ করুন।

var polyline: Polyline = .init(coordinates: [
    LatLngAltitude(latitude: 37.80515638571346, longitude: -122.4032569467164, altitude: 0),
    LatLngAltitude(latitude: 37.80337073509504, longitude: -122.4012878349353, altitude: 0),
    LatLngAltitude(latitude: 37.79925208843463, longitude: -122.3976697250461, altitude: 0),
    LatLngAltitude(latitude: 37.7989102378512, longitude: -122.3983408725656, altitude: 0),
    LatLngAltitude(latitude: 37.79887832784348, longitude: -122.3987094864192, altitude: 0),
    LatLngAltitude(latitude: 37.79786443410338, longitude: -122.4066878788802, altitude: 0),
    LatLngAltitude(latitude: 37.79549248916587, longitude: -122.4032992702785, altitude: 0),
    LatLngAltitude(latitude: 37.78861484290265, longitude: -122.4019489189814, altitude: 0),
    LatLngAltitude(latitude: 37.78618687561075, longitude: -122.398969592545, altitude: 0),
    LatLngAltitude(latitude: 37.7892310309145, longitude: -122.3951458683092, altitude: 0),
    LatLngAltitude(latitude: 37.7916358762409, longitude: -122.3981969390652, altitude: 0)
  ])
  .stroke(GoogleMaps3D.Polyline.StrokeStyle(
    strokeColor: UIColor(red: 0.09803921568627451, green: 0.403921568627451, blue: 0.8235294117647058, alpha: 1),
    strokeWidth: 10.0,
    outerColor: .white,
    outerWidth: 0.2
    ))
  .contour(GoogleMaps3D.Polyline.ContourStyle(isGeodesic: true))

  var originPolygon: Polygon = .init(outerCoordinates: [
    LatLngAltitude(latitude: 37.79165766856578, longitude:  -122.3983762901255, altitude: 300),
    LatLngAltitude(latitude: 37.7915324439261, longitude:  -122.3982171091383, altitude: 300),
    LatLngAltitude(latitude: 37.79166617650914, longitude:  -122.3980478493319, altitude: 300),
    LatLngAltitude(latitude: 37.79178986470217, longitude:  -122.3982041104199, altitude: 300),
    LatLngAltitude(latitude: 37.79165766856578, longitude:  -122.3983762901255, altitude: 300 )
  ],
  altitudeMode: .relativeToGround)
  .style(GoogleMaps3D.Polygon.StyleOptions(fillColor:.green, extruded: true) )

  var destinationPolygon: Polygon = .init(outerCoordinates: [
      LatLngAltitude(latitude: 37.80515661739527, longitude:  -122.4034307490334, altitude: 300),
      LatLngAltitude(latitude: 37.80503794515428, longitude:  -122.4032633416024, altitude: 300),
      LatLngAltitude(latitude: 37.80517850164195, longitude:  -122.4031056058006, altitude: 300),
      LatLngAltitude(latitude: 37.80529346901115, longitude:  -122.4032622466595, altitude: 300),
      LatLngAltitude(latitude: 37.80515661739527, longitude:  -122.4034307490334, altitude: 300 )
  ],
  altitudeMode: .relativeToGround)
  .style(GoogleMaps3D.Polygon.StyleOptions(fillColor:.red, extruded: true) )

ব্যবহৃত প্রারম্ভিক পরামিতি লক্ষ্য করুন।

• altitudeMode: .relativeToGround বহুভুজগুলিকে মাটির উপরে একটি নির্দিষ্ট উচ্চতায় এক্সট্রুড করতে ব্যবহৃত হয়।
• altitudeMode: .clampToGround পলিলাইনকে পৃথিবীর পৃষ্ঠের আকৃতি অনুসরণ করতে ব্যবহৃত হয়।
• .init() কল করার পরে styleOptions() এ একটি মেথড কল চেইন করে Polygon অবজেক্টে শৈলী সেট করা হয়।

মানচিত্রে আকার যোগ করুন

ঠিক আগের ধাপগুলির মতো, আকারগুলি সরাসরি Map বন্ধে যোগ করা যেতে পারে। একটি VStack এর ভিতরে আপনার Map তৈরি করুন।

...
  var body: some View {
    VStack {
      Map(camera: $camera, mode: .hybrid) {
        polyline
        originPolygon
        destinationPolygon
      }
    }
  }
...

প্রিভিউ এবং আপনার অ্যাপ চালান

প্রিভিউ কোড যোগ করুন এবং Xcode-এর প্রিভিউ প্যানে আপনার অ্যাপ পরিদর্শন করুন।

#Preview {
  ShapesDemo()
}

আপনার অ্যাপ চালানোর জন্য, GoogleMaps3DDemoApp.swift এ একটি নতুন NavigationLink যোগ করুন যা নতুন ডেমো ভিউ খুলবে।

...
          NavigationLink(destination: ShapesDemo()) {
            Text("Shapes Demo")
          }
...

আপনার অ্যাপটি চালান এবং আপনার যোগ করা আকারগুলি অন্বেষণ করুন৷

9. প্লেস মার্কারগুলিতে ট্যাপ ইভেন্টগুলি পরিচালনা করুন৷

এই ধাপে আপনি শিখবেন কিভাবে প্লেস মার্কারগুলিতে ব্যবহারকারীর ট্যাপগুলিতে প্রতিক্রিয়া জানাতে হয়।

দ্রষ্টব্য: মানচিত্রে স্থান চিহ্নিতকারী দেখতে, আপনাকে MapMode .hybrid এ সেট করতে হবে।

ট্যাপ পরিচালনা করার জন্য Map.onPlaceTap পদ্ধতি প্রয়োগ করতে হবে।

onPlaceTap ইভেন্ট একটি PlaceTapInfo অবজেক্ট প্রদান করে যেখান থেকে আপনি ট্যাপ করা প্লেস মার্কারের প্লেস আইডি পেতে পারেন।

আপনি Places SDK বা Places API ব্যবহার করে আরও বিশদ বিবরণ খুঁজতে Place ID ব্যবহার করতে পারেন।

একটি নতুন সুইফট ভিউ যোগ করুন

PlaceTapDemo.swift নামে একটি নতুন সুইফট ফাইলে নিম্নলিখিত কোডটি যোগ করুন।

import GoogleMaps3D
import SwiftUI

struct PlaceTapDemo: View {
  @State var camera: Camera = .sanFrancisco
  @State var isPresented = false
  @State var tapInfo: PlaceTapInfo?

  var body: some View {
    Map(camera: $camera, mode: .hybrid)
      .onPlaceTap { tapInfo in
        self.tapInfo = tapInfo
        isPresented.toggle()
      }
      .alert(
        "Place tapped - \(tapInfo?.placeId ?? "nil")",
        isPresented: $isPresented,
        actions: { Button("OK") {} }
      )
  }
}
#Preview {
  PlaceTapDemo()
}

প্রিভিউ এবং আপনার অ্যাপ চালান

অ্যাপটির পূর্বরূপ দেখতে পূর্বরূপ ফলকটি খুলুন।

অ্যাপটি চালানোর জন্য, GoogleMaps3DDemoApp.swift এ একটি নতুন NavigationLink যোগ করুন।

...
          NavigationLink(destination: PlaceTapDemo()) {
            Text("Place Tap Demo")
          }
...

10. (ঐচ্ছিক) এটি আরও নিন

উন্নত ক্যামেরা অ্যানিমেশন

কিছু ব্যবহারের ক্ষেত্রে একটি সিকোয়েন্স বা অবস্থানের তালিকা বা ক্যামেরা স্টেটের সাথে মসৃণভাবে অ্যানিমেট করার প্রয়োজন হয়, উদাহরণস্বরূপ একটি ফ্লাইট সিমুলেটর বা হাইক বা দৌড় পুনরায় প্লে করা।

এই ধাপে আপনি শিখবেন কিভাবে একটি ফাইল থেকে অবস্থানের একটি তালিকা লোড করতে হয় এবং প্রতিটি অবস্থানের মাধ্যমে ক্রমানুসারে অ্যানিমেট করতে হয়।

অবস্থানের একটি ক্রম ধারণকারী একটি ফাইল লোড করুন।

GitHub নমুনা অ্যাপ রেপো থেকে flightpath.json ডাউনলোড করুন ।

আপনার Xcode প্রকল্পে JSON নামে একটি নতুন ফোল্ডার তৈরি করুন।

Xcode-এ আপনার JSON ফোল্ডারে flightpath.json টেনে আনুন।

আপনার অ্যাপের প্রধান লক্ষ্য হতে লক্ষ্য সেট করুন। আপনার প্রোজেক্ট কপি বান্ডেল রিসোর্স সেটিংসে এই ফাইলটি অন্তর্ভুক্ত রয়েছে কিনা তা পরীক্ষা করুন।

আপনার অ্যাপে FlightPathData.swift এবং FlightDataLoader.swift নামে দুটি নতুন সুইফট ফাইল তৈরি করুন।

আপনার অ্যাপে নিচের কোডটি কপি করুন। এই কোড স্ট্রাকট এবং ক্লাস তৈরি করে যা "flighpath.json" নামে একটি স্থানীয় ফাইল পড়ে এবং JSON হিসাবে এটিকে ডিকোড করে।

FlightPathData এবং FlightPathLocation স্ট্রাকট JSON ফাইলের ডাটা স্ট্রাকচারকে সুইফট অবজেক্ট হিসেবে উপস্থাপন করে।

FlightDataLoader ক্লাস ফাইল থেকে ডেটা পড়ে এবং ডিকোড করে। এটি আপনার অ্যাপকে তার ডেটাতে পরিবর্তনগুলি পর্যবেক্ষণ করার অনুমতি দেওয়ার জন্য ObservableObject প্রোটোকল গ্রহণ করে।

পার্স করা তথ্য একটি প্রকাশিত সম্পত্তি মাধ্যমে উন্মুক্ত করা হয়.

FlightPaths.swift

import GoogleMaps3D

struct FlightPathData: Decodable {
  let flight: [FlightPathLocation]
}

struct FlightPathLocation: Decodable {
  let timestamp: Int64
  let latitude: Double
  let longitude: Double
  let altitude: Double
  let bearing: Double
  let speed: Double
}

FlightDataLoader.swift

import Foundation

public class FlightDataLoader : ObservableObject {

  @Published var flightPathData: FlightPathData = FlightPathData(flight:[])
  @Published var isLoaded: Bool = false

  public init() {
    load("flightpath.json")
  }
  
  public func load(_ path: String) {
    if let url = Bundle.main.url(forResource: path, withExtension: nil){
      if let data = try? Data(contentsOf: url){
        let jsondecoder = JSONDecoder()
        do{
          let result = try jsondecoder.decode(FlightPathData.self, from: data)
          flightPathData = result
          isLoaded = true
        }
        catch {
          print("Error trying to load or parse the JSON file.")
        }
      }
    }
  }
}

প্রতিটি অবস্থান বরাবর ক্যামেরা অ্যানিমেট

ধাপের ক্রমগুলির মধ্যে ক্যামেরাকে অ্যানিমেট করতে, আপনি একটি KeyframeAnimator ব্যবহার করবেন।

প্রতিটি Keyframe একটি CubicKeyframe হিসাবে তৈরি করা হবে CubicKeyframe , তাই ক্যামেরার অবস্থার পরিবর্তনগুলি মসৃণভাবে অ্যানিমেটেড।

flyCameraTo() ব্যবহার করলে প্রতিটি অবস্থানের মধ্যে ভিউটি "বাউন্স" হবে।

প্রথমে MapHelpers.swift এ "innsbruck" নামক একটি ক্যামেরা ঘোষণা করুন।

public static var innsbruck: Camera = .init(
  latitude: 47.263,
  longitude: 11.3704,
  altitude: 640.08,
  heading: 237,
  tilt: 80.0,
  roll: 0.0,
  range: 200)

এখন FlyAlongRoute.swift নামে একটি নতুন ফাইলে একটি নতুন ভিউ সেট আপ করুন।

SwiftUI এবং GoogleMaps3D আমদানি করুন। একটি VStack ভিতরে একটি Map এবং একটি Button যোগ করুন। বুলিয়ান animation ভেরিয়েবলের অবস্থা টগল করতে Button সেট আপ করুন।

FlightDataLoader জন্য একটি State অবজেক্ট ঘোষণা করুন, যা JSON ফাইলটি আরম্ভ হলে লোড করবে।

import GoogleMaps3D
import SwiftUI

struct FlyAlongRoute: View {
  @State private var camera: Camera = .innsbruck
  @State private var flyToDuration: TimeInterval = 5
  @State var animation: Bool = true

  @StateObject var flightData: FlightDataLoader = FlightDataLoader()

  var body: some View {
    VStack {
      Map(camera: $camera, mode: .hybrid)
      Button("Fly Along Route"){
        animation.toggle()
      }
    }
  }
}

কীফ্রেম তৈরি করুন

মৌলিক প্রক্রিয়া হল একটি ফাংশন তৈরি করা যা অ্যানিমেশন সিকোয়েন্সে একটি নতুন ফ্রেম প্রদান করে। প্রতিটি নতুন ফ্রেম অ্যানিমেটরকে অ্যানিমেট করার জন্য পরবর্তী ক্যামেরার অবস্থা নির্ধারণ করে। একবার এই ফাংশনটি তৈরি হয়ে গেলে, এটিকে ক্রমানুসারে ফাইল থেকে প্রতিটি অবস্থানের সাথে কল করুন।

আপনার FlyAlongRoute কাঠামোতে দুটি ফাংশন যোগ করুন। ফাংশন makeKeyFrame একটি ক্যামেরা অবস্থা সহ একটি CubicKeyframe প্রদান করে। ফাংশন makeCamera ফ্লাইট ডেটা সিকোয়েন্সে একটি ধাপ নেয় এবং ধাপের প্রতিনিধিত্বকারী একটি Camera অবজেক্ট ফেরত দেয়।

func makeKeyFrame(step: FlightPathLocation) -> CubicKeyframe<Camera> {
  return CubicKeyframe(
    makeCamera(step: step),
    duration: flyToDuration
  )
}

func makeCamera(step: FlightPathLocation) -> Camera {
  return .init(
    latitude: step.latitude,
    longitude: step.longitude,
    altitude: step.altitude,
    heading: step.bearing,
    tilt: 75,
    roll: 0,
    range: 200
  )
}

অ্যানিমেশন একসাথে রাখুন

Map শুরু করার পরে keyframeAnimator কল করুন এবং প্রাথমিক মানগুলি সেট করুন।

ফ্লাইট পাথের প্রথম অবস্থানের উপর ভিত্তি করে আপনার একটি প্রাথমিক ক্যামেরা অবস্থার প্রয়োজন হবে।

একটি পরিবর্তনশীল পরিবর্তনশীল অবস্থার উপর ভিত্তি করে অ্যানিমেশনটি ট্রিগার হওয়া উচিত।

keyframeAnimator বিষয়বস্তু একটি মানচিত্র হওয়া উচিত।

ফ্লাইট পাথে প্রতিটি অবস্থানের মাধ্যমে লুপ করে কীফ্রেমের প্রকৃত তালিকা তৈরি করা হয়।

   VStack {
      Map(camera: $camera, mode: .hybrid)
        .keyframeAnimator(
          initialValue: makeCamera(step: flightData.flightPathData.flight[0]),
          trigger: animation,
          content: { view, value in
            Map(camera: .constant(value), mode: .hybrid)
          },
          keyframes: { _ in
            KeyframeTrack(content: {
              for i in  1...flightData.flightPathData.flight.count-1 {
                makeKeyFrame(step: flightData.flightPathData.flight[i])
              }
            })
          }
        )
   }

প্রিভিউ এবং আপনার অ্যাপ্লিকেশন চালান.

আপনার ভিউ প্রিভিউ করতে পূর্বরূপ ফলকটি খুলুন।

GoogleMaps3DDemoApp.swift এ FlightPathDemo() এর গন্তব্য সহ একটি নতুন NavigationLink যোগ করুন এবং এটি ব্যবহার করে দেখতে অ্যাপটি চালান।

11. অভিনন্দন

আপনি সফলভাবে একটি অ্যাপ্লিকেশন তৈরি করেছেন যে

• আপনার অ্যাপে একটি মৌলিক 3D মানচিত্র যোগ করে।
• আপনার মানচিত্রে চিহ্নিতকারী, লাইন, বহুভুজ এবং মডেল যোগ করে।
• মানচিত্র এবং নির্দিষ্ট অবস্থানের চারপাশে উড়তে ক্যামেরা নিয়ন্ত্রণ করতে কোড প্রয়োগ করে।

আপনি যা শিখেছেন

• কিভাবে একটি Xcode SwiftUI অ্যাপে GoogleMaps3D প্যাকেজ যোগ করবেন।
• একটি API কী এবং একটি ডিফল্ট ভিউ সহ একটি 3D মানচিত্র কীভাবে শুরু করবেন।
• কিভাবে আপনার মানচিত্রে চিহ্নিতকারী, 3D মডেল, লাইন এবং বহুভুজ যোগ করবেন।
• অন্য জায়গায় নড়াচড়া করার জন্য ক্যামেরা কীভাবে নিয়ন্ত্রণ করবেন।
• প্লেস মার্কারগুলিতে ক্লিক ইভেন্টগুলি কীভাবে পরিচালনা করবেন।

এরপর কি?

• আপনি iOS এর জন্য Maps 3D SDK দিয়ে কী করতে পারেন সে সম্পর্কে আরও বিশদ বিবরণের জন্য বিকাশকারী গাইডটি দেখুন৷
• নিম্নোক্ত সমীক্ষার উত্তর দিয়ে আপনি যে বিষয়বস্তুকে সবচেয়ে বেশি উপযোগী মনে করবেন তা তৈরি করতে আমাদের সাহায্য করুন: