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

Bắt đầu với GTEL GL JS

GTEL GL JS là một thư viện JavaScript mạnh mẽ, sử dụng WebGL để hiển thị các bản đồ tương tác từ vector tiles và các styles của GTEL MAPS. Đây là một phần của hệ sinh thái GTEL MAPS, giúp bạn dễ dàng tích hợp bản đồ vào ứng dụng web của mình.

1. Điều kiện tiên quyết​

Trước khi bắt đầu, hãy đảm bảo bạn có:

  • API Key: Mã định danh để truy cập và sử dụng dịch vụ của GTEL MAPS. Vui lòng liên hệ với bộ phận quản trị hoặc đơn vị cung cấp dịch vụ để được cấp API Key cho ứng dụng của bạn.
  • Trình duyệt hỗ trợ WebGL: Thư viện yêu cầu trình duyệt hỗ trợ WebGL để hiển thị bản đồ vector. Các trình duyệt hiện đại phổ biến (như Chrome, Firefox, Safari, Edge) phiên bản mới đều hỗ trợ tốt tính năng này.

2. Cài đặt​

Hiện tại, GTEL GL JS hỗ trợ cài đặt thông qua trình quản lý gói npm. Hỗ trợ CDN sẽ được cập nhật trong tương lai.

Cài đặt qua NPM​

Nếu bạn đang sử dụng trình quản lý gói như npm, bạn có thể cài đặt thư viện:

npm install @gis/gtelmaps-sdk-js

Sau đó, import thư viện và kiểu dáng của nó vào mã nguồn:

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

// Cấu hình API Key
config.apiKey = 'YOUR_API_KEY';

3. Khởi chạy nhanh​

Dưới đây là một ví dụ cơ bản để khởi tạo bản đồ sử dụng GTEL GL JS trong một dự án JavaScript hiện đại (Sử dụng Vite, Webpack hoặc các công cụ tương đương).

main.js
import { config, Map, MapStyle } from "@gis/gtelmaps-sdk-js";
import "@gis/gtelmaps-sdk-js/dist/gtelmaps-sdk.css";

// THAY THẾ API KEY CỦA BẠN TẠI ĐÂY
config.apiKey = 'YOUR_API_KEY';

const map = new Map({
    container: 'map', // ID của phần tử chứa bản đồ
    style: MapStyle.STREETS, // Sử dụng style mặc định từ SDK
    center: [105.8342, 21.0278], // Tọa độ trung tâm [lng, lat] (Hà Nội)
    zoom: 12 // Mức phóng to ban đầu
});
index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bản đồ GTEL MAPS đầu tiên của tôi</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script type="module" src="./main.js"></script>
</body>
</html>

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

Lớp Map​

Lớp Map là thành phần chính của thư viện. Nó khởi tạo bản đồ trong một container (thường là một div HTML) và chấp nhận các tùy chọn cấu hình như style, center, zoom.

Styles​

Styles trong GTEL MAPS là các đối tượng JSON định nghĩa diện mạo của bản đồ, bao gồm nguồn dữ liệu, các lớp (layers), màu sắc và biểu tượng.

Tọa độ và Phóng to​

  • Center: Tọa độ địa lý trung tâm của bản đồ, được xác định là một mảng [Kinh độ, Vĩ độ].
  • Zoom: Mức độ phóng to của bản đồ (thường từ 0 đến 22).

5. Các bước tiếp theo​

Bây giờ bạn đã có bản đồ đầu tiên, hãy khám phá thêm:

  • Ví dụ: Xem các ví dụ về thêm Marker, Popup, Clustering và nhiều hơn nữa.
  • Tài liệu API: Tìm hiểu chi tiết về tất cả các phương thức và sự kiện trong bộ SDK.