आकार और लाइन

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

यह प्रॉडक्ट या सुविधा, Preview (pre-GA) में है. Pre-GA के तहत आने वाले प्रॉडक्ट और सुविधाओं के लिए, आपको सीमित सहायता मिल सकती है. साथ ही, ऐसा हो सकता है कि Pre-GA के तहत आने वाले प्रॉडक्ट और सुविधाओं में किए गए बदलाव, Pre-GA के अन्य वर्शन के साथ काम न करें. Pre-GA Offerings पर, Google Maps Platform की सेवा से जुड़ी शर्तें लागू होती हैं. ज़्यादा जानकारी के लिए, लॉन्च के चरणों की जानकारी पढ़ें.

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

पॉलीलाइन

अपने मैप पर लाइन बनाने के लिए, पॉलीलाइन का इस्तेमाल करें. 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 कोऑर्डिनेट का एक अलग क्रम तय करता है.

सिर्फ़ एक पाथ वाले बेसिक पॉलीगॉन के लिए, Polygon को LatLng कोऑर्डिनेट के एक ही ऐरे का इस्तेमाल करके बनाया जा सकता है. Maps JavaScript API में मौजूद Photorealistic 3D Maps, कंस्ट्रक्शन के दौरान ऐरे को ऐरे के ऐरे में बदल देगा. ऐसा तब होगा, जब इसे 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();

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

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

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();