Quickstart

Giới thiệu

TrackAsia GL JS là một thư viện TypeScript sử dụng WebGL để hiển thị bản đồ tương tác từ các vector tiles trong trình duyệt. Việc tùy chỉnh bản đồ tuân thủ TrackAsia Style Spec. Đây là một phần của hệ sinh thái TrackAsia, với phiên bản dành cho Android, iOS và các nền tảng khác gọi là TrackAsia Native.

Bắt đầu nhanh

<div id="map"></div>
<script>
    var map = new trackasiagl.Map({
        container: 'map', // id của phần tử chứa bản đồ
        style: 'https://maps.track-asia.com/styles/v1/streets.json', // URL style
        center: {"lat": 10.762622,"lng": 106.660172}, // vị trí bắt đầu [kinh độ, vĩ độ]
        zoom: 6 // mức thu phóng ban đầu
    });
</script>

Đọc tài liệu này

Tài liệu này được chia thành nhiều phần:

Main - Phần Chính chứa các lớp sau:
- Map là đối tượng bản đồ trên trang của bạn. Nó cho phép bạn truy cập các phương thức và thuộc tính để tương tác với style và các lớp của bản đồ, phản hồi các sự kiện và điều chỉnh góc nhìn của người dùng bằng camera.
- Global Functions cho phép bạn thiết lập các thuộc tính và tùy chọn toàn cục mà bạn có thể muốn truy cập khi khởi tạo bản đồ hoặc truy vấn thông tin về trạng thái của nó.
Markers and Controls - Phần này mô tả các thành phần giao diện người dùng mà bạn có thể thêm vào bản đồ. Các mục trong phần này tồn tại bên ngoài phần tử canvas của bản đồ. Bao gồm Marker, Popup và tất cả các controls.
Geography end geometry - Phần này bao gồm các tiện ích và kiểu dữ liệu liên quan đến việc làm việc và thao tác với thông tin địa lý hoặc hình học.
User interaction handlers - Các mục trong phần này liên quan đến cách bản đồ phản hồi đầu vào của người dùng.
Sources - Phần này mô tả các loại nguồn mà TrackAsia GL JS có thể xử lý ngoài những loại được mô tả trong TrackAsia Style Specification.
Event Related - Phần này mô tả các loại sự kiện khác nhau mà TrackAsia GL JS có thể kích hoạt.

Mỗi phần mô tả các lớp hoặc đối tượng cũng như các properties, parameters, instance members, và các events liên quan. Nhiều phần cũng bao gồm các ví dụ mã nội tuyến và các tài nguyên liên quan.

NPM

Cài đặt gói TrackAsia GL JS qua NPM.

npm install trackasia-gl

Sau đó, bạn có thể import module TrackAsia GL JS vào dự án của mình.

<div id="map"></div>

import trackasiagl from 'trackasia-gl';
import 'trackasia-gl/dist/trackasia-gl.css';

const map = new trackasiagl.Map({
    container: 'map', // id của container
    style: 'https://maps.track-asia.com/styles/v1/streets.json', // URL style
    center: {"lat": 10.762622,"lng": 106.660172}, // vị trí bắt đầu [kinh độ, vĩ độ]
    zoom: 6 // mức thu phóng ban đầu
});

CSP Directives

Để giảm thiểu các lỗ hổng bảo mật web như Cross-Site Scripting, bạn có thể sử dụng Content Security Policy (CSP) để chỉ định các chính sách bảo mật cho trang web của mình. Nếu bạn làm vậy, TrackAsia GL JS yêu cầu các chỉ thị CSP sau:

worker-src blob: ;
child-src blob: ;
img-src data: blob: ;

Đối với các môi trường CSP nghiêm ngặt không bật worker-src blob: ; child-src blob:, có một gói TrackAsia GL JS riêng (trackasia-gl-csp.js và trackasia-gl-csp-worker.js) yêu cầu thiết lập đường dẫn đến worker theo cách thủ công:

<script>
trackasiagl.setWorkerUrl("${urls.js().replace('.js', '-csp-worker.js')}");
...
</script>

TrackAsia CSS

Việc thêm CSS bằng thẻ <link> trong phần <head> của tài liệu thông qua UNPKG CDN là cách đơn giản và dễ dàng nhất để cung cấp CSS, nhưng CSS này cũng đã được đóng gói sẵn trong module TrackAsia. Nếu bạn sử dụng một bundler có thể xử lý CSS, bạn cũng có thể import CSS từ trackasia-gl/dist/trackasia-gl.css.

Lưu ý rằng nếu CSS chưa có sẵn khi trang được render lần đầu, ngay khi CSS được cung cấp, các phần tử DOM phụ thuộc vào CSS này sẽ tự động hiển thị lại đúng cách.

CDN

TrackAsia GL JS cũng được phân phối qua UNPKG. Phiên bản mới nhất có thể được cài đặt bằng cách thêm các thẻ dưới đây vào phần <head> của file HTML. Hướng dẫn chi tiết về cách chọn phiên bản cụ thể và phạm vi semver có thể được tìm thấy tại unpkg.com.

<script src="https://unpkg.com/trackasia-gl@latest/dist/trackasia-gl.js"></script>
<link href="https://unpkg.com/trackasia-gl@latest/dist/trackasia-gl.css" rel="stylesheet" />