Chuyển tới nội dung chính
Phiên bản: v1.1

Các khái niệm cốt lõi

Để sử dụng GTEL GL JS một cách hiệu quả, việc hiểu các khái niệm cơ bản về cách nó hoạt động là rất quan trọng.

1. Kết xuất phía máy khách​

Khác với các hệ thống bản đồ truyền thống gửi các hình ảnh (tiles) đã được vẽ sẵn từ máy chủ, GTEL GL JS nhận dữ liệu thô (vector tiles) và vẽ chúng trực tiếp trên trình duyệt của bạn sử dụng WebGL.

Lợi ích:

  • Mượt mà: Phóng to, thu nhỏ và xoay bản đồ cực kỳ mượt mà.
  • Tùy biến cao: Bạn có thể thay đổi thuộc tính của bất kỳ thành phần nào trên bản đồ (như màu sắc con đường) ngay lập tức mà không cần tải lại dữ liệu.

2. Lớp Map​

Lớp Map là trung tâm của mọi ứng dụng. Khi bạn khởi tạo một instance của Map, bạn đang tạo ra một bản đồ tương tác gắn liền với một phần tử HTML (thường là một <div>).

import { Map, MapStyle } from "@gis/gtelmaps-sdk-js";

const map = new Map({
    container: 'map',
    style: MapStyle.STREETS,
    center: [105.8, 21.0],
    zoom: 12
});

3. Styles và Layers​

Styles​

Một Style là một tệp JSON định nghĩa toàn bộ diện mạo của bản đồ. Nó chứa thông tin về các nguồn dữ liệu (Sources) và cách hiển thị dữ liệu đó qua các lớp (Layers).

Layers​

Mọi thứ bạn thấy trên bản đồ đều nằm trong một Layer.

  • Một lớp có thể là các con đường, các tòa nhà 3D, hoặc dữ liệu tùy chỉnh của bạn như các điểm cửa hàng.
  • Bạn có thể ẩn/hiện, thay đổi thứ tự hoặc thay đổi kiểu dáng của các lớp này thông qua mã JavaScript.

4. Nguồn dữ liệu​

Sources định nghĩa dữ liệu thực tế mà bản đồ sẽ hiển thị. GTEL GL JS hỗ trợ nhiều loại nguồn:

  • Vector: Dữ liệu vector hiệu suất cao (chuẩn Vector Tile).
  • Raster: Các hình ảnh bản đồ truyền thống.
  • GeoJSON: Dữ liệu tùy chỉnh dễ dàng tạo và chỉnh sửa.
  • Image/Video: Hiển thị hình ảnh hoặc video trực tiếp lên bản đồ.

5. Camera và Tương tác​

Camera là cách chúng ta nhìn vào bản đồ. Bạn có thể điều khiển camera thông qua các thuộc tính:

  • Center: Tọa độ [lng, lat].
  • Zoom: Mức độ phóng to.
  • Bearing: Góc xoay của bản đồ (0 là hướng Bắc).
  • Pitch: Độ nghiêng của bản đồ (giúp tạo hiệu ứng 3D).

Tiếp theo​

Bây giờ bạn đã hiểu các khái niệm cơ bản, hãy xem qua các Ví dụ cụ thể để bắt đầu xây dựng ứng dụng của mình.