অঙ্কন স্তর (লাইব্রেরি)

1. ওভারভিউ
2. লাইব্রেরি ব্যবহার করে
3. ড্রয়িং ম্যানেজার বিকল্প
4. অঙ্কন সরঞ্জাম নিয়ন্ত্রণ আপডেট করা হচ্ছে
5. ইভেন্ট অঙ্কন

ওভারভিউ

DrawingManager ক্লাস ব্যবহারকারীদের মানচিত্রে বহুভুজ, আয়তক্ষেত্র, পলিলাইন, বৃত্ত এবং মার্কার আঁকার জন্য একটি গ্রাফিকাল ইন্টারফেস প্রদান করে।

লাইব্রেরি ব্যবহার করে

অঙ্কন সরঞ্জাম হল একটি স্বয়ংসম্পূর্ণ লাইব্রেরি, প্রধান মানচিত্র API জাভাস্ক্রিপ্ট কোড থেকে আলাদা। এই লাইব্রেরির মধ্যে থাকা কার্যকারিতা ব্যবহার করতে, আপনাকে প্রথমে মানচিত্র API বুটস্ট্র্যাপ URL-এ libraries প্যারামিটার ব্যবহার করে এটি লোড করতে হবে:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=drawing&callback=initMap">
</script>

একবার আপনি লাইব্রেরি প্যারামিটার যোগ করলে, আপনি নিম্নরূপ একটি DrawingManager অবজেক্ট তৈরি করতে পারেন:

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

ড্রয়িং ম্যানেজার বিকল্প

DrawingManager কনস্ট্রাক্টর বিকল্পগুলির একটি সেট নেয় যা প্রদর্শনের জন্য নিয়ন্ত্রণের সেট, নিয়ন্ত্রণের অবস্থান এবং প্রাথমিক অঙ্কন অবস্থাকে সংজ্ঞায়িত করে।

• DrawingManager এর drawingMode বৈশিষ্ট্য DrawingManager-এর প্রাথমিক অঙ্কন অবস্থা সংজ্ঞায়িত করে। এটি একটি google.maps.drawing.OverlayType ধ্রুবক গ্রহণ করে। ডিফল্ট হল null , যে ক্ষেত্রে কার্সার একটি অ-অঙ্কন মোডে থাকে যখন DrawingManager আরম্ভ করা হয়।
• DrawingManager drawingControl বৈশিষ্ট্য মানচিত্রে অঙ্কন সরঞ্জাম নির্বাচন ইন্টারফেসের দৃশ্যমানতা নির্ধারণ করে। এটি একটি বুলিয়ান মান গ্রহণ করে।
• এছাড়াও আপনি নিয়ন্ত্রণের অবস্থান নির্ধারণ করতে পারেন এবং DrawingManager -এর drawingControlOptions বৈশিষ্ট্য ব্যবহার করে নিয়ন্ত্রণে উপস্থাপিত হওয়া ওভারলেগুলির প্রকারগুলিও নির্ধারণ করতে পারেন।
  • position মানচিত্রে অঙ্কন নিয়ন্ত্রণের অবস্থান নির্ধারণ করে এবং একটি google.maps.ControlPosition ধ্রুবক গ্রহণ করে।
  • drawingModes হল google.maps.drawing.OverlayType ধ্রুবকগুলির একটি অ্যারে, এবং অঙ্কন নিয়ন্ত্রণ আকৃতি পিকারে অন্তর্ভুক্ত করার জন্য ওভারলে প্রকারগুলিকে সংজ্ঞায়িত করে৷ হ্যান্ড আইকনটি সর্বদা উপস্থিত থাকবে, ব্যবহারকারীকে অঙ্কন ছাড়াই মানচিত্রের সাথে ইন্টারঅ্যাক্ট করতে দেয়। কন্ট্রোলে থাকা টুলগুলির ক্রমটি অ্যারেতে ঘোষিত ক্রম অনুসারে মিলবে।
• প্রতিটি ধরণের ওভারলেকে ডিফল্ট বৈশিষ্ট্যের একটি সেট বরাদ্দ করা যেতে পারে, যা প্রথম তৈরি করার সময় ওভারলেটির উপস্থিতি নির্ধারণ করে। এই ওভারলে এর {overlay}Options বৈশিষ্ট্যে সংজ্ঞায়িত করা হয়েছে (যেখানে {overlay} ওভারলে প্রকারের প্রতিনিধিত্ব করে)। উদাহরণস্বরূপ, একটি বৃত্তের ভরাট বৈশিষ্ট্য, স্ট্রোক বৈশিষ্ট্য, zIndex এবং ক্লিকযোগ্যতা circleOptions বৈশিষ্ট্য দ্বারা সংজ্ঞায়িত করা যেতে পারে। কোনো আকার, অবস্থান, বা মানচিত্রের মান পাস করা হলে, সেগুলি উপেক্ষা করা হয়। কোন বৈশিষ্ট্যগুলি সেট করা যেতে পারে তার সম্পূর্ণ বিবরণের জন্য, API রেফারেন্স ডকুমেন্টেশন দেখুন।

দ্রষ্টব্য: এটি তৈরি হওয়ার পরে একটি আকৃতি ব্যবহারকারী-সম্পাদনাযোগ্য করতে, এটির editable সম্পত্তি true সেট করুন।

টাইপস্ক্রিপ্ট

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    }
  );

  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE,
      ],
    },
    markerOptions: {
      icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    },
    circleOptions: {
      fillColor: "#ffff00",
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1,
    },
  });

  drawingManager.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

জাভাস্ক্রিপ্ট

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE,
      ],
    },
    markerOptions: {
      icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    },
    circleOptions: {
      fillColor: "#ffff00",
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1,
    },
  });

  drawingManager.setMap(map);
}

window.initMap = initMap;
index.js

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত হয়েছে।

উদাহরণ দেখুন

নমুনা চেষ্টা করুন

JSFiddle.net গুগল ক্লাউড শেল

অঙ্কন সরঞ্জাম নিয়ন্ত্রণ আপডেট করা হচ্ছে

একবার DrawingManager অবজেক্ট তৈরি হয়ে গেলে, আপনি setOptions() কল করে এবং নতুন মান পাস করে এটি আপডেট করতে পারেন।

drawingManager.setOptions({
  drawingControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT,
    drawingModes: ['marker']
  }
});

অঙ্কন সরঞ্জাম নিয়ন্ত্রণ লুকাতে বা দেখানোর জন্য:

// To hide:
drawingManager.setOptions({
  drawingControl: false
});

// To show:
drawingManager.setOptions({
  drawingControl: true
});

map বস্তু থেকে অঙ্কন সরঞ্জাম নিয়ন্ত্রণ সরাতে:

drawingManager.setMap(null);

ড্রয়িং কন্ট্রোল লুকিয়ে রাখলে ড্রয়িং টুল কন্ট্রোল ডিসপ্লে হয় না, কিন্তু DrawingManager ক্লাসের সমস্ত কার্যকারিতা এখনও পাওয়া যায়। এইভাবে, আপনি চাইলে আপনার নিজের নিয়ন্ত্রণ বাস্তবায়ন করতে পারেন। map বস্তু থেকে DrawingManager অপসারণ সমস্ত অঙ্কন কার্যকারিতা নিষ্ক্রিয় করে; অঙ্কন বৈশিষ্ট্যগুলি পুনরুদ্ধার করতে হলে এটি অবশ্যই drawingManager.setMap(map) এর সাথে মানচিত্রের সাথে পুনরায় সংযুক্ত করতে হবে, অথবা একটি নতুন DrawingManager অবজেক্ট তৈরি করতে হবে।

ইভেন্ট অঙ্কন

যখন একটি আকৃতি ওভারলে তৈরি করা হয়, তখন দুটি ইভেন্ট চালিত হয়:

• একটি {overlay}complete ইভেন্ট (যেখানে {overlay} ওভারলে প্রকারকে প্রতিনিধিত্ব করে, যেমন circlecomplete , polygoncomplete ইত্যাদি)। ওভারলে একটি রেফারেন্স একটি যুক্তি হিসাবে পাস করা হয়.
• একটি overlaycomplete ইভেন্ট। একটি বস্তু আক্ষরিক, OverlayType এবং ওভারলে একটি রেফারেন্স ধারণকারী, একটি যুক্তি হিসাবে পাস করা হয়.

google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  var radius = circle.getRadius();
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == 'circle') {
    var radius = event.overlay.getRadius();
  }
});

মনে রাখবেন google.maps.Map ইভেন্টগুলি, যেমন click এবং mousemove ম্যাপে আঁকার সময় অক্ষম থাকে৷