Hình dạng và đường kẻ

Chọn nền tảng: Android iOS

Bạn có thể thêm nhiều hình dạng vào bản đồ. Hình dạng là một đối tượng trên bản đồ, được liên kết với hệ toạ độ LatLng. Bản đồ 3D trong Maps JavaScript API hỗ trợ việc thêm các đường kẻ và đa giác vào bản đồ.

Đường đa tuyến

Để vẽ một đường kẻ trên bản đồ, hãy dùng đường nhiều đoạn. Lớp Polyline3DElement xác định một lớp phủ tuyến tính gồm các đoạn đường thẳng được kết nối trên bản đồ. Đối tượng Polyline3DElement bao gồm một mảng các vị trí LatLng và tạo ra một chuỗi các đoạn thẳng kết nối những vị trí đó theo một trình tự có thứ tự.

Thêm một hình nhiều đường

Hàm khởi tạo Polyline3DElement lấy một tập hợp Polyline3DElementOptions chỉ định toạ độ LatLng của đường thẳng và một tập hợp các kiểu để điều chỉnh hành vi trực quan của đường nhiều đoạn.

Các đối tượng Polyline được vẽ dưới dạng một chuỗi các đoạn thẳng trên bản đồ. Bạn có thể chỉ định màu sắc tuỳ chỉnh, chiều rộng, độ mờ, chiều cao và các lựa chọn tạo kiểu hình học cho nét của đường trong Polyline3DElementOptions khi tạo đường hoặc bạn có thể thay đổi các thuộc tính đó sau khi tạo. Đường nhiều đoạn hỗ trợ các kiểu nét vẽ sau:

• outerColor: Màu HTML thập lục phân có định dạng "#FFFFFF".
• outerWidth: Giá trị số từ 0.0 đến 1.0, được diễn giải dưới dạng tỷ lệ phần trăm của strokeWidth.
• strokeColor: Màu HTML thập lục phân có định dạng "#FFFFFF".
• strokeWidth: Chiều rộng của đường kẻ tính bằng pixel.
• geodesic: liệu các cạnh của đa giác có theo độ cong của trái đất hay được vẽ dưới dạng đường thẳng.
• altitudeMode: Cách diễn giải các thành phần độ cao trong toạ độ
• drawsOccludedSegments: Giá trị boolean cho biết liệu các phần của đa giác bị che khuất bởi các đối tượng (chẳng hạn như toà nhà) có được vẽ hay không.
• extruded: Giá trị boolean cho biết liệu đường nhiều đoạn có được kết nối với mặt đất hay không.

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

Hình nhiều đường có tính tương tác

Ví dụ sau đây sẽ bật/tắt thuộc tính drawsOccludedSegments của đường nhiều đoạn sau khi đăng ký một sự kiện nhấp chuột.

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

Đa giác

Đa giác biểu thị một vùng được bao quanh bởi một đường khép kín (hoặc vòng lặp), được xác định bằng một loạt toạ độ. Các đối tượng Polygon3DElement tương tự như các đối tượng Polyline3DElement ở chỗ chúng bao gồm một chuỗi toạ độ theo một trình tự có thứ tự. Đa giác được vẽ bằng một nét vẽ và một màu tô. Bạn có thể xác định màu sắc tuỳ chỉnh và độ rộng cho cạnh của đa giác (nét vẽ) cũng như màu sắc tuỳ chỉnh và độ mờ cho vùng được bao quanh (vùng tô). Bạn nên chỉ định màu theo định dạng HTML thập lục phân. Tên màu không được hỗ trợ.

Các đối tượng Polygon3DElement có thể mô tả các hình dạng phức tạp, bao gồm:

• Nhiều khu vực không liền kề được xác định bằng một đa giác duy nhất.
• Những khu vực có lỗ.
• Giao điểm của một hoặc nhiều khu vực.

Để xác định một hình dạng phức tạp, bạn sử dụng một đa giác có nhiều đường dẫn.

Thêm đa giác

Vì một vùng đa giác có thể bao gồm nhiều đường dẫn riêng biệt, nên thuộc tính paths của đối tượng Polygon3DElement chỉ định một mảng các mảng. Mỗi mảng xác định một chuỗi riêng biệt gồm các toạ độ LatLng được sắp xếp theo thứ tự.

Đối với các đa giác cơ bản chỉ bao gồm một đường dẫn, bạn có thể tạo Polygon3DElement bằng cách sử dụng một mảng duy nhất gồm các toạ độ LatLng. Bản đồ 3D trong Maps JavaScript API sẽ chuyển đổi mảng thành một mảng các mảng khi xây dựng bằng cách lưu trữ mảng đó trong thuộc tính 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

Đa giác có thể tương tác

Ví dụ sau đây thay đổi màu bên trong và bên ngoài của đa giác sau khi đăng ký một sự kiện nhấp chuột.

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