আপনার অ্যাপে 3D ম্যাপ যোগ করা

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

iOS-এর জন্য Maps 3D SDK ব্যবহার করে কীভাবে iOS অ্যাপে একটি বেসিক 3D ম্যাপ যোগ করতে হয় তার একটি উদাহরণ এই পৃষ্ঠায় দেখানো হয়েছে। এই পৃষ্ঠার নির্দেশাবলী ধরে নেয় যে আপনি ইতিমধ্যে সেট-আপ পৃষ্ঠার ধাপগুলি সম্পূর্ণ করেছেন এবং আপনার কাছে নিম্নলিখিতগুলি আছে:

• iOS-এর জন্য Maps 3D SDK চালু করা আছে এমন একটি Google Cloud প্রোজেক্ট
• iOS-এর জন্য Maps 3D SDK-এর API কী
• iOS প্যাকেজের জন্য Maps 3D SDK সহ Xcode ভার্সন 16.0 বা তার পরবর্তী ভার্সন যোগ করা হয়েছে।

এইসব পূর্বশর্ত সম্পর্কে আরও তথ্যের জন্য, সেট-আপ দেখুন।

আরও উন্নত কোডল্যাব অনুসরণ করুন।

GitHub-এ আরও কোড স্যাম্পেল দেখুন।

পার্ট ১: একটি বেসিক SwiftUI অ্যাপ তৈরি করা

1. Xcode-এ নতুন অ্যাপ তৈরি করুন।
2. আপনার প্রোডাক্টের নাম Hello3DWorld-এ সেট করুন, সাথে সংস্থার আইডেন্টিফায়ার com.example-এ সেট করুন। প্যাকেজের নাম com.example.Hello3DWorld হতে হবে।
3. SwiftUI ইন্টারফেস বেছে নিন।
4. আপনার অ্যাপে Maps 3D লাইব্রেরি যোগ করুন। সেট-আপ বিভাগে নির্দেশাবলী দেখুন।

পার্ট ২: ম্যাপ যোগ করা

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

2. SwiftUI এবং GoogleMaps3D প্যাকেজ ইমপোর্ট করুন।

3. বডি ডিক্লারেশনের মধ্যে থাকা সব কোড Map(mode: .hybrid) দিয়ে পরিবর্তন করুন।

   Map শুরু করার জন্য আপনাকে ন্যূনতম যে প্রাথমিক কনফিগারেশন প্রদান করতে হবে তা হল MapMode:

   • .hybrid,
   • .roadmap, অথবা
   • .satellite

   আপনার ContentView.swift ফাইলটি এইরকম দেখতে হবে:

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   
   #Preview {
     ContentView()
   }
   

পার্ট ৩: আপনার API key সেট করুন।

1. ম্যাপ শুরু করার আগে API কী সেট করতে হবে। এটি করতে, ম্যাপ আছে এমন View-এর init() ইভেন্ট হ্যান্ডলারে Map.apiKey সেট করুন।

   সতর্কতা: এক্সটার্নাল বা পাবলিক সোর্স কন্ট্রোলে API key চেক করবেন না

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
   
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   

পার্ট ৪: ম্যাপ ভিউ কন্ট্রোল করতে ক্যামেরা ব্যবহার করা

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

1. initialCamera প্রপার্টি অন্তর্ভুক্ত করতে Map() ফাংশন কল পরিবর্তন করুন। ম্যানহাটনের ডাউনটাউনের ভিউ দেখাতে initialCamera ইনিশিয়ালাইজ করুন।

   মনে রাখবেন: প্যারামিটারের ক্রম গুরুত্বপূর্ণ। প্রথমে অক্ষাংশ, তারপর দ্রাঘিমাংশ প্রদান করে ক্যামেরা শুরু করা হয়। প্রতিটির জন্য সঠিক মান উল্লেখ করেছেন কিনা তা নিশ্চিত করুন, বিশেষ করে অন্য কোনও সোর্স থেকে পেস্ট করার সময়, অথবা ক্যামেরা একটি অপ্রত্যাশিত লোকেশন দেখাতে পারে।

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
     var body: some View {
       Map(initialCamera: .init(
         center: .init(latitude: 40.748339, longitude: -73.985912, altitude: 211.1),
         heading: 52,
         tilt: 68,
         roll: 0.0,
         range: 1039,
         fieldOfView: .degrees(50)
       ), mode: .hybrid)
     }
   }
   

উপরের কোডটি এইসব প্যারামিটারের জন্য ভ্যালু সেট করে:

• center: LatLngAltitude ক্যামেরার লোকেশন দেখাচ্ছে
• heading: উত্তর দিক থেকে কত ডিগ্রি কোণে ক্যামেরা তাক করতে হবে।
• tilt: ডিগ্রিতে টিল্টের কোণ, যেখানে ০ হল সরাসরি মাথার উপরে এবং ৯০ হল অনুভূমিকভাবে দেখা।
• roll: ক্যামেরার উল্লম্ব প্লেনের চারপাশে রোলের কোণ, ডিগ্রিতে।
• range: অক্ষাংশ, দ্রাঘিমাংশ লোকেশন থেকে ক্যামেরার দূরত্ব মিটারে প্রকাশ করা হয়
• fieldOfView: ক্যামেরা ফিল্ড অফ ভিউকে দেখায় এমন অ্যাঙ্গেল

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

মনে রাখবেন: এছাড়াও, আপনি টিল্ট ও রেঞ্জ ব্যবহার করে ক্যামেরার আপেক্ষিক উচ্চতা অ্যাডজাস্ট করতে পারবেন।

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

পার্ট ৫: আপনার অ্যাপ প্রিভিউ করা ও রান করা

1. Xcode প্রিভিউ যোগ করুন

   প্রিভিউ হল একটি শক্তিশালী XCode ফিচার যা আপনাকে সিমুলেটর বা কোনও এক্সটার্নাল ডিভাইস ব্যবহার না করেই আপনার অ্যাপ দেখতে এবং ইন্টার‍্যাক্ট করতে দেয়।

   প্রিভিউ যোগ করতে, আপনার স্ট্রাক্টের বাইরে একটি #Preview {} কোড ব্লক যোগ করুন।

   #Preview {
     ContentView()
   }
   

2. অ্যাপ রান করুন

অ্যাপ তৈরি করে রান করুন।

ম্যাপ লোডিং ও সমস্যা সংক্রান্ত স্ট্যাটাস

iOS-এর জন্য Maps 3D SDK, Map-এর স্ট্যাটাস ম্যানেজ করার সময় অটোমেটিক বিল্ট-ইন ভিজ্যুয়াল ফিডব্যাক দেখায়:

• লোডিং ওভারলে: ম্যাপ ভিউ প্রথমবার শুরু বা লোড হওয়ার সময় মাঝখানে একটি প্রোগ্রেস ইন্ডিকেটর দেখানো হয়।
• সমস্যার ওভারলে: ম্যাপ লোড না হলে সমস্যার ওভারলে দেখানো হয়।

আপনি যদি Map-এ style(mapID:error:) ব্যবহার করে ক্লাউড-ভিত্তিক ম্যাপ স্টাইল প্রয়োগ করেন, তাহলে স্টাইল লোড করার সময় হওয়া সমস্যা ম্যানেজ করতে আপনি error ক্লোজার পাস করতে পারবেন।

ম্যাপ ট্যাপ ইভেন্ট শুনুন

ম্যাপে ট্যাপ ইভেন্ট শোনার জন্য, Map-এ onTap(_:) মডিফায়ার প্রয়োগ করুন। ব্যবহারকারী ম্যাপে ট্যাপ করলে, ক্লোজার একটি MapTapInfo ভ্যালু পায় যা location (LatLngAltitude) এবং ট্যাপ করা content (MapTapInfo.Content.map বা MapTapInfo.Content.place(id:)) প্রদান করে। উল্লেখযোগ্য স্থানের সাথে ইন্টার‍্যাকশন সম্পর্কে আরও জানতে, উল্লেখযোগ্য স্থানের সাথে ইন্টার‍্যাক্ট করুন দেখুন।

Map(mode: .hybrid)
  .onTap { tapInfo in
    print("Tapped at \(tapInfo.location), content: \(tapInfo.content)")
  }

অভিনন্দন!

আপনি অ্যাপে 3D ম্যাপ যোগ করেছেন!

এরপর, আপনি iOS-এর জন্য Maps 3D SDK-এর আরও উন্নত ফিচার এক্সপ্লোর করতে পারবেন, যেমন ক্যামেরা পাথ অ্যানিমেশন, 3D মার্কার, অথবা পলিগন।