צורות וקווים

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

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

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

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

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

ה-constructor של Polyline3DElement מקבל קבוצה של Polyline3DElementOptions שמציינים את הקואורדינטות של LatLng של הקו, וקבוצה של סגנונות להתאמת ההתנהגות החזותית של הקו הפוליגוני.

אובייקטים של קווים פוליגוניים משורטטים כסדרה של מקטעים ישרים במפה. כשיוצרים קו ב-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',
    });

    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',
    });

    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',
    });

    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',
    });

    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