आकार और लाइन

प्लैटफ़ॉर्म चुनें: Android iOS

अपने मैप में अलग-अलग आकार जोड़े जा सकते हैं. शेप, मैप पर मौजूद एक ऑब्जेक्ट होता है. यह LatLng निर्देशांक सिस्टम से जुड़ा होता है. Maps JavaScript API में फ़ोटोरियलिस्टिक 3D मैप की सुविधा, मैप में लाइनों और पॉलीगॉन जोड़ने की सुविधा के साथ काम करती है.

पॉलीलाइन

अपने मैप पर लाइन बनाने के लिए, पॉलीलाइन का इस्तेमाल करें. Polyline3DElement क्लास, मैप पर कनेक्ट किए गए लाइन सेगमेंट के लीनियर ओवरले को तय करती है. Polyline ऑब्जेक्ट में LatLng जगहों का कलेक्शन होता है. साथ ही, यह लाइन सेगमेंट की एक सीरीज़ बनाता है, जो उन जगहों को क्रम से जोड़ती है.

पॉलीलाइन जोड़ना

Polyline कन्स्ट्रक्टर, Polyline3DElementOptions का एक सेट लेता है, जिसमें लाइन के LatLng निर्देशांक और पॉलीलाइन के विज़ुअल व्यवहार में बदलाव करने के लिए स्टाइल का एक सेट शामिल होता है.

पॉलीलाइन ऑब्जेक्ट, मैप पर सीधे सेगमेंट की सीरीज़ के तौर पर खींचे जाते हैं. लाइन बनाते समय, Polyline3DElementOptions में लाइन के स्ट्रोक के लिए कस्टम रंग, चौड़ाई, ओपैसिटी, ऊंचाई, और ज्यामितीय स्टाइल के विकल्प तय किए जा सकते हैं. इसके अलावा, लाइन बनाने के बाद भी इन प्रॉपर्टी में बदलाव किया जा सकता है. पॉलीलाइन में ये स्ट्रोक स्टाइल इस्तेमाल किए जा सकते हैं:

  • outerColor: "#FFFFFF" फ़ॉर्मैट का हेक्साडेसिमल एचटीएमएल रंग.
  • outerWidth: यह संख्या वाली वैल्यू, 0.0 और 1.0 के बीच होनी चाहिए. इसे strokeWidth के प्रतिशत के तौर पर समझा जाता है.
  • strokeColor: "#FFFFFF" फ़ॉर्मैट का हेक्साडेसिमल एचटीएमएल रंग.
  • strokeWidth: लाइन की चौड़ाई, पिक्सल में.
  • geodesic: पॉलीगॉन के किनारे, पृथ्वी के कर्व को फ़ॉलो करते हैं या सीधी लाइनों के तौर पर खींचे जाते हैं.
  • altitudeMode: निर्देशांक में ऊंचाई के कॉम्पोनेंट का विश्लेषण कैसे किया जाता है
  • drawsOccludedSegments: यह एक बूलियन वैल्यू है. इससे पता चलता है कि ऑब्जेक्ट (जैसे, बिल्डिंग) से छिपे हुए पॉलीगॉन के हिस्सों को दिखाना है या नहीं.
  • extruded: यह एक बूलियन है. इससे पता चलता है कि पॉलीलाइन को ग्राउंड से कनेक्ट किया जाना चाहिए या नहीं.
async function init() {
    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

    const map = new Map3DElement({
      center: { lat: 37.772675996068915, lng: -122.3978382542777, altitude: 2500 },
      tilt: 45,
      heading: 5.9743656,
      mode: MapMode.HYBRID,
    });

    const { Polyline3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polylineOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 10,
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
    }
    const polyline = new google.maps.maps3d.Polyline3DElement(polylineOptions)

    polyline.coordinates = [
      {lat: 37.80515638571346, lng: -122.4032569467164},
      {lat: 37.80337073509504, lng: -122.4012878349353},
      {lat: 37.79925208843463, lng: -122.3976697250461},
      {lat: 37.7989102378512, lng: -122.3983408725656},
      {lat: 37.79887832784348, lng: -122.3987094864192},
      {lat: 37.79786443410338, lng: -122.4066878788802},
      {lat: 37.79549248916587, lng: -122.4032992702785},
      {lat: 37.78861484290265, lng: -122.4019489189814},
      {lat: 37.78618687561075, lng: -122.398969592545},
      {lat: 37.7892310309145, lng: -122.3951458683092},
      {lat: 37.7916358762409, lng: -122.3981969390652}
    ];

    map.append(polyline)
    document.body.append(map);
}
init();

इंटरैक्टिव पॉलीलाइन

नीचे दिए गए उदाहरण में, क्लिक इवेंट को रजिस्टर करने के बाद, पॉलीलाइन के स्ट्रोक का रंग बदला गया है.

async function init() {
  const colors = ["red", "blue", "green", "yellow"];

  const { Map3DElement, MapMode, Polyline3DInteractiveElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 0, lng: -180, altitude: 15000000},
    mode: MapMode.HYBRID,
  });

  document.body.append(map);

  const polyline = new Polyline3DInteractiveElement({
    coordinates: [
      { lat: 37.772, lng: -122.214 },
      { lat: 21.291, lng: -157.821 },
      { lat: -18.142, lng: 178.431 },
      { lat: -27.467, lng: 153.027 }
    ],
    strokeColor: 'red',
    strokeWidth: 10,
  });

  polyline.addEventListener('gmp-click', (event) => {
    polyline.strokeColor = colors[~~(Math.random() * colors.length)];
  });

  map.append(polyline);
}

init();

पॉलीगॉन

पॉलीगॉन, किसी बंद पाथ (या लूप) से घिरे हुए इलाके को दिखाता है. इस इलाके को कोऑर्डिनेट की सीरीज़ से तय किया जाता है. Polygon ऑब्जेक्ट, Polyline ऑब्जेक्ट से मिलते-जुलते होते हैं. इनमें, क्रम से व्यवस्थित किए गए कोऑर्डिनेट की सीरीज़ होती है. पॉलीगॉन, स्ट्रोक और भरने की सुविधा से बनाए जाते हैं. पॉलीगॉन के किनारे (स्ट्रोक) के लिए कस्टम रंग और चौड़ाई तय की जा सकती है. साथ ही, अंदर के हिस्से (फ़िल) के लिए कस्टम रंग और ओपैसिटी तय की जा सकती है. रंगों को हेक्साडेसिमल एचटीएमएल फ़ॉर्मैट में दिखाया जाना चाहिए. कलर के नाम काम नहीं करते.

Polygon ऑब्जेक्ट की मदद से, जटिल आकार दिखाए जा सकते हैं. जैसे:

  • एक पॉलीगॉन से तय किए गए एक से ज़्यादा ऐसे इलाके जो एक-दूसरे से जुड़े नहीं हैं.
  • ऐसे इलाके जिनमें छेद हैं.
  • एक या उससे ज़्यादा इलाकों के इंटरसेक्शन.

किसी जटिल आकार को तय करने के लिए, एक से ज़्यादा पाथ वाले पॉलीगॉन का इस्तेमाल किया जाता है.

कोई पॉलीगॉन जोड़ें

पॉलीगॉन वाले इलाके में कई अलग-अलग पाथ शामिल हो सकते हैं. इसलिए, Polygon ऑब्जेक्ट की पाथ प्रॉपर्टी, ऐरे के ऐरे की जानकारी देती है. हर ऐरे का टाइप MVCArray होता है. हर ऐरे, क्रम में लगाए गए LatLng निर्देशांकों का एक अलग क्रम तय करता है.

सिर्फ़ एक पाथ वाले बेसिक पॉलीगॉन के लिए, LatLng निर्देशांक के एक ऐरे का इस्तेमाल करके Polygon बनाया जा सकता है. Maps JavaScript API में फ़ोटोरियलिस्टिक 3D मैप, outerCoordinates प्रॉपर्टी में सेव करते समय, ऐरे को ऐरे के ऐरे में बदल देगा.

async function init() {
    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

    const map3DElement = new Map3DElement({
        center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
        range: 1000,
        tilt: 60,
        mode: MapMode.SATELLITE,
    });

    const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polygonOptions = {
        strokeColor: "#EA433580",
        strokeWidth: 4,
        fillColor: "#0000FF80",
        altitudeMode: "ABSOLUTE",
        extruded: true,
        drawsOccludedSegments: true,
    }

    const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);

    towerPolygon.outerCoordinates = [
        { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
        { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
        { lat: 43.643001, lng: -79.3866475, altitude: 600 }
    ];

    map3DElement.append(towerPolygon);
    document.body.append(map3DElement);
}
init();

इंटरैक्टिव पॉलीगॉन

नीचे दिए गए उदाहरण में, क्लिक इवेंट को रजिस्टर करने के बाद, पॉलीगॉन के स्ट्रोक का रंग बदला गया है.

async function init() {
  const colors = ["red", "blue", "green", "yellow"];
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map3DElement = new Map3DElement({
      center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
      range: 1000,
      tilt: 60,
      mode: MapMode.SATELLITE,
  });

  const { Polygon3DInteractiveElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

  const polygonOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 4,
      fillColor: "#0000FF80",
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
  }

  const towerPolygon = new google.maps.maps3d.Polygon3DInteractiveElement(polygonOptions);

  towerPolygon.outerCoordinates = [
      { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
      { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
      { lat: 43.643001, lng: -79.3866475, altitude: 600 }
  ];

    towerPolygon.addEventListener('gmp-click', (event) => {
      towerPolygon.strokeColor = colors[~~(Math.random() * colors.length)];
    });

  map3DElement.append(towerPolygon);

  document.body.append(map3DElement);
}

init();