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 chân thực trong Maps JavaScript API hỗ trợ việc thêm các đường 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 Polyline bao gồm một mảng gồm các vị trí LatLng và tạo 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 đường nhiều đoạn

Hàm khởi tạo Polyline 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 nhiều đường.

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, chiều rộng, độ mờ, chiều cao và các lựa chọn tạo kiểu hình học tuỳ chỉnh 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.
async function init() {
    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

    const map = new Map3DElement({
      center: { lat: 37.772675996068915, lng: -122.3978382542777, altitude: 2500 },
      tilt: 45,
      heading: 5.9743656,
      mode: MapMode.HYBRID,
    });

    const { Polyline3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polylineOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 10,
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
    }
    const polyline = new google.maps.maps3d.Polyline3DElement(polylineOptions)

    polyline.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}
    ];

    map.append(polyline)
    document.body.append(map);
}
init();

Đường nhiều đoạn có tính tương tác

Ví dụ sau đây thay đổi màu nét của đường nhiều đoạn sau khi đăng ký một sự kiện nhấp chuột.

async function init() {
  const colors = ["red", "blue", "green", "yellow"];

  const { Map3DElement, MapMode, Polyline3DInteractiveElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 0, lng: -180, altitude: 15000000},
    mode: MapMode.HYBRID,
  });

  document.body.append(map);

  const polyline = new Polyline3DInteractiveElement({
    coordinates: [
      { lat: 37.772, lng: -122.214 },
      { lat: 21.291, lng: -157.821 },
      { lat: -18.142, lng: 178.431 },
      { lat: -27.467, lng: 153.027 }
    ],
    strokeColor: 'red',
    strokeWidth: 10,
  });

  polyline.addEventListener('gmp-click', (event) => {
    polyline.strokeColor = colors[~~(Math.random() * colors.length)];
  });

  map.append(polyline);
}

init();

Đa giác

Đa giác biểu thị một vùng được bao quanh bởi một đường dẫn 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 Polygon tương tự như các đối tượng Polyline ở chỗ chúng bao gồm một chuỗi toạ độ theo trình tự có thứ tự. Đa giác được vẽ bằng một nét vẽ và một màu nền. Bạn có thể xác định màu và chiều rộng tuỳ chỉnh cho cạnh của đa giác (đường viền) cũng như màu và độ mờ tuỳ chỉnh cho vùng kín (vùng tô). Bạn nên chỉ định màu bằng định dạng HTML thập lục phân. Không hỗ trợ tên màu.

Các đối tượng Polygon 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 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 đường dẫn của đối tượng Polygon chỉ định một mảng các mảng, mỗi mảng thuộc loại MVCArray. 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 Polygon bằng cách sử dụng một mảng duy nhất gồm các toạ độ LatLng. Bản đồ 3D chân thực trong Maps JavaScript API sẽ chuyển đổi mảng thành một mảng các mảng khi tạo bằng cách lưu trữ mảng đó trong thuộc tính outerCoordinates.

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

    const map3DElement = new Map3DElement({
        center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
        range: 1000,
        tilt: 60,
        mode: MapMode.SATELLITE,
    });

    const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polygonOptions = {
        strokeColor: "#EA433580",
        strokeWidth: 4,
        fillColor: "#0000FF80",
        altitudeMode: "ABSOLUTE",
        extruded: true,
        drawsOccludedSegments: true,
    }

    const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);

    towerPolygon.outerCoordinates = [
        { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
        { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
        { lat: 43.643001, lng: -79.3866475, altitude: 600 }
    ];

    map3DElement.append(towerPolygon);
    document.body.append(map3DElement);
}
init();

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

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

async function init() {
  const colors = ["red", "blue", "green", "yellow"];
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map3DElement = new Map3DElement({
      center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
      range: 1000,
      tilt: 60,
      mode: MapMode.SATELLITE,
  });

  const { Polygon3DInteractiveElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

  const polygonOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 4,
      fillColor: "#0000FF80",
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
  }

  const towerPolygon = new google.maps.maps3d.Polygon3DInteractiveElement(polygonOptions);

  towerPolygon.outerCoordinates = [
      { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
      { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
      { lat: 43.643001, lng: -79.3866475, altitude: 600 }
  ];

    towerPolygon.addEventListener('gmp-click', (event) => {
      towerPolygon.strokeColor = colors[~~(Math.random() * colors.length)];
    });

  map3DElement.append(towerPolygon);

  document.body.append(map3DElement);
}

init();