รูปร่างและเส้น

เลือกแพลตฟอร์ม: Android iOS

คุณเพิ่มรูปทรงต่างๆ ลงในแผนที่ได้ รูปทรงคือออบเจ็กต์บนแผนที่ที่ผูกกับระบบพิกัด LatLng แผนที่ 3 มิติใน Maps JavaScript API รองรับการเพิ่มเส้นและรูปหลายเหลี่ยมลงในแผนที่

โพลีไลน์

หากต้องการวาดเส้นบนแผนที่ ให้ใช้โพลีไลน์ คลาส Polyline3DElement จะกำหนดการวางซ้อนเชิงเส้นของส่วนของเส้นที่เชื่อมต่อกันบนแผนที่ ออบเจ็กต์ Polyline3DElement ประกอบด้วยอาร์เรย์ของตำแหน่ง LatLng และสร้างส่วนของเส้นหลายส่วนที่เชื่อมต่อตำแหน่งเหล่านั้นตามลำดับ

เพิ่มเส้นประกอบ

ตัวสร้าง 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',
        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();

โพลีไลน์แบบอินเทอร์แอกทีฟ

ตัวอย่างต่อไปนี้จะสลับพร็อพเพอร์ตี้ 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();

รูปหลายเหลี่ยม

รูปหลายเหลี่ยมแสดงถึงพื้นที่ที่ล้อมรอบด้วยเส้นทางปิด (หรือลูป) ซึ่งกำหนดโดยชุดพิกัด Polygon3DElement ออบเจ็กต์คล้ายกับPolyline3DElementออบเจ็กต์ตรงที่ประกอบด้วยชุดพิกัดตามลำดับ ระบบจะวาดรูปหลายเหลี่ยมด้วยเส้นขอบและการเติม คุณสามารถกำหนดสีแบบกำหนดเองและความกว้างสำหรับขอบของรูปหลายเหลี่ยม (เส้นขอบ) รวมถึงสีและความทึบที่กำหนดเองสำหรับพื้นที่ที่ล้อมรอบ (การเติม) โดยควรระบุสีในรูปแบบ HTML ฐานสิบหก ระบบไม่รองรับชื่อสี

ออบเจ็กต์ Polygon3DElement สามารถอธิบายรูปทรงที่ซับซ้อนได้ ซึ่งรวมถึง

  • พื้นที่ที่ไม่ต่อเนื่องหลายพื้นที่ซึ่งกำหนดโดยรูปหลายเหลี่ยมเดียว
  • พื้นที่ที่มีรู
  • จุดตัดของพื้นที่อย่างน้อย 1 พื้นที่

หากต้องการกำหนดรูปทรงที่ซับซ้อน ให้ใช้รูปหลายเหลี่ยมที่มีหลายเส้นทาง

เพิ่มรูปหลายเหลี่ยม

เนื่องจากพื้นที่รูปหลายเหลี่ยมอาจมีเส้นทางแยกกันหลายเส้นทาง พร็อพเพอร์ตี้เส้นทางของออบเจ็กต์ Polygon3DElement จึงระบุอาร์เรย์ของอาร์เรย์ โดยแต่ละอาร์เรย์จะกำหนดลำดับพิกัด LatLng ที่แยกกัน

สำหรับรูปหลายเหลี่ยมพื้นฐานที่ประกอบด้วยเส้นทางเดียว คุณสามารถสร้าง Polygon3DElement โดยใช้อาร์เรย์เดียวของพิกัด LatLng แผนที่ 3 มิติใน 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();

รูปหลายเหลี่ยมแบบอินเทอร์แอกทีฟ

ตัวอย่างต่อไปนี้จะเปลี่ยนสีด้านในและด้านนอกของรูปหลายเหลี่ยมหลังจากลงทะเบียนกิจกรรมการคลิก

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