Tổng Quan

Hiển thị các tòa nhà ở dạng 3D

Sử dụng các khối đùn để hiển thị chiều cao của các tòa nhà ở dạng 3D.

Đùn các đa giác để lập bản đồ trong nhà 3D

Tạo bản đồ trong nhà 3D với thuộc tính sơn fill-extrude-height.

Địa hình 3D

Vượt ra ngoài bóng đổ và hiển thị độ cao thực sự ở dạng 3D.

Thêm mô hình 3D với babylon.js

Sử dụng lớp kiểu tùy chỉnh với babylon.js để thêm mô hình 3D vào bản đồ.

Thêm mô hình 3D với bóng đổ bằng three.js

Sử dụng lớp kiểu tùy chỉnh với three.js để thêm mô hình 3D có bóng đổ vào bản đồ.

Thêm mô hình 3D bằng three.js trên địa hình

Sử dụng lớp kiểu tùy chỉnh với three.js để thêm các mô hình 3D vào bản đồ với địa hình 3D.

Thêm mô hình 3D bằng three.js

Sử dụng lớp kiểu tùy chỉnh với three.js để thêm mô hình 3D vào bản đồ.

Thêm một điểm đánh dấu mặc định

Thêm một điểm đánh dấu mặc định vào bản đồ.

Thêm nguồn raster COG

Thêm một Cloud Optimized Geotiff (COG) bên ngoài làm nguồn.

Tạo lớp deck.gl bằng REST API

Tạo một lớp deck.gl làm lớp phủ từ REST API.

Thêm biểu tượng động vào bản đồ

Thêm biểu tượng động vào bản đồ được tạo tại thời gian chạy bằng API Canvas.

Thêm biểu tượng được tạo vào bản đồ

Thêm biểu tượng vào bản đồ được tạo tại thời gian chạy.

Tạo và thêm biểu tượng bị thiếu vào bản đồ

Tạo động biểu tượng bị thiếu tại thời gian chạy và thêm nó vào bản đồ.

Thêm hình ảnh có thể kéo dãn vào bản đồ

Sử dụng hình ảnh có thể kéo dãn làm nền cho văn bản.

Thêm biểu tượng vào bản đồ

Thêm biểu tượng vào bản đồ từ URL bên ngoài và sử dụng nó trong một lớp biểu tượng.

Hoạt hình một đường

Hoạt hình một đường bằng cách cập nhật nguồn GeoJSON trên mỗi khung hình.

Hoạt hình camera bản đồ xung quanh một điểm

Hoạt hình camera bản đồ xung quanh một điểm.

Hoạt hình một loạt hình ảnh

Sử dụng một loạt nguồn hình ảnh để tạo hoạt hình.

Hoạt hình một điểm đánh dấu

Hoạt hình vị trí của một điểm đánh dấu bằng cách cập nhật vị trí của nó trên mỗi khung hình.

Hoạt hình một điểm

Hoạt hình vị trí của một điểm bằng cách cập nhật nguồn GeoJSON trên mỗi khung hình.

Hoạt hình một điểm dọc theo tuyến đường

Sử dụng Turf để hoạt hình một điểm mượt mà dọc theo khoảng cách của một đường thẳng.

Hoạt hình biểu tượng để theo dõi chuột

Hoạt hình biểu tượng để theo dõi chuột.

Thay đổi vị trí mặc định cho chú thích

Đặt chú thích ở vị trí trên cùng bên trái khi khởi tạo bản đồ.

Tùy chỉnh hoạt hình camera

Tùy chỉnh hoạt hình camera bằng cách sử dụng AnimationOptions.

Thêm nguồn canvas

Thêm một nguồn canvas vào bản đồ.

Đặt bản đồ vào biểu tượng được nhấp

Sử dụng sự kiện và flyTo để đặt bản đồ vào một biểu tượng.

Đặt điểm trung tâm trên mặt đất

Đặt điểm trung tâm trên mức mặt đất.

Thay đổi màu sắc tòa nhà dựa trên mức thu phóng

Sử dụng biểu thức interpolate để làm mờ dần lớp tòa nhà và chuyển đổi mượt mà từ màu này sang màu khác.

Thay đổi kiểu chữ của nhãn

Sử dụng biểu thức upcase và downcase để thay đổi kiểu chữ của nhãn.

Thay đổi kiểu bản đồ

Thay đổi kiểu bản đồ thông qua tương tác bằng cách sử dụng setStyle().

Kiểm tra xem WebGL có được hỗ trợ không

Kiểm tra hỗ trợ trình duyệt WebGL.

Hiển thị các cụm HTML với thuộc tính tùy chỉnh

Mở rộng cụm với các điểm đánh dấu HTML và biểu thức thuộc tính tùy chỉnh.

Tạo cụm với Leaflet

Tạo cụm với Leaflet và TrackAsia GL JS.

Tạo và tạo kiểu cho các cụm

Sử dụng các chức năng tích hợp của TrackAsia GL JS để trực quan hóa các điểm dưới dạng cụm.

Thay đổi màu của một lớp bằng các nút

Sử dụng setPaintProperty để thay đổi màu sắc của lớp.

Thêm các đường đồng mức

Thêm các đường đồng mức vào bản đồ của bạn từ một nguồn raster-dem.

Cử chỉ hợp tác

Kích hoạt các cử chỉ hợp tác với một ngôn ngữ cụ thể. Xem cách nó hoạt động ở chế độ toàn màn hình.

Thêm biểu tượng tùy chỉnh với Markers

Thêm các biểu tượng đánh dấu tùy chỉnh vào bản đồ của bạn.

Thêm một lớp kiểu tùy chỉnh

Sử dụng một lớp kiểu tùy chỉnh để hiển thị nội dung WebGL tùy chỉnh.

Tạo kiểu cho các đường với thuộc tính dựa trên dữ liệu

Tạo một hình ảnh trực quan với một biểu thức dữ liệu cho line-color.

Dẫn đường giữa nhiều điểm tùy chỉnh

Dẫn đường giữa nhiều điểm tùy chỉnh với dịch vụ dẫn đường TrackAsia API.

Dẫn đường giữa nhiều điểm

Dẫn đường giữa nhiều điểm với dịch vụ dẫn đường TrackAsia API.

Dẫn đường giữa hai điểm

Dẫn đường giữa hai điểm với dịch vụ dẫn đường TrackAsia API.

Vô hiệu hóa xoay bản đồ

Ngăn người dùng xoay bản đồ.

Vô hiệu hóa thu phóng bằng cuộn

Ngăn cuộn chuột thu phóng bản đồ.

Hiển thị và tạo kiểu cho nhãn văn bản phong phú

Sử dụng biểu thức format để hiển thị nhãn quốc gia bằng cả tiếng Anh và ngôn ngữ địa phương.

Hiển thị menu ngữ cảnh

Hiển thị menu ngữ cảnh khi nhấp chuột phải vào bản đồ.

Tạo một điểm đánh dấu có thể kéo

Kéo điểm đánh dấu đến một vị trí mới trên bản đồ và hiển thị tọa độ của nó.

Tạo một điểm có thể kéo

Kéo điểm đến một vị trí mới trên bản đồ và hiển thị tọa độ của nó.

Vẽ một vòng tròn

Vẽ một bán kính để ước lượng một vị trí với Turf.js.

Sử dụng hình ảnh dự phòng

Sử dụng biểu thức coalesce để hiển thị một hình ảnh khác khi hình ảnh được yêu cầu không khả dụng.

Sử dụng addProtocol để chuyển đổi thuộc tính của đối tượng

Chuyển đổi thuộc tính của đối tượng bằng cách sử dụng addProtocol.

Thêm mẫu vào một đa giác

Thêm một mẫu vào một đa giác để tạo kiểu.

Lọc biểu tượng bằng đầu vào văn bản

Lọc các biểu tượng trên bản đồ dựa trên đầu vào văn bản của người dùng.

Lọc biểu tượng bằng cách bật tắt danh sách

Lọc các biểu tượng trên bản đồ bằng cách bật tắt các mục trong danh sách.

Lọc trong một lớp

Lọc một lớp dựa trên đầu vào của người dùng bằng cách sử dụng setFilter().

Điều chỉnh bản đồ để vừa với một hộp giới hạn

Sử dụng fitBounds để điều chỉnh bản đồ sao cho vừa với một hộp giới hạn.

Bay chậm đến một vị trí

Sử dụng flyTo với các tùy chọn để bay chậm đến một vị trí trên bản đồ.

Bay đến một vị trí

Sử dụng flyTo để nội suy mượt mà giữa các vị trí.

Xem bản đồ ở chế độ toàn màn hình

Hiển thị bản đồ ở chế độ toàn màn hình.

Điều hướng bản đồ với các điều khiển giống trò chơi

Sử dụng các điều khiển giống trò chơi để điều hướng bản đồ.

Tạo mã nhúng bản đồ

Tạo mã nhúng bản đồ vào một trang web khác.

Geocode với Nominatim

Geocode với Nominatim và plugin trackasia-gl-geocoder.

Thêm một lớp mới bên dưới nhãn

Thêm một lớp GeoJSON mới vào bản đồ và đặt nó bên dưới các nhãn.

Thêm một đường GeoJSON

Thêm một đường GeoJSON vào bản đồ bằng addSource, sau đó tạo kiểu cho nó bằng các thuộc tính paint của addLayer.

Vẽ các điểm GeoJSON

Thêm và hiển thị các điểm GeoJSON trên bản đồ.

Thêm một đa giác GeoJSON

Tạo kiểu cho một đa giác với loại lớp fill.

Thêm mô hình 3D vào quả địa cầu bằng three.js

Sử dụng một lớp kiểu tùy chỉnh với three.js để thêm mô hình 3D vào quả địa cầu.

Hiển thị quả địa cầu với bầu khí quyển

Hiển thị quả địa cầu với bầu khí quyển.

Thêm một lớp tùy chỉnh đơn giản trên quả địa cầu

Sử dụng một lớp tùy chỉnh để vẽ nội dung WebGL đơn giản trên quả địa cầu.

Hiển thị quả địa cầu với các ô tùy chỉnh

Hiển thị quả địa cầu với các ô tùy chỉnh.

Hiển thị quả địa cầu với lớp đùn

Thêm một lớp đùn vào quả địa cầu để hiển thị chiều cao.

Hiển thị quả địa cầu với bản đồ vector

Thêm một bản đồ vector vào quả địa cầu.

Phóng to quả địa cầu với chức năng kích thước hành tinh

Phóng to quả địa cầu với chức năng kích thước hành tinh.

Định tuyến bằng hash

Sử dụng hash trong URL để định tuyến bản đồ.

Tạo lớp bản đồ nhiệt trên quả địa cầu với địa hình

Thêm một lớp bản đồ nhiệt trên quả địa cầu với độ cao địa hình.

Tạo một lớp bản đồ nhiệt

Trực quan hóa tần suất động đất theo vị trí bằng cách sử dụng lớp bản đồ nhiệt.

Đổ bóng đa hướng

Hiển thị đổ bóng đa hướng với các màu sắc và hướng chiếu sáng khác nhau.

Thêm lớp đổ bóng địa hình

Hiển thị lớp đổ bóng địa hình đơn giản trên bản đồ.

Tạo hiệu ứng khi di chuột

Thêm hiệu ứng khi di chuột qua các phần tử trên bản đồ.

Hiển thị bản đồ vệ tinh lai với địa hình

Kết hợp bản đồ vệ tinh và địa hình để hiển thị bản đồ lai.

Hiển thị bản đồ không tương tác

Vô hiệu hóa tính tương tác để tạo một bản đồ tĩnh.

Nhảy đến một loạt vị trí

Sử dụng jumpTo để di chuyển nhanh đến các vị trí khác nhau trên bản đồ.

Thay đổi ngôn ngữ của bản đồ

Chuyển đổi ngôn ngữ hiển thị trên bản đồ.

Hiển thị đường cắt qua kinh tuyến 180

Vẽ một đường cắt qua kinh tuyến 180 trên bản đồ.

Tạo một đường gradient bằng biểu thức

Sử dụng biểu thức để tạo một đường gradient trên bản đồ.

Thêm dữ liệu thời gian thực

Thêm dữ liệu GeoJSON thời gian thực vào bản đồ.

Cập nhật một đối tượng trong thời gian thực

Cập nhật một đối tượng trên bản đồ trong thời gian thực.

Xem GeoJSON cục bộ (thử nghiệm)

Xem GeoJSON cục bộ với API Truy cập Hệ thống Tệp thử nghiệm.

Xem GeoJSON cục bộ

Hiển thị dữ liệu GeoJSON cục bộ trên bản đồ.

Sử dụng các ký tự tượng hình được tạo cục bộ

Đặt localIdeographFontFamily để ghi đè phông chữ được sử dụng để hiển thị các ký tự CJK (Trung Quốc, Nhật Bản và Hàn Quốc), bỏ qua kiểu bản đồ.

Xác định vị trí người dùng

Sử dụng API định vị để xác định vị trí của người dùng trên bản đồ.

Kiểm soát mức độ chi tiết

Điều chỉnh mức độ chi tiết của các lớp trên bản đồ.

Các kiểu bản đồ

Các kiểu bản đồ có sẵn trong TrackAsia GL JS.

Thêm nguồn ô raster

Thêm một nguồn ô raster vào bản đồ.

Vẽ đa giác với mapbox-gl-draw

Sử dụng plugin mapbox-gl-draw để vẽ các đa giác trên bản đồ.

Thêm hỗ trợ cho các ngôn ngữ từ phải sang trái

Thêm hỗ trợ cho các ngôn ngữ như tiếng Ả Rập và tiếng Do Thái trên bản đồ.

Vẽ hình học với terra-draw

Sử dụng plugin terra-draw để vẽ các hình học trên bản đồ.

Đo khoảng cách

Nhấp vào các điểm trên bản đồ để tạo các đường đo khoảng cách bằng cách sử dụng turf.length.

Lấy tọa độ của con trỏ chuột

Hiển thị tọa độ của con trỏ chuột trên bản đồ.

Thêm nhiều hình học từ một nguồn GeoJSON

Hiển thị nhiều hình học từ một nguồn GeoJSON duy nhất trên bản đồ.

Hiển thị các điều khiển điều hướng bản đồ

Thêm các điều khiển thu phóng và xoay vào bản đồ.

Dịch điểm biến mất bằng cách sử dụng đệm

Dịch tâm hoặc điểm biến mất của bản đồ để giảm méo khi hiển thị các phần tử nổi trên bản đồ.

Nguồn và giao thức PMTiles

Sử dụng plugin và giao thức PMTiles để hiển thị bản đồ.

Hiển thị thông tin đa giác khi nhấp

Hiển thị thông tin của một đa giác khi người dùng nhấp vào nó.

Hiển thị popup khi nhấp

Hiển thị một popup khi người dùng nhấp vào bản đồ.

Hiển thị popup khi di chuột

Hiển thị một popup khi người dùng di chuột qua một phần tử trên bản đồ.

Hiển thị popup

Thêm và hiển thị một popup trên bản đồ.

Lấy các đặc điểm dưới con trỏ chuột

Sử dụng queryRenderedFeatures để hiển thị thuộc tính của các phần tử bản đồ được di chuột qua.

Hiển thị các bản sao của thế giới

Hiển thị các bản sao của thế giới trên bản đồ.

Giới hạn việc di chuyển bản đồ trong một khu vực

Giới hạn việc di chuyển bản đồ trong một khu vực cụ thể.

Hiển thị bản đồ vệ tinh

Hiển thị một lớp nền raster vệ tinh.

Bay đến một vị trí dựa trên vị trí cuộn

Sử dụng vị trí cuộn để bay đến một vị trí cụ thể trên bản đồ.

Đặt góc nghiêng và hướng

Thay đổi góc nghiêng và hướng của bản đồ.

Gắn popup vào một điểm đánh dấu

Thêm một popup vào một điểm đánh dấu trên bản đồ.

Hiển thị một bản đồ

Hiển thị một bản đồ cơ bản.

Bầu trời, Sương mù, Địa hình

Hiển thị bầu trời, sương mù và địa hình trên bản đồ.

Đồng bộ hóa chuyển động của nhiều bản đồ

Đồng bộ hóa các bản đồ TrackAsia GL JS với plugin sync-move.

Sử dụng TrackAsia GL JS với các thư viện bên thứ ba

Sử dụng TrackAsia GL JS với các thư viện bên thứ ba.

Tạo thanh trượt thời gian

Thêm một thanh trượt thời gian để điều khiển hoạt hình trên bản đồ.

Chuyển đổi lớp deck.gl

Chuyển đổi lớp deck.gl bằng cách sử dụng TrackAsia.

Chuyển đổi các trình xử lý tương tác

Bật hoặc tắt các trình xử lý giao diện người dùng trên bản đồ.

Đặt nhãn biến đổi

Sử dụng text-variable-anchor để cho phép các nhãn ưu tiên cao thay đổi vị trí để ở lại trên bản đồ.

Đặt nhãn với độ lệch biến đổi

Sử dụng độ lệch biến đổi để đặt nhãn trên bản đồ.

Thêm nguồn ô vector

Thêm một nguồn ô vector vào bản đồ.

Thêm video vào bản đồ

Thêm một video làm lớp phủ trên bản đồ.

Trực quan hóa mật độ dân số

Hiển thị mật độ dân số trên bản đồ bằng cách sử dụng lớp bản đồ nhiệt.

Tìm đường cho bài toán VRP

Tìm đường cho bài toán VRP với dịch vụ dẫn đường TrackAsia API.

Thêm nguồn WMS

Thêm một nguồn WMS vào bản đồ.

Phóng to để vừa với giới hạn của LineString

Lấy giới hạn của một LineString.