Bản đồ

Hướng dẫn sử dụng module Bản đồ trong TLGeo Desktop

T
Tác giả TLGeo
Thời gian đọc 3 min read
Đăng tải 2025-01-01

Bản đồ (Map)

Module Bản đồ sử dụng Mapbox GL JS 3.11 kết hợp plugin @mapbox/mapbox-gl-draw để vẽ polygon. Hỗ trợ nhiều basemap (Google Satellite, Google Hybrid, OSM, MBTiles nội bộ) và các layer overlay (orthophoto ODM, GeoJSON động).

Tính năng chính

  • Hiển thị nhiều basemap: Google Satellite, Google Hybrid, OpenStreetMap, MBTiles nội bộ
  • Vẽ polygon trực tiếp trên bản đồ
  • Hiển thị overlay orthophoto từ kết quả ghép ảnh ODM
  • Highlight & Blink feature: Hiệu ứng focus vào feature quan trọng
  • Chuyển đổi hệ tọa độ: Hỗ trợ VN-2000, WGS84 (dùng proj4)

Mở màn hình Bản đồ

Từ màn hình chính, click vào thẻ Bản đồ (nhóm KHÁC).

TODO: Chụp ảnh màn hình MapScreen.

Chọn basemap

Sử dụng Basemap Selector để chuyển đổi giữa các basemap:

BasemapNguồnKhi nào dùng
Google Satellitehttps://mt1.google.com/...Xem ảnh vệ tinh chi tiết
Google Hybridhttps://mt1.google.com/...Kết hợp ảnh vệ tinh + đường + nhãn
OpenStreetMaphttps://tile.openstreetmap.org/...Bản đồ nền miễn phí, có dữ liệu đường
MBTiles nội bộTừ GIS ImportKhi đã import dữ liệu GIS làm basemap

Lưu ý: khi đổi basemap, polygon & overlay đã vẽ vẫn được giữ nguyên.

Vẽ polygon

Sử dụng Draw tool (góc trên bên phải) để:

  1. Click Draw polygon
  2. Click từng điểm trên bản đồ
  3. Click 2 lần vào điểm cuối cùng để hoàn tất
  4. TODO: Chụp ảnh các bước vẽ polygon

Polygon sẽ được hiển thị dưới dạng fill + line layer trên bản đồ.

Hiển thị overlay

Loại overlayNguồnMô tả
ODM orthophotohttp://localhost:9002/odm/tiles/...Kết quả ghép ảnh drone
GIS Import MBTileshttp://localhost:9002/gis-import/tiles/...Sau khi import Shapefile/GeoPackage
GeoJSON độnghighlight / blinkHiệu ứng focus feature

Tích hợp với các module khác

Tích hợp với TLGeo Cloud

Một số dữ liệu bản đồ online lấy từ Strapi:

  • GET /map-datas?filters[category][$eq]=forest → danh sách MBTiles URL
  • GET /map-datas/:id/file → file MBTiles

TODO: Bổ sung ảnh chụp màn hình OnlineMapDataScreen.

Lỗi thường gặp & cách xử lý

LỗiNguyên nhânCách xử lý
Bản đồ trắng, không loadTODOTODO: Kiểm tra kết nối internet, Mapbox token
Basemap Google không hiển thịTODOTODO
Polygon không hiển thịLayer bị tắtBật lại layer trong layer selector
Hiệu suất chậm khi vẽ polygon lớnTODOTODO

Liên kết