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 đồ, liên kết với hệ toạ độ LatLng. Bản đồ 3D chân thực trong API Maps JavaScript hỗ trợ việc thêm các đường và đa giác vào bản đồ.

Hình nhiều đường

Để vẽ một đường trên bản đồ, hãy sử dụng đa tuyến. Lớp Polyline3DElement xác định một lớp phủ tuyến tính của các đoạn đường được kết nối trên bản đồ. Đối tượng Polyline bao gồm một mảng các vị trí LatLng và tạo một loạt các đoạn đường nối các vị trí đó theo trình tự đã sắp xếp.

Thêm đường đa tuyến

Hàm khởi tạo Polyline lấy một tập hợp Polyline3DElementOptions chỉ định toạ độ LatLng của đường và một tập hợp kiểu để điều chỉnh hành vi hình ảnh của đa tuyến.

Các đối tượng đa tuyến được vẽ dưới dạng một loạt các đoạn thẳng trên bản đồ. Bạn có thể chỉ định màu tuỳ chỉnh, chiều rộng, độ mờ, chiều cao và các tuỳ chọn tạo kiểu hình học cho nét vẽ 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 đa tuyến hỗ trợ các kiểu nét sau:

  • outerColor: Màu HTML thập lục phân có định dạng "#FFFFFF".
  • outerWidth: Một giá trị số nằm trong khoảng 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ó tuân 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 tọa độ
  • drawsOccludedSegments: Giá trị boolean cho biết liệu các phần của đa giác bị các đối tượng (chẳng hạn như các toà nhà) che khuất có được vẽ hay không.
  • extruded: Giá trị boolean cho biết liệu đường đa tuyế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();

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

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

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 khu vực được bao quanh bởi một đường dẫn 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 loạt toạ độ theo trình tự có thứ tự. Đa giác được vẽ bằng nét vẽ và 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 (nét vẽ) cũng như màu và độ mờ tuỳ chỉnh cho vùng kín (màu tô). Màu sắc phải được chỉ định ở định dạng HTML thập lục phân. Không hỗ trợ tên màu.

Đố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 nhau được xác định bằng một hình đa giác.
  • Các 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 đ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 trình tự riêng biệt gồm các toạ độ LatLng đã sắp xếp.

Đố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 một Polygon bằng cách sử dụng một mảng toạ độ LatLng. Bản đồ 3D chân thực trong API Maps JavaScript sẽ chuyển đổi mảng thành một mảng các mảng khi tạo và lưu trữ 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 tương tác

Ví dụ sau đây thay đổi màu nét vẽ 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();