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

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

নিউ ইয়র্ক সিটি দেখানো একটি 3D ম্যাপ

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

  • Android-এর জন্য Maps 3D SDK চালু করা আছে এমন একটি Google Cloud প্রোজেক্ট
  • Android-এর জন্য Maps 3D SDK-এর সাথে ব্যবহার করার জন্য কনফিগার করা একটি API কী
  • Android-এর জন্য Maps 3D SDK-এর সাথে ব্যবহার করার জন্য সেট-আপ করা একটি Android Studio প্রোজেক্ট

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

পার্ট ১: Map3DView কম্পোনেন্ট যোগ করতে লেআউট ফাইল (activity_main.xml) আপডেট করুন

Map3DView কম্পোনেন্ট হল সেই ভিউ যা অ্যাপের মধ্যে 3D ম্যাপ রেন্ডার করে। নিম্নলিখিত ধাপগুলি কম্পোনেন্ট যোগ করে এবং ক্যামেরার পজিশন ও সম্পর্কিত অ্যাট্রিবিউট সহ ম্যাপের প্রাথমিক অবস্থা কনফিগার করে:

  1. আপনার প্রধান অ্যাক্টিভিটির লেআউট ফাইল খুলুন, যা সাধারণত app/src/main/res/layout/activity_main.xml-এ থাকে।

  2. রুট ConstraintLayout (বা আপনার রুট লেআউট এলিমেন্ট)-এ, map3d XML নেমস্পেস যোগ করুন:

    xmlns:map3d="http://schemas.android.com/apk/res-auto"

  3. "Hello World!" দেখায় এমন ডিফল্ট <TextView> মুছে দিন।

  4. আপনার লেআউটে Map3DView কম্পোনেন্ট যোগ করুন। আপনি ক্যামেরার পজিশন ও অন্যান্য অ্যাট্রিবিউট কাস্টমাইজ করতে পারবেন:

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:map3d="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

  <com.google.android.gms.maps3d.Map3DView
    android:id="@+id/map3dView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    map3d:mapMode="hybrid"
    map3d:centerLat="38.544012"
    map3d:centerLng="-107.670428"
    map3d:centerAlt="2427.6"
    map3d:heading="310"
    map3d:tilt="63"
    map3d:range="8266"
    map3d:roll="0"
    map3d:minAltitude="0"
    map3d:maxAltitude="1000000"
    map3d:minHeading="0"
    map3d:maxHeading="360"
    map3d:minTilt="0"
    map3d:maxTilt="90"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

পার্ট ২: MainActivity.kt আপডেট করুন

নিম্নলিখিত ধাপগুলি পার্ট ১-এ activity_main.xml ফাইলে যোগ করা Map3DView কম্পোনেন্টকে ইনিশিয়ালাইজ করে এবং কম্পোনেন্ট লাইফসাইকেল ইভেন্ট ম্যানেজ করে।

মনে রাখবেন, Android-এর জন্য Maps 3D SDK একবারে শুধুমাত্র একটি অ্যাক্টিভ Map3DView ইনস্ট্যান্স সাপোর্ট করে। একই সাথে একাধিক Map3DView ইনস্ট্যান্স দেখানো (যেমন, একই লেআউটে বা বিভিন্ন দৃশ্যমান অ্যাক্টিভিটি বা ফ্র্যাগমেন্টে) সমর্থিত নয় এবং এর ফলে রেন্ডারিং সংক্রান্ত সমস্যা হতে পারে, যেমন সেকেন্ডারি ভিউতে কালো স্ক্রিন।

এছাড়াও, সব Map3DView একই ম্যাপ স্টেট (যেমন, ক্যামেরার পজিশন, যোগ করা মার্কার, পলিগন ইত্যাদি) শেয়ার ও দেখাবে, যা একটি Map3DView (onDestroy ব্যবহার করে) নষ্ট করে আরেকটি তৈরি করলেও থেকে যাবে, যদি না ম্যানুয়ালি মুছে ফেলা হয়। যেমন, আপনি Map3DView1-এ মার্কার যোগ করার পরে সেটি মুছে দিয়ে Map3DView2 তৈরি করলে, Map3DView2-এ একই মার্কার উপস্থিত থাকবে।

ডেভেলপারের দায়িত্ব:

  • একবারে একটি ভিউ: যেকোনও মুহূর্তে আপনার ভিউ হায়ারার্কির অ্যাক্টিভ অংশে শুধুমাত্র একটি Map3DView আছে কিনা তা নিশ্চিত করুন।
  • ম্যানুয়ালি ক্লিন-আপ: একটি Map3DView (যেমন, Map3DView1) থেকে অন্যটিতে (যেমন, Map3DView2) পরিবর্তন করার সময়, আপনাকে অবশ্যই পুরনো ইনস্ট্যান্সে (Map3DView1) onDestroy() কল করতে হবে। কারণ, অন্তর্নিহিত ম্যাপ স্টেট শেয়ার করা হয়, তাই Map3DView2 যাতে ফ্রেশ বা নির্দিষ্ট স্টেট দিয়ে শুরু হয় তা নিশ্চিত করতে, Map3DView1-এর মাধ্যমে সেট করা যেকোনও স্টেট ম্যানুয়ালি মুছে ফেলার দায়িত্ব আপনার। এর মধ্যে মার্কার, ওভারলে ইত্যাদি সরানো এবং OnMap3DViewReadyCallback-এ পাওয়া GoogleMap3D অবজেক্ট ব্যবহার করে ক্যামেরার পজিশন রিসেট করা অন্তর্ভুক্ত।

  1. আপনার MainActivity.kt ফাইল খুলুন, যা সাধারণত app/src/main/java/com/example/yourpackagename/MainActivity.kt-এ থাকে।

  2. Android-এর জন্য Maps 3D SDK-তে প্রয়োজনীয় ইমপোর্ট যোগ করুন:

    import android.util.Log
import com.google.android.gms.maps3d.GoogleMap3D
import com.google.android.gms.maps3d.Map3DView
import com.google.android.gms.maps3d.OnMap3DViewReadyCallback

  3. OnMap3DViewReadyCallback প্রয়োগ করতে MainActivity ক্লাস পরিবর্তন করুন:

    class MainActivity : AppCompatActivity(), OnMap3DViewReadyCallback {

  4. Map3DView ও GoogleMap3D-এর জন্য ভেরিয়েবেল ঘোষণা করুন:

    private lateinit var map3DView: Map3DView
private var googleMap3D: GoogleMap3D? = null

  5. onCreate পদ্ধতিতে, setContentView(...) এবং ViewCompat.setOnApplyWindowInsetsListener ব্লকের পরে, map3DView শুরু করুন, এর onCreate লাইফসাইকেল পদ্ধতি কল করুন এবং অ্যাসিঙ্ক্রোনাসভাবে ম্যাপের অনুরোধ করুন:

    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enableEdgeToEdge()
    setContentView(R.layout.activity_main)
    ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
        val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
        v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
        insets
    }

    map3DView = findViewById(R.id.map3dView)
    map3DView.onCreate(savedInstanceState)
    map3DView.getMap3DViewAsync(this)
}

  6. onMap3DViewReady এবং onError পদ্ধতি ওভাররাইড করুন। ম্যাপ ব্যবহার করার জন্য প্রস্তুত হলে অথবা ইনিশিয়ালাইজ করার সময় কোনও সমস্যা হলে এই কলব্যাক ট্রিগার করা হয়:

    override fun onMap3DViewReady(googleMap3D: GoogleMap3D) {
    // Interact with the googleMap3D object here
    this.googleMap3D = googleMap3D
    // You can now make calls to the googleMap3D object, e.g.,
    // googleMap3D.flyTo(camera { ... })
}

override fun onError(error: Exception) {
    // Handle the error gracefully here (for example, show an error dialog or log the error).
    Log.e("MainActivity", "Error loading 3D map", error)
}

  7. আপনার অ্যাক্টিভিটি থেকে Map3DView-এ লাইফসাইকেল ইভেন্ট ফরওয়ার্ড করতে MainActivity-এ নিম্নলিখিত ওভাররাইড যোগ করুন:

    override fun onStart() {
    super.onStart()
    map3DView.onStart()
}

override fun onResume() {
    super.onResume()
    map3DView.onResume()
}

override fun onPause() {
    map3DView.onPause()
    super.onPause()
}

override fun onStop() {
    map3DView.onStop()
    super.onStop()
}

override fun onDestroy() {
    map3DView.onDestroy()
    super.onDestroy()
}

override fun onSaveInstanceState(outState: Bundle) {
    super.onSaveInstanceState(outState)
    map3DView.onSaveInstanceState(outState)
}

override fun onLowMemory() {
    super.onLowMemory()
    map3DView.onLowMemory()
}

পার্ট ৩: Gradle সিঙ্ক ও রান করা

এখন আপনি অ্যাপের লেআউট ও অ্যাক্টিভিটি আপডেট করেছেন, তাই 3D ম্যাপ ভিউ দেখতে অ্যাপটি তৈরি ও রান করতে পারবেন।

  1. Gradle-এর সাথে আপনার প্রোজেক্ট সিঙ্ক করতে, ফাইল > Gradle ফাইলের সাথে প্রোজেক্ট সিঙ্ক করুন বিকল্প বেছে নিন।

  2. এমুলেটর বা ফিজিক্যাল ডিভাইসে আপনার অ্যাপ তৈরি ও রান করতে, রান করুন > রান করুন বিকল্প বেছে নিন।

সবকিছু সঠিকভাবে কনফিগার করা থাকলে, আপনার অ্যাপে একটি 3D ম্যাপ দেখতে পাবেন, যা আপনার activity_main.xml-এ নির্দিষ্ট করা স্থানাঙ্কের কাছাকাছি কেন্দ্র করে থাকবে।

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

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

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

আপনি আপনার OnMap3DViewReadyCallback ইমপ্লিমেন্টেশনের মধ্যে onError(error: Exception) ওভাররাইড করে প্রোগ্র্যামাটিক প্রসেসে এইসব ইনিশিয়ালাইজেশন বা লোডিং সংক্রান্ত সমস্যা ক্যাপচার করতে পারবেন।

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

ম্যাপে ক্লিক ইভেন্ট শুনতে, GoogleMap3D-এ setMap3DClickListener কল করুন। ব্যবহারকারী ম্যাপে ক্লিক করলে, onMap3DClick কলব্যাক একটি Map3DClickEvent অবজেক্ট পায় যা ক্লিক করা পয়েন্টের location এবং placeId প্রদান করে এবং একটি Boolean (ডিফল্ট Places UI উইজেট বন্ধ করতে true অথবা এটি দেখাতে false) ফিরিয়ে দেয়। আরও তথ্যের জন্য, উল্লেখযোগ্য স্থানের সাথে ইন্টার‍্যাক্ট করুন।

ম্যাপ ক্লিক লিসনার কীভাবে সেট করতে হয় তা নিম্নলিখিত উদাহরণ থেকে জানতে পারবেন:

googleMap3D.setMap3DClickListener { event: Map3DClickEvent ->
    Log.d(
        "MainActivity",
        "Clicked at ${event.location}, placeId: ${event.placeId}"
    )
    false
}

পরবর্তী ধাপ

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