আকার

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

সলিড লাল পলিলাইন সহ ম্যাপ

Android-এর জন্য Google Maps API আপনার অ্যাপ্লিকেশনের জন্য কাস্টমাইজ করার উদ্দেশ্যে আপনার ম্যাপে আকার যোগ করার জন্য কিছু সহজ উপায় অফার করে।

  • Polyline হল সংযুক্ত লাইন সেগমেন্টের একটি সিরিজ যা আপনার পছন্দমতো যেকোনও আকার নিতে পারে এবং ম্যাপে পথ ও রুট চিহ্নিত করতে ব্যবহার করা যেতে পারে।
  • Polygon হল একটি ঘেরা আকৃতি যা ম্যাপে এলাকা চিহ্নিত করতে ব্যবহার করা যেতে পারে।
  • Circle হল পৃথিবীর পৃষ্ঠে আঁকা ম্যাপে বৃত্তের ভৌগোলিকভাবে সঠিক প্রজেকশন।

এইসব আকারের জন্য, আপনি একাধিক প্রপার্টি পরিবর্তন করে তাদের চেহারা কাস্টমাইজ করতে পারেন।

কোডের নমুনা

এলাকা ও রুট দেখানোর জন্য পলিগন ও পলিলাইন যোগ করার টিউটোরিয়ালে একটি সাধারণ Android অ্যাপের জন্য সব কোড অন্তর্ভুক্ত থাকে।

এছাড়াও, GitHub-এ ApiDemos রিপোজিটরি-তে আকার ও সেগুলির ফিচারের ব্যবহার দেখায় এমন স্যাম্পেল অন্তর্ভুক্ত থাকে:

  • CircleDemoActivity (Java / Kotlin): বৃত্ত
  • PolygonDemoActivity (Java / Kotlin): Polygon
  • PolylineDemoActivity (Java / Kotlin): পলিলাইন

পলিলাইন

Polyline ক্লাস ম্যাপে কানেক্ট করা লাইন সেগমেন্টের একটি সেটকে সংজ্ঞায়িত করে। Polyline অবজেক্টে একগুচ্ছ LatLng লোকেশন থাকে এবং এটি লাইন সেগমেন্টের একটি সিরিজ তৈরি করে যা সেইসব লোকেশনকে একটি নির্দিষ্ট ক্রম অনুযায়ী কানেক্ট করে।

এই ভিডিওতে দেখানো হয়েছে যে কীভাবে ম্যাপে পলিলাইন ব্যবহার করে পথ এঁকে, ব্যবহারকারীদের গন্তব্যে পৌঁছাতে সাহায্য করা যায়।

পলিলাইন তৈরি করতে, প্রথমে একটি PolylineOptions অবজেক্ট তৈরি করুন এবং এতে পয়েন্ট যোগ করুন। পয়েন্ট পৃথিবীর পৃষ্ঠের একটি পয়েন্টকে বোঝায়, এবং এটি LatLng অবজেক্ট হিসেবে প্রকাশ করা হয়। আপনি যে ক্রমে PolylineOptions অবজেক্টে পয়েন্ট যোগ করেন, সেই ক্রম অনুযায়ী পয়েন্টগুলির মধ্যে লাইন সেগমেন্ট আঁকা হয়।

PolylineOptions অবজেক্টে পয়েন্ট যোগ করতে, PolylineOptions.add() কল করুন। মনে রাখবেন, এই পদ্ধতিতে পরিবর্তনযোগ্য সংখ্যক প্যারামিটার নেওয়া হয়, তাই আপনি একবারে একাধিক পয়েন্ট যোগ করতে পারবেন (পয়েন্টগুলি আগে থেকেই কোনও তালিকায় থাকলে, আপনি PolylineOptions.addAll(Iterable<LatLng>) কল করতে পারবেন)।

তারপরে, আপনি GoogleMap.addPolyline(PolylineOptions) কল করে ম্যাপে পলিলাইন যোগ করতে পারবেন। এই পদ্ধতিটি একটি Polyline অবজেক্ট রিটার্ন করে যার সাহায্যে আপনি পরে পলিলাইন পরিবর্তন করতে পারবেন।

নিম্নলিখিত কোড স্নিপেট থেকে কীভাবে ম্যাপে একটি আয়তাকার অংশ যোগ করতে হয় তা জানতে পারবেন:

Kotlin

// Instantiates a new Polyline object and adds points to define a rectangle
val polylineOptions = PolylineOptions()
    .add(LatLng(37.35, -122.0))
    .add(LatLng(37.45, -122.0)) // North of the previous point, but at the same longitude
    .add(LatLng(37.45, -122.2)) // Same latitude, and 30km to the west
    .add(LatLng(37.35, -122.2)) // Same longitude, and 16km to the south
    .add(LatLng(37.35, -122.0)) // Closes the polyline.

// Get back the mutable Polyline
val polyline = map.addPolyline(polylineOptions)
polyline?.let {
    val isClickable = it.isClickable
    val isGeodesic = it.isGeodesic
    val isVisible = it.isVisible
    val color = it.color
    val width = it.width
    val zIndex = it.zIndex
    val points = it.points
}

      

Java

// Instantiates a new Polyline object and adds points to define a rectangle
PolylineOptions polylineOptions = new PolylineOptions()
    .add(new LatLng(37.35, -122.0))
    .add(new LatLng(37.45, -122.0))  // North of the previous point, but at the same longitude
    .add(new LatLng(37.45, -122.2))  // Same latitude, and 30km to the west
    .add(new LatLng(37.35, -122.2))  // Same longitude, and 16km to the south
    .add(new LatLng(37.35, -122.0)); // Closes the polyline.

// Get back the mutable Polyline
Polyline polyline = map.addPolyline(polylineOptions);

      

ম্যাপে আয়তাকার অংশটি নিচে দেখানো ছবির মতো দেখা যায়:

আয়তক্ষেত্রাকার পলিলাইন সহ ম্যাপ

পলিলাইন যোগ করার পরে তার আকার পরিবর্তন করতে, আপনি Polyline.setPoints() কল করতে এবং পলিলাইনের জন্য পয়েন্টের নতুন তালিকা প্রদান করতে পারবেন।

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

পলিলাইন কাস্টমাইজেশন

পলিলাইনের চেহারা কাস্টমাইজ করার বিভিন্ন উপায় রয়েছে:

  • মাল্টিকালার পলিলাইন পলিলাইন সেগমেন্টকে আলাদা আলাদা রঙে সেট করে।
  • গ্রেডিয়েন্ট পলিলাইন দুটি রঙের গ্রেডিয়েন্ট ব্যবহার করে পলিলাইনকে কালার করে।
  • স্ট্যাম্প করা পলিলাইন স্টাইল, রিপিট করা বিটম্যাপ ব্যবহার করে পলিলাইন স্টাইল করে।

পলিলাইন কাস্টমাইজেশন ব্যবহার করতে, আপনাকে Android-এর জন্য Maps SDK-এর 18.1.0 বা তার পরের ভার্সন ব্যবহার করতে হবে এবং Android রেন্ডারারের জন্য লেটেস্ট Maps SDK ব্যবহার করতে হবে।

একাধিক রঙের পলিলাইন তৈরি করা

মাল্টিকালার পলিলাইন সহ ম্যাপ

আপনি StyleSpan অবজেক্ট তৈরি করে এবং addSpan() বা addSpans() পদ্ধতি ব্যবহার করে PolylineOptions-এ যোগ করার মাধ্যমে, পলিলাইনের আলাদা আলাদা কালার সেগমেন্টে স্প্যান ব্যবহার করতে পারবেন। ডিফল্ট হিসেবে, অ্যারের প্রতিটি আইটেম সংশ্লিষ্ট লাইন সেগমেন্টের রঙ সেট করবে। লাল ও সবুজ সেগমেন্ট সহ পলিলাইন তৈরি করতে, নিম্নলিখিত উদাহরণে segment colors সেট করা দেখানো হয়েছে:

Kotlin

val line = map.addPolyline(
    PolylineOptions()
        .add(LatLng(47.6677146, -122.3470447), LatLng(47.6442757, -122.2814693))
        .addSpan(StyleSpan(Color.RED))
        .addSpan(StyleSpan(Color.GREEN))
)

      

Java

Polyline line = map.addPolyline(new PolylineOptions()
        .add(new LatLng(47.6677146,-122.3470447), new LatLng(47.6442757,-122.2814693))
        .addSpan(new StyleSpan(Color.RED))
        .addSpan(new StyleSpan(Color.GREEN)));

      

গ্রেডিয়েন্ট পলিলাইন তৈরি করা

গ্রেডিয়েন্ট পলিলাইন সহ ম্যাপ

আপনি দুটি ৩২-বিট আলফা-লাল-সবুজ-নীল (ARGB) পূর্ণসংখ্যা উল্লেখ করে গ্রেডিয়েন্ট নির্ধারণ করতে পারেন, যা স্ট্রোকের শুরু এবং শেষের রঙ নির্দিষ্ট করে। PolylineOptions.addSpan() কল করে শেপের বিকল্প অবজেক্টে এই প্রপার্টি সেট করুন। নিম্নলিখিত উদাহরণে Woodland Park Zoo থেকে Kirkland, WA পর্যন্ত লাল থেকে হলুদ গ্রেডিয়েন্ট পলিলাইন তৈরি করা দেখানো হয়েছে।

Kotlin

val line = map.addPolyline(
    PolylineOptions()
        .add(LatLng(47.6677146, -122.3470447), LatLng(47.6442757, -122.2814693))
        .addSpan(
            StyleSpan(
                StrokeStyle.gradientBuilder(
                    Color.RED,
                    Color.YELLOW
                ).build()
            )
        )
)

      

Java

Polyline line = map.addPolyline(new PolylineOptions()
        .add(new LatLng(47.6677146,-122.3470447), new LatLng(47.6442757,-122.2814693))
        .addSpan(new StyleSpan(StrokeStyle.gradientBuilder(Color.RED, Color.YELLOW).build())));

      

স্ট্যাম্প করা পলিলাইন তৈরি করা হচ্ছে

স্ট্যাম্প করা পলিলাইন সহ ম্যাপ

আপনি রিপিটিং বিটম্যাপ টেক্সচারে পলিলাইনের উপস্থিতি সেট করতে পারবেন। এটি করতে, TextureStyle-এর StampStyle তৈরি করুন, তারপর এখানে দেখানো PolylineOptions.addSpan() কল করে আকারের বিকল্প অবজেক্টে এই প্রপার্টি সেট করুন:

Kotlin

val stampStyle =
    TextureStyle.newBuilder(BitmapDescriptorFactory.fromResource(R.drawable.walking_dot)).build()
val span = StyleSpan(StrokeStyle.colorBuilder(Color.RED).stamp(stampStyle).build())
map.addPolyline(
    PolylineOptions()
        .add(LatLng(47.6677146, -122.3470447), LatLng(47.6442757, -122.2814693))
        .addSpan(span)
)

      

Java

StampStyle stampStyle =
        TextureStyle.newBuilder(BitmapDescriptorFactory.fromResource(R.drawable.walking_dot)).build();
StyleSpan span = new StyleSpan(StrokeStyle.colorBuilder(Color.RED).stamp(stampStyle).build());
map.addPolyline(new PolylineOptions()
        .add(new LatLng(47.6677146,-122.3470447), new LatLng(47.6442757,-122.2814693))
        .addSpan(span));

      

পলিলাইন ইভেন্ট

ডিফল্ট হিসেবে, পলিলাইনে ক্লিক করা যায় না। আপনি Polyline.setClickable(boolean) কল করে ক্লিক করার সুবিধা চালু বা বন্ধ করতে পারবেন।

ক্লিক করা যায় এমন পলিলাইন থেকে ক্লিক ইভেন্ট শোনার জন্য OnPolylineClickListener ব্যবহার করুন। ম্যাপে এই লিসনার সেট করতে, GoogleMap.setOnPolylineClickListener(OnPolylineClickListener)-কে কল করুন। কোনও ব্যবহারকারী পলিলাইনে ক্লিক করলে, আপনি একটি onPolylineClick(Polyline) কলব্যাক পাবেন।

বহুভুজ

Polygon অবজেক্টগুলি Polyline অবজেক্টের মতোই, কারণ এগুলি একটি নির্দিষ্ট ক্রমে সাজানো স্থানাঙ্কের সিরিজ নিয়ে গঠিত। তবে, পলিগনগুলি ওপেন-এন্ডেড না হয়ে, একটি ক্লোজড লুপের মধ্যে অঞ্চলগুলিকে সংজ্ঞায়িত করার জন্য ডিজাইন করা হয়েছে, যার ভেতরের অংশটি পূরণ করা হয়েছে।

আপনি যেভাবে ম্যাপে Polyline যোগ করেন, ঠিক সেইভাবেই Polygon যোগ করতে পারবেন। প্রথমে একটি PolygonOptions অবজেক্ট তৈরি করুন এবং এতে কিছু পয়েন্ট যোগ করুন। এইসব পয়েন্ট বহুভুজের আউটলাইন তৈরি করবে। তারপরে, আপনি GoogleMap.addPolygon(PolygonOptions) কল করে ম্যাপে বহুভুজ যোগ করেন, যা Polygon অবজেক্ট রিটার্ন করবে।

নিচে দেওয়া কোড স্নিপেট ম্যাপে একটি আয়তাকার অংশ যোগ করে।

Kotlin

// Instantiates a new Polygon object and adds points to define a rectangle
val rectOptions = PolygonOptions()
    .add(
        LatLng(37.35, -122.0),
        LatLng(37.45, -122.0),
        LatLng(37.45, -122.2),
        LatLng(37.35, -122.2),
        LatLng(37.35, -122.0)
    )

// Get back the mutable Polygon
val polygon = map.addPolygon(rectOptions)

      

Java

// Instantiates a new Polygon object and adds points to define a rectangle
PolygonOptions polygonOptions = new PolygonOptions()
    .add(new LatLng(37.35, -122.0),
        new LatLng(37.45, -122.0),
        new LatLng(37.45, -122.2),
        new LatLng(37.35, -122.2),
        new LatLng(37.35, -122.0));

// Get back the mutable Polygon
Polygon polygon = map.addPolygon(polygonOptions);

      

পলিগন যোগ করার পরে তার আকার পরিবর্তন করতে, আপনি Polygon.setPoints() কল করতে পারেন এবং পলিগনের আউটলাইনের জন্য পয়েন্টের নতুন তালিকা দিতে পারেন।

ম্যাপে পলিগন যোগ করার আগে ও পরে, উভয় ক্ষেত্রেই আপনি সেটির চেহারা কাস্টমাইজ করতে পারবেন। আরও বিবরণের জন্য নিচে অ্যাপিয়ারেন্স কাস্টমাইজ করা সংক্রান্ত বিভাগটি দেখুন।

বহুভুজ অটো-কমপ্লিশন

উপরের উদাহরণে পলিগনে পাঁচটি কোঅর্ডিনেট আছে, তবে লক্ষ্য করুন যে প্রথম ও শেষ কোঅর্ডিনেট একই লোকেশন, যা লুপকে সংজ্ঞায়িত করে। তবে, বাস্তবে, যেহেতু বহুভুজ বন্ধ এলাকাকে সংজ্ঞায়িত করে, তাই আপনাকে এই শেষ কোঅর্ডিনেট সংজ্ঞায়িত করতে হবে না। শেষ কোঅর্ডিনেট প্রথমটির থেকে আলাদা হলে, API অটোমেটিক কোঅর্ডিনেটের সিকোয়েন্সের শেষে প্রথম কোঅর্ডিনেট যোগ করে পলিগন "বন্ধ" করে দেবে।

নিচের দুটি পলিগন একই এবং এদের প্রত্যেকটির জন্য polygon.getPoints() কল করলে ৪টি পয়েন্টই রিটার্ন করবে।

Kotlin

val polygon1 = map.addPolygon(
    PolygonOptions()
        .add(
            LatLng(0.0, 0.0),
            LatLng(0.0, 5.0),
            LatLng(3.0, 5.0),
            LatLng(0.0, 0.0)
        )
        .strokeColor(Color.RED)
        .fillColor(Color.BLUE)
)
val polygon2 = map.addPolygon(
    PolygonOptions()
        .add(
            LatLng(0.0, 0.0),
            LatLng(0.0, 5.0),
            LatLng(3.0, 5.0)
        )
        .strokeColor(Color.RED)
        .fillColor(Color.BLUE)
)

      

Java

Polygon polygon1 = map.addPolygon(new PolygonOptions()
    .add(new LatLng(0, 0),
        new LatLng(0, 5),
        new LatLng(3, 5),
        new LatLng(0, 0))
    .strokeColor(Color.RED)
    .fillColor(Color.BLUE));

Polygon polygon2 = map.addPolygon(new PolygonOptions()
    .add(new LatLng(0, 0),
        new LatLng(0, 5),
        new LatLng(3, 5))
    .strokeColor(Color.RED)
    .fillColor(Color.BLUE));

      

ফাঁকা বহুভুজ তৈরি করা

জটিল আকার তৈরি করতে একাধিক পাথকে একটি Polygon অবজেক্টে একত্রিত করা যেতে পারে, যেমন ফিল করা রিং বা "ডোনাট" (যেখানে বহুভুজাকার এলাকা বহুভুজের ভিতরে "দ্বীপ" হিসেবে দেখা যায়)। জটিল আকার সবসময় একাধিক, সহজ, পাথের কম্পোজিশন।

একই এলাকায় দুটি পাথ অবশ্যই সংজ্ঞায়িত করতে হবে। দুটি অঞ্চলের মধ্যে যেটি বড় সেটি ফিল এরিয়া নির্ধারণ করে এবং এটি কোনও অতিরিক্ত বিকল্প ছাড়াই একটি সাধারণ পলিগন। তারপর, addHole() পদ্ধতিতে দ্বিতীয় পাথ পাস করুন। দ্বিতীয়, ছোট পাথটি বড় পাথ দিয়ে সম্পূর্ণভাবে ঘেরা থাকলে, মনে হবে যেন পলিগনের একটি অংশ সরিয়ে দেওয়া হয়েছে। যদি গর্তটি বহুভুজের রূপরেখাকে ছেদ করে, তাহলে বহুভুজটি কোনও ফিল ছাড়াই রেন্ডার করা হবে।

নিচের স্নিপেট একটি ছোট আয়তাকার ছিদ্র সহ একটি একক আয়তক্ষেত্র তৈরি করবে।

Kotlin

val hole = listOf(
    LatLng(1.0, 1.0),
    LatLng(1.0, 2.0),
    LatLng(2.0, 2.0),
    LatLng(2.0, 1.0),
    LatLng(1.0, 1.0)
)
val hollowPolygon = map.addPolygon(
    PolygonOptions()
        .add(
            LatLng(0.0, 0.0),
            LatLng(0.0, 5.0),
            LatLng(3.0, 5.0),
            LatLng(3.0, 0.0),
            LatLng(0.0, 0.0)
        )
        .addHole(hole)
        .fillColor(Color.BLUE)
)
hollowPolygon?.let {
    val isClickable = it.isClickable
    val isGeodesic = it.isGeodesic
    val isVisible = it.isVisible
    val fillColor = it.fillColor
    val strokeColor = it.strokeColor
    val strokeWidth = it.strokeWidth
    val zIndex = it.zIndex
    val points = it.points
    val holes = it.holes
}

      

Java

List<LatLng> hole = Arrays.asList(new LatLng(1, 1),
    new LatLng(1, 2),
    new LatLng(2, 2),
    new LatLng(2, 1),
    new LatLng(1, 1));
Polygon hollowPolygon = map.addPolygon(new PolygonOptions()
    .add(new LatLng(0, 0),
        new LatLng(0, 5),
        new LatLng(3, 5),
        new LatLng(3, 0),
        new LatLng(0, 0))
    .addHole(hole)
    .fillColor(Color.BLUE));

      

নিচে দেখানো ছবির মতো ম্যাপে ফাঁপা পলিগন দেখা যায়:

ফাঁপা আয়তাকার পলিলাইন সহ ম্যাপ

Polygon ইভেন্ট

ডিফল্ট হিসেবে, বহুভুজে ক্লিক করা যায় না। Polygon.setClickable(boolean) কল করে আপনি ক্লিক করার সুবিধা চালু বা বন্ধ করতে পারবেন।

ক্লিক করা যায় এমন পলিগনে ক্লিক ইভেন্ট শুনতে OnPolygonClickListener ব্যবহার করুন। ম্যাপে এই লিসেনার সেট করতে, GoogleMap.setOnPolygonClickListener(OnPolygonClickListener) কল করুন। কোনও ব্যবহারকারী কোনও বহুভুজ আকৃতিতে ক্লিক করলে, আপনি একটি onPolygonClick(Polygon) কলব্যাক পাবেন।

সার্কেল

বৃত্ত সহ ম্যাপ

জেনেরিক Polygon ক্লাস ছাড়াও, Maps API-তে Circle অবজেক্টের জন্য নির্দিষ্ট ক্লাস অন্তর্ভুক্ত থাকে, যাতে তাদের কনস্ট্রাকশন সহজ করা যায়।

বৃত্ত আঁকার জন্য আপনাকে নিম্নলিখিত দুটি প্রপার্টি উল্লেখ করতে হবে:

  • center হিসেবে LatLng.
  • radius মিটারে।

তারপর, পৃথিবীর পৃষ্ঠের সমস্ত বিন্দুর সেটকে একটি বৃত্ত হিসেবে সংজ্ঞায়িত করা হয় যা প্রদত্ত center থেকে radius মিটার দূরে অবস্থিত। Maps API-এর ব্যবহার করা মার্কেটর প্রজেকশন যেভাবে সমতল পৃষ্ঠে গোলক রেন্ডার করে, তার কারণে নিরক্ষরেখার কাছাকাছি অবস্থিত হলে এটি ম্যাপে প্রায় নিখুঁত বৃত্ত হিসেবে দেখা যাবে এবং বৃত্তটি নিরক্ষরেখা থেকে দূরে সরে যাওয়ার সাথে সাথে ক্রমশ অ-বৃত্তাকার (স্ক্রিনে) দেখাবে।

বৃত্ত যোগ করার পরে তার আকার পরিবর্তন করতে, আপনি Circle.setRadius() বা Circle.setCenter() কল করে নতুন ভ্যালু দিতে পারেন।

ম্যাপে যোগ করার আগে এবং পরে, উভয় ক্ষেত্রেই আপনি বৃত্তের চেহারা কাস্টমাইজ করতে পারবেন। আরও বিবরণের জন্য নিচে অ্যাপিয়ারেন্স কাস্টমাইজ করা সংক্রান্ত বিভাগটি দেখুন।

নিম্নলিখিত কোড স্নিপেটটি একটি CircleOptions অবজেক্ট তৈরি করে এবং GoogleMap.addCircle(CircleOptions) কল করে ম্যাপে একটি বৃত্ত যোগ করে:

Kotlin

// Instantiates a new CircleOptions object and defines the center and radius
val circleOptions = CircleOptions()
    .center(LatLng(37.4, -122.1))
    .radius(1000.0) // In meters

// Get back the mutable Circle
val circle = map.addCircle(circleOptions)
circle?.let {
    val isClickable = it.isClickable
    val isVisible = it.isVisible
    val center = it.center
    val radius = it.radius
    val fillColor = it.fillColor
    val strokeWidth = it.strokeWidth
    val zIndex = it.zIndex
}

      

Java

// Instantiates a new CircleOptions object and defines the center and radius
CircleOptions circleOptions = new CircleOptions()
    .center(new LatLng(37.4, -122.1))
    .radius(1000); // In meters

// Get back the mutable Circle
Circle circle = map.addCircle(circleOptions);

      

চেনাশোনার ইভেন্ট

ডিফল্ট হিসেবে, সার্কেলে ক্লিক করা যায় না। আপনি CircleOptions.clickable(boolean)-এর সাথে GoogleMap.addCircle()-কে কল করে অথবা Circle.setClickable(boolean)-কে কল করে ক্লিক করার সুবিধা চালু বা বন্ধ করতে পারবেন।

ক্লিক করা যায় এমন বৃত্তে ক্লিক ইভেন্ট শোনার জন্য OnCircleClickListener ব্যবহার করুন। ম্যাপে এই লিসনার সেট করতে, GoogleMap.setOnCircleClickListener(OnCircleClickListener)-কে কল করুন।

ব্যবহারকারী কোনও সার্কেলে ক্লিক করলে, আপনি একটি onCircleClick(Circle) কলব্যাক পাবেন, যেমনটি নিম্নলিখিত কোড স্যাম্পেলে দেখানো হয়েছে:

Kotlin

val circle = map.addCircle(
    CircleOptions()
        .center(LatLng(37.4, -122.1))
        .radius(1000.0)
        .strokeWidth(10f)
        .strokeColor(Color.GREEN)
        .fillColor(Color.argb(128, 255, 0, 0))
        .clickable(true)
)
map.setOnCircleClickListener {
    // Flip the r, g and b components of the circle's stroke color.
    val strokeColor = it.strokeColor xor 0x00ffffff
    it.strokeColor = strokeColor
}

      

Java

Circle circle = map.addCircle(new CircleOptions()
    .center(new LatLng(37.4, -122.1))
    .radius(1000)
    .strokeWidth(10)
    .strokeColor(Color.GREEN)
    .fillColor(Color.argb(128, 255, 0, 0))
    .clickable(true));

map.setOnCircleClickListener(new GoogleMap.OnCircleClickListener() {
    @Override
    public void onCircleClick(Circle circle) {
        // Flip the r, g and b components of the circle's stroke color.
        int strokeColor = circle.getStrokeColor() ^ 0x00ffffff;
        circle.setStrokeColor(strokeColor);
    }
});

      

কেমন দেখতে লাগবে তা কাস্টমাইজ করা

আপনি কোনও শেপের চেহারা পরিবর্তন করতে পারেন ম্যাপে যোগ করার আগে (অপশন অবজেক্টে পছন্দসই প্রপার্টি নির্দিষ্ট করে) অথবা ম্যাপে যোগ করার পরে। এছাড়াও, সব প্রপার্টির জন্য গেটার এক্সপোজ করা হয় যাতে আপনি সহজেই শেপের বর্তমান স্টেট অ্যাক্সেস করতে পারেন।

নিম্নলিখিত স্নিপেট মেলবোর্ন থেকে পার্থ পর্যন্ত জিওডেসিক সেগমেন্ট সহ একটি ঘন নীল পলিলাইন যোগ করে। নিচের বিভাগগুলি থেকে এইসব প্রপার্টি সম্পর্কে আরও বিস্তারিতভাবে জানতে পারবেন।

Kotlin

val polyline = map.addPolyline(
    PolylineOptions()
        .add(LatLng(-37.81319, 144.96298), LatLng(-31.95285, 115.85734))
        .width(25f)
        .color(Color.BLUE)
        .geodesic(true)
)

      

Java

Polyline polyline = map.addPolyline(new PolylineOptions()
    .add(new LatLng(-37.81319, 144.96298), new LatLng(-31.95285, 115.85734))
    .width(25)
    .color(Color.BLUE)
    .geodesic(true));

      

নিচে দেখানো ম্যাপের মতো করে ম্যাপটি দেখা যাবে:

মেলবোর্ন থেকে পার্থ পর্যন্ত পলিলাইন সহ ম্যাপ

মনে রাখবেন: এগুলির বেশিরভাগই বর্ণিত যেকোনও আকৃতির ক্ষেত্রে প্রযোজ্য হলেও, কিছু প্রপার্টি নির্দিষ্ট আকৃতির ক্ষেত্রে প্রযোজ্য নাও হতে পারে (যেমন, পলিলাইনের কোনও ফিল কালার থাকতে পারে না কারণ এর কোনও ইন্টিরিয়র নেই)।

স্ট্রোকের রঙ

স্ট্রোকের রঙ হল একটি ৩২-বিট আলফা-লাল-সবুজ-নীল (ARGB) পূর্ণসংখ্যা যা আকারের স্ট্রোকের অস্বচ্ছতা এবং রঙ নির্দিষ্ট করে। *Options.strokeColor() (বা পলিলাইনের ক্ষেত্রে PolylineOptions.color()) কল করে আকারের বিকল্প অবজেক্টে এই প্রপার্টি সেট করুন। অনির্দিষ্ট থাকলে, ডিফল্ট স্ট্রোক কালার কালো (Color.BLACK) হয়।

ম্যাপে আকার যোগ করার পরে, getStrokeColor() (বা পলিলাইনের জন্য getColor()) কল করে স্ট্রোকের রঙ অ্যাক্সেস করা যেতে পারে এবং setStrokeColor() (setColor() for a polyline) কল করে পরিবর্তন করা যেতে পারে।

পূরণ রঙ

ভরাট করার রঙ শুধুমাত্র বহুভুজ ও বৃত্তের ক্ষেত্রে প্রযোজ্য। এটি পলিলাইনের ক্ষেত্রে প্রযোজ্য নয় কারণ এগুলির কোনও নির্দিষ্ট ইন্টেরিয়র নেই। কোনও বহুভুজের ক্ষেত্রে, এর গর্তের ভেতরের অঞ্চলগুলি বহুভুজের ভেতরের অংশের অংশ নয় এবং ভরাট করার রঙ সেট করা থাকলে রঙ করা হবে না।

ভরাট করার রঙ হল ৩২-বিট আলফা-লাল-সবুজ-নীল (ARGB) পূর্ণসংখ্যা যা আকারের ভেতরের অংশের অস্বচ্ছতা ও রঙ নির্দিষ্ট করে। *Options.fillColor() কল করে শেপের বিকল্প অবজেক্টে এই প্রপার্টি সেট করুন। নির্দিষ্ট না করা থাকলে, ডিফল্ট স্ট্রোক কালার হল ট্রান্সপারেন্ট (Color.TRANSPARENT)।

ম্যাপে আকার যোগ করার পরে, getFillColor() কল করে ভরাট করার রঙ অ্যাক্সেস করা যেতে পারে এবং setFillColor() কল করে পরিবর্তন করা যেতে পারে।

স্ট্রোকের প্রস্থ

লাইন স্ট্রোকের প্রস্থ, পিক্সেল (px) হিসেবে ফ্লোট। ম্যাপ জুম করা হলে প্রস্থ স্কেল হয় না (অর্থাৎ, সব জুম লেভেলে একটি আকারের একই স্ট্রোক প্রস্থ থাকবে)। *Options.strokeWidth() (অথবা পলিলাইনের জন্য PolylineOptions.width()) কল করে শেপের বিকল্প অবজেক্টে এই প্রপার্টি সেট করুন। নির্দিষ্ট করা না থাকলে, ডিফল্ট স্ট্রোকের প্রস্থ ১০ পিক্সেল হয়।

ম্যাপে আকার যোগ করার পরে, getStrokeWidth() (বা পলিলাইনের জন্য getWidth()) কল করে স্ট্রোকের প্রস্থ অ্যাক্সেস করা যেতে পারে এবং setStrokeWidth() (setWidth() for a polyline) কল করে পরিবর্তন করা যেতে পারে।

স্ট্রোক প্যাটার্ন

ডিফল্ট স্ট্রোক প্যাটার্ন হল পলিলাইন এবং পলিগন ও বৃত্তের আউটলাইনের জন্য একটি সলিড লাইন। আপনি PatternItem অবজেক্টের কাস্টম স্ট্রোক প্যাটার্ন নির্দিষ্ট করতে পারবেন, যেখানে প্রতিটি আইটেম হল ড্যাশ, ডট বা গ্যাপ।

নিচের নমুনাটি একটি পলিলাইনের জন্য একটি ডট, তারপরে ২০ পিক্সেল দৈর্ঘ্যের একটি গ্যাপ, ৩০ পিক্সেল দৈর্ঘ্যের একটি ড্যাশ এবং আরেকটি ২০-পিক্সেল গ্যাপের পুনরাবৃত্তিমূলক সিকোয়েন্সের প্যাটার্ন সেট করে।

Kotlin

val pattern = listOf(
    Dot(), Gap(20F), Dash(30F), Gap(20F)
)
polyline?.pattern = pattern

      

Java

List<PatternItem> pattern = Arrays.asList(
    new Dot(), new Gap(20), new Dash(30), new Gap(20));
polyline.setPattern(pattern);

      

আকৃতির জন্য নির্দিষ্ট করা প্রথম ভার্টেক্সে প্রথম প্যাটার্ন আইটেম দিয়ে শুরু করে, লাইন বরাবর প্যাটার্নটি পুনরাবৃত্তি হয়।

জয়েন্টের ধরন

পলিলাইন ও বহুভুজের আউটলাইনের জন্য, ডিফল্ট ফিক্সড মাইটার জয়েন্ট টাইপ পরিবর্তন করতে, আপনি একটি বেভেল বা রাউন্ড JointType নির্দিষ্ট করতে পারেন।

নিম্নলিখিত স্যাম্পেলটি একটি পলিলাইনে রাউন্ড জয়েন্ট টাইপ প্রয়োগ করে:

Kotlin

polyline?.jointType = JointType.ROUND

      

Java

polyline.setJointType(JointType.ROUND);

      

জয়েন্টের ধরন লাইনের ইন্টার্নাল বেন্ডকে প্রভাবিত করে। লাইনের স্ট্রোক প্যাটার্নে ড্যাশ থাকলে, ড্যাশ জয়েন্টের উপর দিয়ে গেলে জয়েন্টের ধরনও প্রযোজ্য হয়। ডট সবসময় বৃত্তাকার হয়, তাই জয়েন্টের ধরন ডটের উপর কোনও প্রভাব ফেলে না।

লাইন ক্যাপস

আপনি পলিলাইনের প্রতিটি প্রান্তের জন্য Cap স্টাইল নির্দিষ্ট করতে পারবেন। বিকল্পগুলি হল বাট (ডিফল্ট), স্কোয়ার, রাউন্ড বা কাস্টম বিটম্যাপ। PolylineOptions.startCap এবং PolylineOptions.endCap-এ স্টাইল সেট করুন অথবা উপযুক্ত গেটার ও সেটার পদ্ধতি ব্যবহার করুন।

নিচের স্নিপেটটি একটি পলিলাইনের শুরুতে একটি রাউন্ড ক্যাপ নির্দিষ্ট করে।

Kotlin

polyline?.startCap = RoundCap()

      

Java

polyline.setStartCap(new RoundCap());

      

নিম্নলিখিত স্নিপেটটি এন্ড ক্যাপের জন্য একটি কাস্টম বিটম্যাপ নির্দিষ্ট করে:

Kotlin

polyline?.endCap = CustomCap(BitmapDescriptorFactory.fromResource(R.drawable.arrow), 16F)

      

Java

polyline.setEndCap(
    new CustomCap(BitmapDescriptorFactory.fromResource(R.drawable.arrow), 16));

      

আপনি কাস্টম বিটম্যাপ ব্যবহার করলে, আপনাকে পিক্সেলে রেফারেন্স স্ট্রোকের প্রস্থ উল্লেখ করতে হবে। API সেই অনুযায়ী বিটম্যাপ স্কেল করে। রেফারেন্স স্ট্রোকের প্রস্থ হল স্ট্রোকের প্রস্থ যা আপনি ক্যাপের জন্য বিটম্যাপ ছবি ডিজাইন করার সময়, ছবির আসল ডাইমেনশনে ব্যবহার করেছিলেন। ডিফল্ট রেফারেন্স স্ট্রোকের প্রস্থ হল ১০ পিক্সেল। ইঙ্গিত: রেফারেন্স স্ট্রোকের প্রস্থ নির্ধারণ করতে, আপনার বিটম্যাপ ইমেজটি কোনও ইমেজ এডিটরে ১০০% জুম করে খুলুন এবং ইমেজের সাপেক্ষে লাইন স্ট্রোকের কাঙ্ক্ষিত প্রস্থ প্লট করুন।

বিটম্যাপ তৈরি করতে BitmapDescriptorFactory.fromResource() ব্যবহার করলে, ডেনসিটি-ইন্ডিপেন্ডেন্ট রিসোর্স (nodpi) ব্যবহার করছেন কিনা তা ভালভাবে দেখে নিন।

জিওডেসিক সেগমেন্ট

জিওডেসিক সেটিং শুধুমাত্র পলিলাইন এবং পলিগনের ক্ষেত্রে প্রযোজ্য। এটি সার্কেলের ক্ষেত্রে প্রযোজ্য নয় কারণ সার্কেলকে সেগমেন্টের সংগ্রহ হিসেবে সংজ্ঞায়িত করা হয় না।

জিওডেসিক সেটিং নির্ধারণ করে যে পলিলাইন/পলিগনের পরপর ভার্টেক্সের মধ্যে লাইন সেগমেন্ট কীভাবে আঁকা হবে। জিওডেসিক সেগমেন্ট হল সেগুলি যা পৃথিবীর পৃষ্ঠ (একটি গোলক) বরাবর সবচেয়ে ছোট পথ অনুসরণ করে এবং প্রায়শই মার্কেটর প্রজেকশন সহ একটি ম্যাপে বাঁকা রেখা হিসাবে প্রদর্শিত হয়। নন-জিওডেসিক সেগমেন্টগুলি ম্যাপে সরল রেখা হিসেবে আঁকা হয়।

শেপের বিকল্প অবজেক্টে এই প্রপার্টি সেট করতে *Options.geodesic() কল করুন, যেখানে true থেকে বোঝা যায় যে সেগমেন্টগুলি জিওডেসিক হিসেবে আঁকতে হবে এবং false থেকে বোঝা যায় যে সেগমেন্টগুলি সরলরেখা হিসেবে আঁকতে হবে। নির্দিষ্ট করা না থাকলে, ডিফল্ট হিসেবে নন-জিওডেসিক সেগমেন্ট (false) ব্যবহার করা হয়।

ম্যাপে আকার যোগ করার পরে, isGeodesic() কল করে জিওডেসিক সেটিং অ্যাক্সেস করা যেতে পারে এবং setGeodesic() কল করে পরিবর্তন করা যেতে পারে।

Z-ইনডেক্স

z-ইনডেক্স ম্যাপে অন্যান্য ওভারলে (অন্যান্য আকার, গ্রাউন্ড ওভারলে এবং টাইল ওভারলে)-এর সাপেক্ষে এই আকারের স্ট্যাক অর্ডার নির্দিষ্ট করে। যে ওভারলেয়ের z-ইনডেক্স বেশি, সেটি কম z-ইনডেক্স থাকা ওভারলেয়ের উপরে ড্র করা হয়। একই z-ইনডেক্স সহ দুটি ওভারলে একটি অনির্দিষ্ট ক্রমে আঁকা হয়।

মনে রাখবেন, মার্কার সবসময় অন্যান্য ওভারলের উপরে আঁকা হয়, অন্যান্য ওভারলের z-ইনডেক্স যাই হোক না কেন।

*Options.zIndex() কল করে শেপের বিকল্প অবজেক্টে এই প্রপার্টি সেট করুন। নির্দিষ্ট করা না থাকলে, ডিফল্ট z-ইনডেক্স হল 0. ম্যাপে আকার যোগ করার পরে, getZIndex() কল করে z-ইনডেক্স অ্যাক্সেস করা যেতে পারে এবং setZIndex() কল করে পরিবর্তন করা যেতে পারে।

দৃশ্যমানতা

দৃশ্যমানতা নির্দিষ্ট করে যে ম্যাপে শেপ আঁকা উচিত কিনা, যেখানে true ইঙ্গিত করে যে এটি আঁকা উচিত এবং false ইঙ্গিত করে যে এটি আঁকা উচিত নয়। এটি আপনাকে সাময়িকভাবে ম্যাপে কোনও শেপ না দেখানোর অনুমতি দেয়। ম্যাপ থেকে কোনও শেপ স্থায়ীভাবে সরাতে, সেই শেপে remove() কল করুন।

*Options.visible() কল করে শেপের বিকল্প অবজেক্টে এই প্রপার্টি সেট করুন। উল্লেখ করা না থাকলে, ডিফল্ট দৃশ্যমানতা হল true। ম্যাপে কোনও শেপ যোগ করার পরে, isVisible() কল করে দৃশ্যমানতা অ্যাক্সেস করা যেতে পারে এবং setVisible() কল করে তা পরিবর্তন করা যেতে পারে।

শেপের সাথে ডেটা যুক্ত করুন

আপনি কোনও পলিলাইন, বহুভুজ বা বৃত্তের সাথে একটি নির্বিচারে ডেটা অবজেক্ট স্টোর করতে পারেন শেপের setTag() পদ্ধতি ব্যবহার করে এবং getTag() ব্যবহার করে অবজেক্টটি পুনরুদ্ধার করতে পারেন। যেমন, পলিলাইন সহ ডেটা অবজেক্ট স্টোর করতে Polyline.setTag() কল করুন এবং ডেটা অবজেক্ট ফিরিয়ে আনতে Polyline.getTag() কল করুন।

নিচের কোডটি নির্দিষ্ট করা পলিলাইনের জন্য একটি ইচ্ছামতো ট্যাগ (A) নির্ধারণ করে:

Kotlin

val polyline = map.addPolyline(
    PolylineOptions()
        .clickable(true)
        .add(
            LatLng(-35.016, 143.321),
            LatLng(-34.747, 145.592),
            LatLng(-34.364, 147.891),
            LatLng(-33.501, 150.217),
            LatLng(-32.306, 149.248),
            LatLng(-32.491, 147.309)
        )
)
polyline?.tag = "A"

      

Java

Polyline polyline = map.addPolyline((new PolylineOptions())
    .clickable(true)
    .add(new LatLng(-35.016, 143.321),
        new LatLng(-34.747, 145.592),
        new LatLng(-34.364, 147.891),
        new LatLng(-33.501, 150.217),
        new LatLng(-32.306, 149.248),
        new LatLng(-32.491, 147.309)));

polyline.setTag("A");

      

শেপের সাথে ডেটা স্টোর ও রিট্রিভ করার সুবিধা কখন কাজে লাগে তার কিছু উদাহরণ এখানে দেওয়া হল:

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