Loại kết xuất (đường quét và vectơ)

Maps JavaScript API cung cấp 2 cách triển khai bản đồ: raster và vectơ. Bản đồ raster tải bản đồ dưới dạng một lưới gồm các ô hình ảnh raster dựa trên pixel, được tạo bởi phía máy chủ Google Maps Platform, sau đó được phân phát cho ứng dụng web của bạn. Bản đồ vectơ được tạo thành từ các ô dựa trên vectơ, được vẽ tại thời điểm tải ở phía máy khách bằng WebGL, một công nghệ web cho phép trình duyệt truy cập vào GPU trên thiết bị của người dùng để kết xuất đồ hoạ 2D và 3D.

Bạn nên dùng loại bản đồ vectơ để mang lại trải nghiệm tốt nhất cho người dùng, vì loại bản đồ này giúp cải thiện độ trung thực về hình ảnh, cải thiện khả năng lưu vào bộ nhớ đệm trên các bản đồ, cũng như khả năng kiểm soát độ nghiêng và hướng trên bản đồ. Tìm hiểu thêm về các tính năng của bản đồ vectơ.

Loại kết xuất mặc định

Loại kết xuất mặc định của bản đồ sẽ khác nhau tuỳ thuộc vào cách bạn triển khai.

  • Theo mặc định, Maps sử dụng loại kết xuất vectơ cho phần tử <gmp-map>.

  • Các bản đồ sử dụng phần tử <div> có google.maps.Map mặc định là loại kết xuất raster.

Đặt loại kết xuất cho bản đồ bằng cách chỉ định lựa chọn bản đồ renderingType hoặc bằng cách đặt lựa chọn trên mã bản đồ được liên kết. Lựa chọn renderingType sẽ ghi đè mọi chế độ cài đặt loại kết xuất được thực hiện bằng cách định cấu hình mã bản đồ.

Chỉ định lựa chọn renderingType

Sử dụng tuỳ chọn renderingType để chỉ định loại kết xuất raster hoặc vectơ cho bản đồ của bạn (không cần mã bản đồ). Đối với các bản đồ được tải bằng phần tử div và JavaScript, loại kết xuất mặc định là google.maps.RenderingType.RASTER. Hãy làm theo các bước sau để đặt lựa chọn renderingType:

  1. Tải thư viện RenderingType; bạn có thể thực hiện việc này khi tải thư viện Maps:

    const { Map, RenderingType } = await google.maps.importLibrary("maps");

  2. Khi khởi chạy bản đồ, hãy dùng lựa chọn renderingType để chỉ định RenderingType.VECTOR hoặc RenderingType.RASTER:

    map = new Map(
  document.getElementById('map'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

Khi đặt loại kết xuất bản đồ vectơ, bạn phải đặt các lựa chọn cho những tính năng cần thiết.

  • Để bật chế độ nghiêng, hãy đặt lựa chọn bản đồ tiltInteractionEnabled thành true hoặc gọi map.setTiltInteractionEnabled(true).
  • Để bật tính năng di chuyển, hãy đặt lựa chọn bản đồ headingInteractionEnabled thành true hoặc gọi map.setHeadingInteractionEnabled(true).

Đối với các bản đồ được tải bằng phần tử <gmp-map>, loại kết xuất mặc định là google.maps.RenderingType.VECTOR, có bật chế độ kiểm soát độ nghiêng và hướng. Để đặt loại kết xuất bằng phần tử <gmp-map>, hãy sử dụng thuộc tính rendering-type.

Sử dụng mã bản đồ để đặt loại kết xuất

Bạn cũng có thể chỉ định loại kết xuất bằng cách sử dụng mã bản đồ. Tạo mã bản đồ bằng cách làm theo các bước trong phần Sử dụng tính năng định kiểu bản đồ dựa trên đám mây – Lấy mã bản đồ. Nhớ đặt Loại bản đồ thành JavaScript và chọn một lựa chọn (Vector hoặc Raster). Đánh dấu vào Nghiêng và Xoay để bật chế độ nghiêng và xoay trên bản đồ. Khi đó, bạn có thể điều chỉnh các giá trị này theo phương thức lập trình, đồng thời cho phép người dùng điều chỉnh độ nghiêng và hướng trực tiếp trên bản đồ. Nếu việc sử dụng độ nghiêng hoặc hướng sẽ ảnh hưởng tiêu cực đến ứng dụng của bạn, hãy bỏ chọn Độ nghiêng và Xoay để người dùng không thể điều chỉnh độ nghiêng và hướng.

Tạo mã bản đồ vectơ

Tiếp theo, hãy cập nhật mã khởi chạy bản đồ bằng mã bản đồ mà bạn đã tạo. Bạn có thể tìm thấy mã bản đồ của mình trên trang Quản lý Maps. Cung cấp mã bản đồ khi bạn tạo bản đồ bằng cách sử dụng thuộc tính mapId như minh hoạ ở đây:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

Phát hiện loại kết xuất đang được sử dụng

Để phát hiện loại kết xuất nào đang được dùng, hãy gọi getRenderingType() trên đối tượng bản đồ, như trong ví dụ sau:

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```