Xem Đường Phố Toàn Cảnh (Street View & Mapillary)

Tính năng Xem Đường Phố Toàn Cảnh (Street View) mang lại trải nghiệm khảo sát hiện trường thực tế ảo (Virtual Field Survey) ngay trên nền tảng Web GIS. Cho phép kỹ sư, chuyên viên thẩm định và nhà quản lý nhấp chuột vào bất kỳ vị trí nào trên mạng lưới giao thông hoặc khu vực dự án để mở ảnh toàn cảnh 360° với góc nhìn đồng bộ hai chiều theo thời gian thực.

---

1. Quy Trình 6 Bước Khảo Sát Hiện Trường Bằng Street View

Để kích hoạt và sử dụng công cụ Street View, người dùng thực hiện theo các bước sau:

1. Kích hoạt công cụ: Bấm vào nút Xem đường phố (Street View) có biểu tượng Camera/CCTV trên thanh công cụ bên trái bản đồ (hoặc truy cập từ menu Tiện ích mở rộng trên thanh điều hướng đỉnh). Khi kích hoạt, nút công cụ sẽ chuyển sang màu vàng nổi bật.
2. Chọn điểm khảo sát trên bản đồ: Con trỏ chuột trên bản đồ OpenLayers tự động chuyển thành dạng chữ thập (crosshair). Người dùng nhấp chuột trái vào bất kỳ vị trí nào (tim đường, ngã tư, hành lang an toàn hoặc trước cửa thửa đất cần khảo sát).
3. Hiển thị định vị và bảng điều khiển:
   • Ngay tại điểm nhấp chuột, biểu tượng Người chỉ đường (Pegman Marker) màu vàng và Hình nón trường nhìn (FOV Cone) sẽ xuất hiện.
   • Cửa sổ bảng điều khiển Street View Dock lập tức mở ra ở cạnh phải màn hình và tự động truy vấn nạp hình ảnh thực địa gần nhất.
4. Tương tác xoay 360° quan sát hiện trạng:
   • Nhấn giữ chuột trái và kéo rê bên trong khung ảnh để xoay nhìn toàn cảnh 360° (nhìn sang trái, phải, nhìn lên cao hoặc xuống mặt đường).
   • Lăn con lăn chuột để phóng to (Zoom in) hoặc thu nhỏ (Zoom out) tiêu cự nhằm kiểm tra chi tiết công trình kiến trúc hoặc biển hiệu.
5. Di chuyển bước tới dọc tuyến đường (Walkthrough Navigation):
   • Trên đỉnh khung nhìn Mapillary xuất hiện các mũi tên điều hướng:
     • [ < ] (Bước lùi về sau)
     • [ > ] (Bước tiến về phía trước theo tim đường)
     • [ >| ] (Chuyển nhanh sang khung hình tiếp theo trong chuỗi hành trình)
   • Khi bấm di chuyển, hình ảnh toàn cảnh chuyển động liên tục và ghim Pegman trên bản đồ sẽ tự động dời vị trí tương ứng.
6. Đóng công cụ: Nhấp vào nút "X" ở góc trên bên phải bảng Street View để đóng khung nhìn, giải phóng tài nguyên đồ họa WebGL và xóa ghim định vị trên bản đồ.

---

2. Cơ Chế Đồng Bộ Góc Nhìn 2 Chiều Thời Gian Thực (Bi-directional Sync)

Điểm cốt lõi giúp tính năng Street View của InfraMap GIS vượt trội so với các công cụ xem ảnh thông thường là khả năng đồng bộ hóa không gian hai chiều giữa bản đồ 2D và khung ảnh toàn cảnh 360°:

A. Ghim Định Vị Người Xem (Pegman Marker)

• Ghim hình người màu vàng hiển thị chính xác vị trí trạm đo hoặc tọa độ xe ghi hình thực tế khi chụp bức ảnh toàn cảnh.
• Ghim này được vẽ trên lớp vector chuyên dụng (OlStreetViewLayer) với chỉ số zIndex = 100 để luôn nổi lên trên các lớp ranh giải phóng mặt bằng hay không gian địa chính.

B. Hình Nón Trường Nhìn (Field of View - FOV Cone)

• Tỏa ra từ chân ghim Pegman một dải màu vàng bán trong suốt góc mở từ 60° đến 90°, đại diện cho góc quan sát hiện tại của mắt người hoặc ống kính camera.
• Đồng bộ góc phương vị (Bearing Sync): Khi bạn kéo xoay chuột trong khung ảnh 360°, sự kiện pov (Point of View) của Mapillary liên tục tính toán góc phương vị thực tế (Bearing từ $0^\circ$ đến $360^\circ$ theo chiều kim đồng hồ so với hướng Bắc thực).
• Giá trị Bearing này ngay lập tức cập nhật vào trạng thái bản đồ và xoay hình nón FOV trên bản đồ OpenLayers theo thời gian thực (ví dụ: xoay từ góc $65^\circ$ Đông Bắc sang $135^\circ$ Đông Nam). Nhờ đó, người thẩm định luôn biết chắc chắn mình đang nhìn vào mặt tiền nhà nào hay công trình hạ tầng nào trên bản đồ.

C. Tự Động Định Tuyến Ảnh Gần Nhất (Nearest Image Discovery)

• Khi bạn click vào một điểm bất kỳ trên bản đồ, hệ thống tự động gửi yêu cầu đến Mapillary Graph API với tọa độ [lng, lat] và bán kính tìm kiếm tự động radius=50m.
• Nếu tìm thấy ảnh trong bán kính 50 mét, hệ thống tự động chuyển mượt (viewer.moveTo(imageId)) tới khung ảnh đó mà không cần người dùng nhập mã ảnh thủ công.

---

3. So Sánh & Chuyển Đổi Giữa Mapillary và Google Street View

Hệ thống tích hợp sẵn nút gạt chuyển đổi nhanh (Provider Toggle) giữa hai nguồn dữ liệu ảnh toàn cảnh hàng đầu:

Tiêu Chí So Sánh	Nền Tảng Mapillary (Mặc định)	Nền Tảng Google Street View
Công nghệ tích hợp	Thư viện đồ họa Mapillary-JS render trực tiếp trên WebGL Canvas nội bộ.	Nhúng qua chuẩn Iframe nhúng của Google Maps Embed API.
Đồng bộ FOV xoay góc	Hỗ trợ 100% thời gian thực: Hình nón FOV trên bản đồ xoay đồng bộ theo từng cử chỉ chuột.	Hỗ trợ xem trực quan trên khung nhúng, định vị tọa độ camera theo điểm click.
Di chuyển bước tới (Walkthrough)	Có: Bấm mũi tên di chuyển liên tiếp dọc tuyến đường, ghim Pegman trên bản đồ tự động nhảy theo tọa độ ảnh.	Di chuyển trực tiếp trên khung điều khiển của Google Maps.
Bản quyền & Chi phí	Cơ sở dữ liệu mở (Open Imagery): Tích hợp thông qua khóa Client Token của dự án, không phát sinh chi phí theo lượt xem.	Tuân theo chính sách nhúng của Google Maps Platform.
Xem toàn màn hình ngoài	Xem toàn màn hình trực tiếp trong Dock hoặc phóng to trình duyệt.	Nút "Mở Maps" (External Link): Bấm để mở tab mới hiển thị Google Street View Panorama toàn cảnh độ nét cao.

---

4. Tùy Biến Kích Thước Khung Nhìn Khảo Sát (Resizable Docking Panel)

Để phục vụ tốt nhất các nhu cầu khảo sát hiện trường từ màn hình laptop nhỏ đến màn hình điều hành độ phân giải lớn 2K/4K, bảng điều khiển Street View hỗ trợ co giãn linh hoạt:

• Kéo ray ngang mở rộng chiều rộng (Horizontal Resizer):
  • Đặt con trỏ chuột vào mép trái của bảng điều khiển (con trỏ chuyển thành dạng mũi tên hai chiều $\leftrightarrow$).
  • Nhấn giữ chuột và kéo sang trái để mở rộng độ rộng khung nhìn từ 320px lên tối đa 900px.
• Kéo ray dọc điều chỉnh chiều cao ảnh (Vertical Resizer):
  • Đặt con trỏ chuột vào thanh ray nằm giữa khung ảnh 360° và không gian dữ liệu phụ bên dưới (con trỏ chuyển thành mũi tên $\updownarrow$).
  • Nhấn giữ và kéo lên/xuống để thay đổi chiều cao cửa sổ xem ảnh từ 200px đến 600px.
• Tự động cân đối khung nhìn bản đồ (Auto Fit Map Resize):
  • Mỗi khi thay đổi kích thước bảng điều khiển hoặc đóng/mở panel, hệ thống tự động phát tín hiệu window.dispatchEvent(new Event("resize")) sau 250ms.
  • Bản đồ OpenLayers và khung ảnh Mapillary sẽ tự động cân chỉnh lại tỷ lệ khung hình, đảm bảo bản đồ không bị che khuất và các đối tượng địa lý không bị méo lệch.

---

5. Ứng Dụng Nghiệp Vụ Trong Quản Lý GIS & Giải Phóng Mặt Bằng

Tính năng Street View mang lại giá trị gia tăng to lớn cho các dự án hạ tầng giao thông và bồi thường tái định cư:

1. Kiểm kê vật kiến trúc & nhà ở giải tỏa:
   • Quan sát trực tiếp số tầng, kết cấu xây dựng (nhà tạm, nhà cấp 4, nhà bê tông kiên cố, ban công cơi nới) của từng thửa đất mặt tiền mà không cần đến tận nơi.
2. Thống kê công trình hạ tầng kỹ thuật:
   • Xác định chính xác vị trí cột điện, trạm biến áp, nắp hố ga thoát nước, biển báo hiệu giao thông, trụ nước cứu hỏa và cây xanh đô thị nằm trong ranh giới thu hồi đất.
3. Đánh giá bề rộng đường và khả năng tiếp cận:
   • Khảo sát hiện trạng mặt đường bê tông/nhựa, bề rộng vỉa hè hiện hữu, độ dốc vỉa hè và khả năng lưu thông của các phương tiện xe máy thi công cơ giới.
4. Tiết kiệm thời gian & chi phí giám sát:
   • Giảm thiểu hơn 60% số lần cử đoàn công tác ra thực địa, hỗ trợ giải quyết nhanh các thắc mắc, kiến nghị của người dân trong các buổi họp tiếp xúc cử tri.

---

6. Các Lưu Ý Kỹ Thuật Quan Trọng

NOTE

Về bán kính phủ sóng hình ảnh: Mapillary và Google Street View ưu tiên phủ dữ liệu trên các tuyến quốc lộ, tỉnh lộ và đường đô thị. Nếu bạn nhấp vào khu vực sâu trong đồng ruộng, vùng đồi núi hoặc rừng ngập mặn cách đường giao thông hơn 50 mét, hệ thống sẽ không tìm thấy ảnh và giữ nguyên khung nhìn trước đó. Khi khảo sát, nên chọn điểm nhấp chuột nằm trên hoặc cạnh tim đường giao thông.

TIP

Cấu hình API Token Mapillary: Khóa truy cập Mapillary được nạp tự động qua biến môi trường NEXT_PUBLIC_MAPILLARY_ACCESS_TOKEN. Quản trị viên hệ thống có thể thay thế bằng Client Token riêng của tổ chức để kích hoạt thêm các lớp dữ liệu nhận diện vật thể AI (Traffic Signs Detection, Point Features) do Mapillary xử lý tự động.

IMPORTANT

Tự động giải phóng bộ nhớ (Resource Cleanup): Khi hoàn tất quá trình xem ảnh và nhấp nút đóng X, ứng dụng sẽ tự động gọi phương thức viewer.remove() để giải phóng bộ nhớ GPU của WebGL canvas và ngắt kết nối ResizeObserver, giúp ứng dụng Web GIS duy trì tốc độ khung hình 60 FPS mượt mà.