CesiumJS là thư viện JavaScript mã nguồn mở, sử dụng công nghệ WebGL để hiển thị dữ liệu địa không gian 3D ngay trên trình duyệt Web. Thư viện hỗ trợ trực quan hóa quả địa cầu, địa hình, ảnh vệ tinh, mô hình 3D và dữ liệu point cloud. Nội dung tổng hợp dưới đây giới thiệu kiến trúc hoạt động, khả năng hiển thị bản đồ và địa hình 3D, công nghệ 3D Tiles cho dữ liệu quy mô lớn, cùng các tính năng tương tác, đo đạc và phân tích không gian trong CesiumJS.

Tổng quan

Trong những năm gần đây, nhu cầu xây dựng các hệ thống bản đồ trực tuyến không chỉ dừng lại ở việc hiển thị dữ liệu trên bản đồ 2 chiều (2D) mà ngày càng mở rộng sang việc trực quan hóa không gian ba chiều (3D). Các ứng dụng như bản đồ đô thị 3D, mô hình địa hình, dữ liệu LiDAR, mô hình công trình, dữ liệu BIM và mô hình thành phố số đòi hỏi một công nghệ có khả năng xử lý và hiển thị lượng dữ liệu không gian lớn trực tiếp trên trình duyệt Web.

CesiumJS là một thư viện JavaScript mã nguồn mở được phát triển chuyên cho việc xây dựng các ứng dụng trực quan hóa dữ liệu địa không gian 3D trên nền Web. CesiumJS sử dụng công nghệ WebGL để khai thác khả năng xử lý đồ họa của GPU, cho phép trình duyệt hiển thị quả địa cầu 3D, địa hình, ảnh vệ tinh, mô hình 3D, point cloud và nhiều loại dữ liệu không gian khác.

Một trong những ưu điểm nổi bật của CesiumJS là người dùng không cần cài đặt phần mềm GIS chuyên dụng. Chỉ cần một trình duyệt Web mới người dùng có thể truy cập hệ thống và tương tác trực tiếp với dữ liệu 3D.

Kiến trúc và nguyên lý hoạt động

Một ứng dụng CesiumJS cơ bản thường bao gồm một phần giao diện Web chạy trên trình duyệt và các máy chủ cung cấp dữ liệu.

Mô hình tổng quát:

Asset 1@6x 8

 

CesiumJS đóng vai trò là bộ máy hiển thị và tương tác 3D ở phía trình duyệt. Dữ liệu có thể được cung cấp từ nhiều nguồn khác nhau thông qua các dịch vụ Web,  cho phép tách biệt giữa dữ liệu và giao diện hiển thị. Dữ liệu có thể được lưu trữ trên hệ thống máy chủ riêng, trong khi CesiumJS đảm nhiệm việc tải, quản lý và hiển thị dữ liệu trên trình duyệt.

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

CesiumJS có khả năng hiển thị các lớp hình ảnh trên bề mặt địa cầu. Các lớp này có thể là ảnh vệ tinh, ảnh hàng không, bản đồ nền hoặc dữ liệu raster được cung cấp thông qua các dịch vụ Web.

Trong các hệ thống GIS chuyên nghiệp, CesiumJS có thể kết hợp với các dịch vụ như WMS, WMTS hoặc các API cung cấp tile ảnh.

Đối với dữ liệu raster lớn, một kiến trúc hiện đại có thể sử dụng Cloud Optimized GeoTIFF (COG) kết hợp với một raster tile server như TiTiler. Khi đó CesiumJS chỉ yêu cầu phần dữ liệu cần thiết thay vì tải toàn bộ ảnh về trình duyệt.

Hiển thị địa hình 3D

2019 03 01 olympus ut
Hình 1. Địa hình 3D được hiển thị bằng CesiumJS

CesiumJS hỗ trợ hiển thị nền địa hình , cho phép biế n bề mặt địa lý từ dạng phẳng thành mô hình địa hình 3D.

Ví dụ, từ dữ liệu DEM:

Asset 2@6x 8

Điều này đặc biệt hữu ích trong các ứng dụng: Quản lý, phân tích địa hình; quản lý tài nguyên, hạ tầng, quy hoạch; mô phỏng thiên tai; giám sát môi trường.

Khi kết hợp nền địa hình với ảnh vệ tinh, người dùng có thể tạo ra một mô hình trực quan gần với thế giới thực.

3D Tiles – thành phần quan trọng của Cesium

3D Tiles
Hình 2. 3D Tiles – Hiển thị dữ liệu 3D quy mô lớn

Một trong những công nghệ quan trọng nhất trong hệ sinh thái Cesium là 3D Tiles.

3D Tiles được thiết kế để truyền tải và hiển thị các tập dữ liệu 3D quy mô lớn. Thay vì tải toàn bộ mô hình về máy người dùng, dữ liệu được tổ chức thành một cấu trúc tile phân cấp.

Asset 3@6x 8

CesiumJS sử dụng vị trí và góc nhìn của camera để xác định những tile cần thiết. Các tile ở xa hoặc nằm ngoài vùng quan sát có thể được giảm mức độ chi tiết hoặc không cần tải. Cơ chế này giúp CesiumJS có thể xử lý các dataset rất lớn như: Mô hình thành phố 3D, tòa nhà 3D, point cloud, mô hình đo ảnh, BIM, hạ tầng giao thông, mô hình địa hình và các đối tượng 3D. Đây là một trong những điểm khác biệt quan trọng giữa CesiumJS và nhiều thư viện Web 3D thông thường.

Tương tác với đối tượng 3D

CesiumJS không chỉ hiển thị mô hình mà còn cho phép lập trình tương tác với các đối tượng.

Ví dụ, người dùng chọn một tòa nhà sẽ hiển thị các thông tin thuộc tính như:

  • Building ID: 10235
  • Height: 38.5 m
  • Number of floors: 10
  • Type: Residential
  • Year: 2024

Thông tin thuộc tính có thể được liên kết với đối tượng 3D để phục vụ các hệ thống quản lý đô thị, quản lý tài sản và GIS.

Có thể xây dựng các chức năng: chọn đối tượng, làm nổi bật đối tượng hiển thị thuộc tính, bật/tắt lớp dữ liệu, điều chỉnh độ trong suốt, thay đổi màu đối tượng, lọc đối tượng theo thuộc tính, hiển thị đối tượng.

Đo đạc và phân tích không gian

CesiumJS cung cấp các API cho phép phát triển các công cụ đo đạc trên môi trường 3D, ví dụ như: đo khoảng cách, chiều cao, diện tích; xác định tọa độ, cao độ; phân tích góc nhìn và vùng quan sát.

Đối với các hệ thống chuyên nghiệp, những chức năng này có thể được phát triển thêm bằng JavaScript hoặc TypeScript.

Tài liệu tham khảo