आकार और लाइन

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

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

पॉलीलाइन

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

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

Polyline3DElement कंस्ट्रक्टर, Polyline3DElementOptions का एक सेट लेता है. यह सेट, लाइन के LatLng कोऑर्डिनेट और स्टाइल का एक सेट तय करता है. इससे पॉलीलाइन के विज़ुअल व्यवहार को अडजस्ट किया जा सकता है.

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

• outerColor: यह "#FFFFFF" फ़ॉर्मैट में एचटीएमएल रंग का हेक्साडेसिमल कोड होता है.
• outerWidth: यह 0.0 और 1.0 के बीच की कोई संख्यात्मक वैल्यू होती है. इसे strokeWidth के प्रतिशत के तौर पर समझा जाता है.
• strokeColor: यह "#FFFFFF" फ़ॉर्मैट में एचटीएमएल रंग का हेक्साडेसिमल कोड होता है.
• strokeWidth: लाइन की चौड़ाई, पिक्सल में.
• geodesic: इससे यह तय होता है कि पॉलीगॉन के किनारे, पृथ्वी की वक्रता के हिसाब से बनाए जाएं या सीधी लाइनों के तौर पर बनाए जाएं.
• altitudeMode: निर्देशांकों में ऊंचाई वाले कॉम्पोनेंट की व्याख्या कैसे की जाती है
• drawsOccludedSegments: यह एक बूलियन वैल्यू है. इससे पता चलता है कि क्या पॉलीगॉन के उन हिस्सों को दिखाना है जो ऑब्जेक्ट (जैसे कि बिल्डिंग) की वजह से नहीं दिखते.
• extruded: यह एक बूलियन वैल्यू है. इससे पता चलता है कि पॉलीलाइन को ज़मीन से कनेक्ट किया जाना चाहिए या नहीं.

let map;
async function init() {
    const { Map3DElement, Polyline3DElement } =
        await google.maps.importLibrary('maps3d');

    map = new Map3DElement({
        center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
        range: 3362.87,
        tilt: 64.01,
        heading: 25.0,
        mode: 'SATELLITE',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polyline = new Polyline3DElement({
        path: [
            { 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 },
        ],
        strokeColor: 'blue',
        outerColor: 'white',
        strokeWidth: 10,
        outerWidth: 0.4,
        altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height).
        drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way.
    });

    map.append(polyline);
}

void init();
index.js

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

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

let map;
async function init() {
    const { Map3DElement, Polyline3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    map = new Map3DElement({
        center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
        range: 3362.87,
        tilt: 64.01,
        heading: 25.0,
        mode: 'SATELLITE',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polyline = new Polyline3DInteractiveElement({
        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 },
        ],
        strokeColor: 'blue',
        outerColor: 'white',
        strokeWidth: 10,
        outerWidth: 0.4,
        altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height).
        drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way.
    });

    polyline.addEventListener('gmp-click', function () {
        // Toggle whether the line draws occluded segments.
        this.drawsOccludedSegments = !this.drawsOccludedSegments;
    });

    map.append(polyline);
}

void init();
index.js

पॉलीगॉन

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

Polygon3DElement ऑब्जेक्ट की मदद से, मुश्किल शेप के बारे में बताया जा सकता है. जैसे:

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

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

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

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

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

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

    const map3DElement = new Map3DElement({
        center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },
        heading: 340,
        tilt: 70,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    const polygonOptions = {
        strokeColor: '#0000ff80',
        strokeWidth: 8,
        fillColor: '#ff000080',
        drawsOccludedSegments: false,
    };

    const examplePolygon = new Polygon3DElement(polygonOptions);

    examplePolygon.path = [
        { lat: 40.7144, lng: -74.0208 },
        { lat: 40.6993, lng: -74.019 },
        { lat: 40.7035, lng: -74.0004 },
    ];

    map3DElement.append(examplePolygon);

    document.body.append(map3DElement);
}

void init();
index.js

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

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

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

    const map = new Map3DElement({
        center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },
        heading: 340,
        tilt: 70,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polygonOptions = {
        strokeColor: '#0000ff80',
        strokeWidth: 8,
        fillColor: '#ff000080',
        drawsOccludedSegments: false,
    };

    const examplePolygon = new Polygon3DInteractiveElement(polygonOptions);

    examplePolygon.path = [
        { lat: 40.7144, lng: -74.0208 },
        { lat: 40.6993, lng: -74.019 },
        { lat: 40.7035, lng: -74.0004 },
        { lat: 40.7144, lng: -74.0208 },
    ];

    examplePolygon.addEventListener('gmp-click', function (event) {
        // change the color of the polygon stroke and fill colors to a random alternatives!
        this.fillColor = randomizeHexColor(this.fillColor);
        this.strokeColor = randomizeHexColor(this.strokeColor);
        console.log(event);
    });

    map.append(examplePolygon);
}

function randomizeHexColor(originalHexColor) {
    console.log(originalHexColor);
    const alpha = originalHexColor.substring(7);

    // Generate random values for Red, Green, Blue (0-255)
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);

    console.log(r + ' ' + g + ' ' + b);

    // Convert decimal to 2-digit hex, padding with '0' if needed
    const rHex = ('0' + r.toString(16)).slice(-2);
    const gHex = ('0' + g.toString(16)).slice(-2);
    const bHex = ('0' + b.toString(16)).slice(-2);

    // Combine parts: '#' + random RGB + original Alpha (if any)
    return `#${rHex}${gHex}${bHex}${alpha}`;
}

void init();
index.js