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:
| Basemap | Nguồn | Khi nào dùng |
|---|---|---|
| Google Satellite | https://mt1.google.com/... | Xem ảnh vệ tinh chi tiết |
| Google Hybrid | https://mt1.google.com/... | Kết hợp ảnh vệ tinh + đường + nhãn |
| OpenStreetMap | https://tile.openstreetmap.org/... | Bản đồ nền miễn phí, có dữ liệu đường |
| MBTiles nội bộ | Từ GIS Import | Khi đã 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) để:
- Click Draw polygon
- Click từng điểm trên bản đồ
- Click 2 lần vào điểm cuối cùng để hoàn tất
- 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 overlay | Nguồn | Mô tả |
|---|---|---|
| ODM orthophoto | http://localhost:9002/odm/tiles/... | Kết quả ghép ảnh drone |
| GIS Import MBTiles | http://localhost:9002/gis-import/tiles/... | Sau khi import Shapefile/GeoPackage |
| GeoJSON động | highlight / blink | Hiệu ứng focus feature |
Tích hợp với các module khác
- Lập lưới bay: Polygon vẽ trong bản đồ có thể dùng làm khu vực bay
- Ghép ảnh ODM: Orthophoto từ ODM hiển thị trực tiếp trên bản đồ
- OCR Project: Chọn vị trí thửa đất ngay trên bản đồ
- Tìm ảnh vệ tinh: TODO: xác nhận tích hợp
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 URLGET /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ỗi | Nguyên nhân | Cách xử lý |
|---|---|---|
| Bản đồ trắng, không load | TODO | TODO: Kiểm tra kết nối internet, Mapbox token |
| Basemap Google không hiển thị | TODO | TODO |
| Polygon không hiển thị | Layer bị tắt | Bật lại layer trong layer selector |
| Hiệu suất chậm khi vẽ polygon lớn | TODO | TODO |