צורות וקווים

בחירת פלטפורמה: Android iOS

אפשר להוסיף למפה צורות שונות. צורה היא אובייקט במפה שקשור לLatLng מערכת קואורדינטות. מפות תלת-ממד בממשק API של JavaScript במפות Google תומכות בהוספה של קווים ופוליגונים למפה.

קווים פוליגוניים

כדי לשרטט קו במפה, משתמשים בקו פוליגוני. המחלקות Polyline3DElement מגדירות שכבת-על לינארית של מקטעי קו מחוברים במפה. אובייקט Polyline3DElement מורכב ממערך של מיקומי LatLng, ויוצר סדרה של קטעי קו שמחברים את המיקומים האלה ברצף מסודר.

הוספת קו פוליגוני

הבונה Polyline3DElement מקבל קבוצה של Polyline3DElementOptions שמציינת את LatLng הקואורדינטות של הקו וקבוצה של סגנונות להתאמת ההתנהגות החזותית של הקו המרוסקע.

אובייקטים מסוג Polyline מצוירים כסדרה של קטעים ישרים במפה. אפשר לציין צבעים, רוחבים, רמות שקיפות, גבהים ואפשרויות עיצוב גיאומטריות מותאמים אישית לקו בתוך התג Polyline3DElementOptions כשיוצרים את הקו, או לשנות את המאפיינים האלה אחרי היצירה. קו פוליגוני תומך בסגנונות הקו הבאים:

• ‫outerColor: צבע הקסדצימלי ב-HTML בפורמט "#FFFFFF".
• ‫outerWidth: ערך מספרי בין 0.0 ל-1.0, שמתורגם לאחוז מתוך strokeWidth.
• ‫strokeColor: צבע הקסדצימלי ב-HTML בפורמט "#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 בכך שהם מורכבים מסדרה של קואורדינטות ברצף מסודר. פוליגונים נמשכים עם קו מתאר ומילוי. אפשר להגדיר צבעים בהתאמה אישית ורוחבים לקצה של הפוליגון (הקו) וצבעים ואטימוּת בהתאמה אישית לאזור הסגור (המילוי). צריך לציין את הצבעים בפורמט הקסדצימלי של HTML. שמות של צבעים לא נתמכים.

אובייקטים מסוג Polygon3DElement יכולים לתאר צורות מורכבות, כולל:

• כמה אזורים לא סמוכים שמוגדרים על ידי פוליגון יחיד.
• אזורים עם חורים.
• הצטלבות של אזור אחד או יותר.

כדי להגדיר צורה מורכבת, משתמשים בפוליגון עם כמה נתיבים.

הוספת מצולע

אזור פוליגוני יכול לכלול כמה נתיבים נפרדים, ולכן מאפיין הנתיבים של אובייקט Polygon3DElement מציין מערך של מערכים. כל מערך מגדיר רצף נפרד של קואורדינטות מסודרות LatLng.

למצולעים בסיסיים שמורכבים מנתיב אחד בלבד, אפשר ליצור Polygon3DElement באמצעות מערך אחד של קואורדינטות LatLng. מפות תלת-ממדיות ב-Maps JavaScript API ימירו את המערך למערך של מערכים בזמן הבנייה, כשהן מאחסנות אותו במאפיין 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