Giải pháp trực quan hóa mô hình 3D thành phố trên nền web bằng công cụ mã nguồn mở hỗ trợ công tác quy hoạch đô thị

 Tạp chí Khoa học Kỹ thuật Mỏ - Địa chất Tập 60, Kỳ 2 (2019) 77 - 87 77 
Giải pháp trực quan hóa mô hình 3D thành phố trên nền web 
bằng công cụ mã nguồn mở hỗ trợ công tác quy hoạch đô thị 
Lã Phú Hiến * 
Khoa Kỹ thuật Tài nguyên nước, Trường Đại học Thủy lợi, Việt Nam 
THÔNG TIN BÀI BÁO 
TÓM TẮT 
Quá trình: 
Nhận bài 10/01/2019 
Chấp nhận 20/02/2019 
Đăng online 29/04/2019 
 Bài báo này thử nghiệm xây dựng một trang web biểu diễn trực quan mô 
hình 3D khu A trường Đại học Mỏ - Địa chất (HUMG) ở mức độ chi tiết LoD2 
bằng công cụ mã nguồn mở 3D CityDB và thư viện CesiumJS. Mô hình 3D 
được xây dựng từ dữ liệu ảnh chụp UAV, sau đó được chuyển sang định dạng 
JSON bằng công cụ 3D CityDB - Importer Exporter và biểu diễn trên nền web 
bằng cách tùy chỉnh gói 3dwebclient có sẵn trong bộ công cụ 3D CityDB. Kết 
quả thử nghiệm cho thấy mô hình 3D - HUMG được biểu diễn rất trực quan 
trên trang web đã xây dựng, trang web cũng có một số tính năng tương tác 
và truy vấn dữ liệu như: thêm lớp dữ liệu mới, tìm tòa nhà theo ID, mô phỏng 
bóng đổ của công trình, ẩn/hiện công trình. Những tính năng này có thể giúp 
thông tin quy hoạch được thể hiện trực quan, dễ hiểu và minh bạch hơn, qua 
đó nâng cao hiệu quả của công tác quy hoạch đô thị. 
© 2019 Trường Đại học Mỏ - Địa chất. Tất cả các quyền được bảo đảm. 
Từ khóa: 
3D - web 
Mã nguồn mở 
3D CityDB 
Quy hoạch đô thị 
Mô hình thành phố 3D 
1. Mở đầu 
Trong bối cảnh các thành phố lớn đang 
hướng tới xây dựng thành phố thông minh, mô 
hình 3D thành phố ngày càng trở thành dữ liệu 
không gian quan trọng, nó có thể là nền tảng cho 
hệ thống thông tin tích hợp của thành phố (Prandi 
et al., 2014; Yao và nnk., 2018). Bên cạnh đó, tốc 
độ đô thị hóa của các đô thị ngày càng nhanh, cơ 
sở hạ tầng ngày càng được nâng cấp, mở rộng, với 
những dự án hỗn hợp nhiều công trình khác nhau 
trên một khu vực, làm cho vấn đề quy hoạch đô thị 
đang ngày càng trở nên phức tạp hơn. Mặc dù hiện 
nay công tác quy hoạch đô thị vẫn chủ yếu được
tiến hành trên các bản vẽ 2D, việc ứng dụng mô 
hình 3D - web trong quy hoạch và quản lý đô thị 
ngày càng được quan tâm chú ý (Engman, 2016). 
Đặc biệt, với sự phát triển mạnh của công 
nghệ thông tin, mô hình 3D có thể được biểu diễn 
ngay trên trình duyệt web mà không cần phải cài 
thêm ứng dụng. Hơn nữa, công nghệ mã nguồn 
mở với ưu điểm là miễn phí và dễ dàng tùy chỉnh, 
đang hứa hẹn là giải pháp công nghệ hiệu quả để 
xây dựng các ứng dụng 3D Web ứng dụng trong 
các công tác liên quan tới không gian đô thị, trong 
đó có quy hoạch đô thị. Năm 2015, công ty 
CyberCity 3D đã phát triển nền tảng bản đồ 3D 
thành phố thông minh (3D Smart Cities mapping 
platform) để giúp chính quyền thành phố và các 
nhà quy hoạch có cái nhìn trực quan về thành phố 
của họ. Các kế hoạch, đề xuất xây dựng và phát 
triển thành phố cùng với các dữ liệu liên quan đều 
_____________________ 
*Tác giả liên hệ 
E - mail: hien.phu.la@gmail.com 
78 Lã Phú Hiến/Tạp chí Khoa học Kỹ thuật Mỏ - Địa chất 60 (2), 77 - 87 
có thể được hiển thị trên trình duyệt web 
(https://www.cybercity3d.com/). Hãng ESRI, 
một trong những hãng công nghệ hàng đầu về 
phân tích và xử lý dữ liệu không gian, cũng đã phát 
triển một bộ thư viện tên là C - Through làm nền 
tảng để xây dựng ứng dụng web có khả năng phân 
tích và quy hoạch không gian đô thị. C - Through 
đã được thử nghiệm ở ba thành phố là Zurich, 
Vancouver và Dubai, kết quả cho thấy thư viện này 
có khả năng hỗ trợ và đơn giản hóa việc phân tích 
và ra quyết định trong quy hoạch đô thị (https:// 
www .esri.com). Zhou et al. (2017) cũng nghiên 
cứu ứng dụng công nghệ 3D GIS xây dựng ứng 
dụng 3D web hỗ trợ công tác quy hoạch và quan 
trắc không gian đô thị với một số tính năng tương 
tác cơ bản như xem chi tiết của một tòa nhà bất kỳ, 
phóng to, thu nhỏ, di chuyển khung nhìn,... 
Dambruch và Krämer (2014) ứng dụng công nghệ 
HTML5 và WebGL để xây dựng trang web hiển thị 
mô hình 3D thành phố cho phép người dùng và 
nhà quản lý trao đổi ý kiến phản hồi về đề xuất quy 
hoạch. 
Hiện nay, có nhiều thư viện mã nguồn mở cho 
phép biểu diễn mô hình 3D trên web như 
CesiumJS, WebGL Earth JS API, Vizicities, Nasa 
Java World Win. Tuy nhiên, trong số các thư viện 
này thì một số thư viện đã ngừng cập nhật, một số 
chưa hoàn thiện. Riêng thư viện CesiumJS đã được 
nhiều nghiên cứu chứng minh là một thư viện có 
thể sử dụng hiệu quả trong công tác biểu diễn trực 
quan mô hình 3D trên trình duyệt web mà không 
cần phải cài thêm công cụ nào (Mete et al., 2018; 
Haje et al., 2016). Thư viện này hiện vẫn đang 
được tiếp tục hoàn thiện và được nhiều dự án lớn 
sử dụng như CiberCity, Flightradar24, Swiss 
Federal Geoportal, virtualcityMAP, Çeşme 3D City 
Model (https://cesiumjs.org/demos/). 
Ở Việt Nam, vấn đề nghiên cứu xây dựng/ứng 
dụng mô hình 3D cũng đã được thực hiện từ khá 
sớm. Các nghiên cứu ban đầu chủ yếu tập trung 
vào việc xây dựng các bản đồ/mô hình 3D trên các 
phần mềm chuyên dụng (Nguyễn Thế Thận, 2008; 
Bùi Ngọc Quý, 2008). Vài năm gần đây, một số nhà 
khoa học cũng đã quan tâm nghiên cứu vấn đề 
biểu diễn trực quan mô hình 3D trên web bằng các 
sản phầm mã nguồn mở. Một số nghiên cứu tiêu 
biểu có thể kể tới như Đỗ Thành Long et al., (2016) 
ứng dụng công nghệ 3D WebGIS xây dựng mô 
hình ngập cho khu vực Thành phố Hồ Chí Minh với 
sự hỗ trợ của thư viện mã nguồn mở Openlayers 
và WebGL, tuy nhiên, mô hình 3D trong nghiên 
cứu này chỉ là DEM đơn giản. Nguyễn Thị Thu Hà 
(2016) cũng thử nghiệm giải pháp trực quan hóa 
dữ liệu đô thị 3D trên nền Web bằng công cụ mã 
nguồn mở 3D CityDB, tuy nhiên trong nghiên cứu 
này tác giả chủ yếu tập trung vào việc thử nghiệm 
và đánh giá hiệu năng của bộ công cụ này khi hiển 
thị mô hình 3D có sẵn, được tải về từ 
 CityDB/fileadmin 
/-mydata/, chưa đi sâu vào phân tích quy trình 
xây dựng mô hình và ứng dụng sản phẩm tạo ra. 
Như vậy, có thể thấy rằng, vấn đề  ... t bộ công cụ mã nguồn mở có 
chức năng lưu trữ, biểu diễn và quản lý mô hình 
3D thành phố ảo trên CSDL quan hệ 
(https://www.3D CityDB.org). Một trong những 
tính năng chính của 3D CityDB là khả năng xuất dữ 
liệu 3D ra nhiều định dạng khác nhau có thể biểu 
diễn trên Web như KML/COLLADA, JSON, GlTF. 
Hơn nữa, 3D CityDB hoạt động dựa trên CSDL 
PostGIS, phần mở rộng của Hệ quản trị CSDL mã 
nguồn mở Postgres. Điều này cho phép quản lý, 
truy cập, hiển thị dữ liệu trên web bằng các dịch 
vụ web theo chuẩn của OGC (Prandi et al., 2015). 
Để chuyển đổi dữ liệu 3D, dữ liệu 3D theo
Hình 2. Quy trình thực nghiệm. 
 Lã Phú Hiến/Tạp chí Khoa học Kỹ thuật Mỏ - Địa chất 60 (2), 77 - 87 81 
chuẩn CityGML được nhập vào CSDL PostGIS bằng 
công cụ 3D CityDB - Importer Exporter. Tiếp theo 
công cụ này cũng được sử dụng để chuyển dữ liệu 
từ CSDL sang định dạng JSON. Dữ liệu thuộc tính 
bao gồm: 1. Tên tòa nhà; 2. Chức năng; 3. Địa chỉ; 
4. Năm xây dựng; 5. Số tầng, cũng được xuất ra tệp 
excel bằng công cụ này. Ở bước cuối cùng, 3D Web 
client trong gói 3D CityDB được sử dụng để biểu 
diễn dữ liệu 3D trên web. Các tệp HTML, 
JavaScript, CSS có sẵn được chỉnh sửa để phù hợp 
với mục đích của đề tài. 
4. Kết quả thực nghiệm 
Kết quả thu được sau khi xử lý ảnh UAV là ảnh trực 
giao và DSM có độ phân giải 5cm được minh họa 
như trong Hình 3. Dữ liệu này được sử dụng để 
dựng mô hình 3D bằng GG - SU. Kết quả là mô hình 
3D khu A - HUMG ở LoD2 như minh họa trong 
Hình 4 (mô hình 3D nhà A). 
Tuy nhiên, do một số mặt bị che khuất bởi nhà 
cao tầng hoặc ảnh chụp không bao phủ hết nên chỉ 
có nhà A (xem Hình 4), B, C, và KTX Lào là đủ 
texture các mặt, HT300 bị thiếu một mặt, KTX - A 
thiếu 3 mặt bên, còn các tòa nhà khác chỉ có ảnh 
texture của nóc nhà. Mô hình 3D sau đó được 
chuyển sang chuẩn CityGML bằng phần mềm Safe 
Software FME, được minh họa trên Hình 5. 
Hình 3. Ảnh trực giao (a) và DSM (b) thu được sau khi xử lý ảnh UAV 
Hình 4. Mô hình 3D nhà A - Khu A - HUMG ở LoD 2. 
82 Lã Phú Hiến/Tạp chí Khoa học Kỹ thuật Mỏ - Địa chất 60 (2), 77 - 87 
Mô hình 3D CityGML được chuyển sang định 
dạng JSON bằng công cụ 3D CityDB - Importer 
Exporter. Sau đó, trang web mô hình hóa 3D 
khuôn viên Khu A - HUMG được xây dựng bằng 
cách tùy chỉnh 3D Web Client có sẵn trong gói 3D 
CityDB. Khi truy cập trang web bằng máy tính 
(Hình 6a) và bằng điện thoại thông minh (Hình 
6b) có giao diện toàn giống nhau, gồm: 1. Khu vực 
hiển thị dữ liệu không gian; 2. Hộp công cụ; 3. Hộp 
quản lý bản đồ nền và tìm kiếm theo địa danh; 4. 
Bảng thuộc tính; 5. Phần còn lại là một số công cụ 
như thước tỷ lệ, công cụ mô phỏng thời gian,... Các 
tính năng chính của trang web bao gồm: 1. Biểu 
diễn trực quan khuôn viên Khu A - HUMG ở chế độ 
2D và 3D trên các loại bản đồ nền khác nhau; 2. 
Xem thông tin thuộc tính của các công trình; 3. 
Quản lý các lớp dữ liệu; 4. Thêm lớp dữ liệu mới; 
5. Mô phỏng bóng đổ công trình theo thời gian; 6. 
Chụp cảnh và chia sẻ khung nhìn hiện tại. Để thử 
nghiệm thực tế, nội dung trang web đã được tải 
lên một dịch vụ lưu trữ dữ liệu trực tuyến miễn 
phí. Tuy nhiên, vì là dịch vụ miễn phí nên dung 
lượng được tải lên bị giới hạn và tốc độ truy cập 
thấp. Địa chỉ truy cập trang web  3d 
humg.tk/. 
Trang web cho phép hiển thị mô hình 3D trên 
một trong ba loại bản đồ nền là 1. Bing aerial 
image with Label, 2. Bing aerial image, và 3. Open 
Street Map thông qua tùy chọn trên thanh công cụ. 
Ngoài ra trang web cho phép hiển thị ở chế độ 2D, 
và tìm kiếm theo địa danh tương tự như trên 
Google map. Hình minh họa mô hình 3D Khu A - 
HUMG ở LoD2 trên bản đồ nền là ảnh Bing aerial 
image with Label. Có thể thấy rằng, khuôn viên 
Khu A - HUMG chế độ 3D được thể hiện rất trực 
quan và rõ ràng. 
Một trong những tính năng quan trọng của 
trang web là cho phép thêm lớp dữ liệu mới. Các 
nhà thiết kế/quy hoạch đô thị có thể xây dựng mô 
hình 3D dự án trên máy tính cá nhân sau đó tải
Hình 5. Mô hình 3D Khuôn viên Khu A HUMG - LoD2 ở định dạng CityGML. 
 Lã Phú Hiến/Tạp chí Khoa học Kỹ thuật Mỏ - Địa chất 60 (2), 77 - 87 83 
dữ liệu lên một máy chủ web, thiết đặt lớp dữ liệu 
mới với đường dẫn của dữ liệu đã tải lên là có thể 
hiển thị dữ liệu ngay trên trang web. Điều này cho 
phép người dùng dễ dàng thay đổi các phương án 
quy hoạch và đánh giá nó một cách trực quan hơn. 
Hình 7 minh họa phương án xây dựng thêm một 
tòa nhà trong khuôn viên khu A - HUMG mới được 
thêm vào. Bên cạnh khả năng hiển thị trực quan 
thông tin không gian 3D, trang web còn hiển thị 
thông tin thuộc tính của mô hình như trong Hình 
6a. Các thông tin thuộc tính này có thể chỉnh sửa 
ngay trên bảng thuộc tính đã được tải lên dịch vụ 
Google Fusion table (https://fusiontables.google. 
com/). Như vậy, một bản quy hoạch được thể hiện 
ở chế độ 3D trong bối cảnh khu vực xung quanh 
nó cùng với thông tin chi tiết về quy hoạch được 
trình bày dưới dạng thông tin thuộc tính sẽ giúp 
người xem dễ hiểu hơn, cho phép tăng tính 
Hình 6. Giao diện trang web: trên máy tính (a) và trên điện thoại thông minh (b). 
Hình 7. Thêm lớp dữ liệu mới minh họa bản quy hoạch 
(a) (b) 
84 Lã Phú Hiến/Tạp chí Khoa học Kỹ thuật Mỏ - Địa chất 60 (2), 77 - 87 
minh bạch của bản quy hoạch, qua đó giúp tăng 
khả năng thuyết phục chấp nhận dự án. 
Trang web cũng cho phép mô phỏng bóng đổ 
của đối tượng theo thời gian bất kỳ trong ngày, 
thời gian có thể được thay đổi thông qua công cụ 
mô phỏng thời gian (xem Hình 8). Việc phân tích 
bóng đổ thời gian thực này có thể cung cấp cho các 
nhà hoạch định cũng như công chúng cái nhìn sâu 
sắc về các tác động của công trình đối với việc thu 
thập năng lượng mặt trời và giờ được chiếu sáng 
của khu vực. 
Ngoài ra, trang web cũng cho phép ẩn mô 
hình của một đối tượng nào đó (nút lệnh Ẩn đối 
tượng) hoặc hiện lại đối tượng đang bị ẩn (nút 
lệnh Hiện đối tượng ẩn). Hình 9 minh họa hình 
ảnh khuôn viên Khu A - HUMG khi không có nhà C 
(đã bị ẩn). Tính năng này có thể hỗ trợ cho công 
tác quy hoạch và thiết kế cảnh quan, giúp các nhà 
thiết kế đánh giá được sự thay đổi cảnh quan khi 
có thêm hoặc phá bỏ một công trình nào đó, ngoài 
ra nó cũng giúp công tác thuyết trình dự án sinh 
động và minh bạch hơn. 
Bên cạnh đó, để chia sẻ thông tin dễ dàng, 
trang web cho phép tạo đường dẫn khung nhìn 
hiện thời, đường dẫn này có thể cung cấp cho 
người dùng khác xem cảnh hiện tại mà không cần 
mất thời gian tìm cảnh cần xem. Bên cạnh đó, 
trang web còn cung cấp thêm tính năng “Chụp ảnh
 màn hình” và “In màn hình”. Người dùng có thể 
lưu lại ảnh chụp vào máy tính hoặc in luôn ra giấy. 
Những tính năng này giúp tăng sự tiện lợi cho 
người dùng khi muốn lưu trữ cảnh trên màn hình 
để làm báo cáo hoặc chia sẻ thông tin. Như vậy, khi 
nhà quản lý muốn công bố thông tin quy hoạch của 
một dự án tới công chúng, thay vì phải tổ chức họp 
và giới thiệu qua các bản vẽ hoặc mô hình vật lý, 
người quản lý chỉ cần lấy đường dẫn thể hiện 
khung cảnh có dự án và gửi tới công chúng. Công 
chúng chỉ cần sử dụng máy tính hoặc điện thoại 
kết nối internet bấm vào đường dẫn là có thể thấy 
rõ những gì sẽ được xây dựng và đánh giá sơ bộ 
ảnh hưởng của nó. 
Có thể thấy rằng, trang web hiện tại chưa có 
khả năng phân tích không gian và các công cụ đồ 
họa độc lập. Do đó, với những tính năng hiện có, 
trang web có thể hỗ trợ cho công tác quy hoạch ở 
khía cạnh công bố, trình bày thông tin quy hoạch, 
hoặc bổ sung thêm quy hoạch đã được thiết kế sẵn 
từ trước, chưa thể hoàn toàn thay thế cho phương 
pháp thiết kế quy hoạch truyền thống trên các bản 
vẽ 2D. 
5. Kết luận 
Bài báo này đã thử nghiệm thành công giải 
pháp sử dụng công nghệ mã nguồn mở xây dựng 
Hình 8. Bóng đổ của các công trình ở thời điểm 15h34 ngày 22/02/2019. 
 Lã Phú Hiến/Tạp chí Khoa học Kỹ thuật Mỏ - Địa chất 60 (2), 77 - 87 85 
ứng dụng 3D - WebGIS biểu diễn trực quan mô 
hình 3D thành phố với một số tính năng tương tác 
giúp ích cho công tác công bố thông tin quy hoạch 
đô thị. Trang web thử nghiệm cho thấy khả năng 
thể hiện trực quan mô hình 3D rất tốt, mô hình 3D 
ở LoD2 được hiển thị rõ ràng, với thông tin thuộc 
tính và ảnh texture đầy đủ như khi thiết kế. Ngoài 
ra, để hỗ trợ công tác quy hoạch, trang web cho 
phép người dùng thêm lớp dữ liệu mới, mô phỏng 
bóng đổ, chụp cảnh, tạo đường dẫn cảnh, ẩn hiện 
công trình bất kỳ trên mô hình. Trang web cho 
phép người dùng truy cập từ máy tính cá nhân 
hoặc thiết bị thông minh có kết nối internet. Điều 
này giúp loại bỏ thủ tục phức tạp mà người dùng 
phải thực hiện khi muốn truy cập dữ liệu, cho 
phép người dân và các bên liên quan tới quy hoạch 
truy cập dữ liệu bất cứ lúc nào và ở mọi nơi. Đồng 
thời, nó cho phép các bên liên quan tham gia vào 
quá trình quy hoạch đô thị dễ dàng, hiệu quả. 
Có thể thấy rằng bộ công cụ mã nguồn mở, 
đặc biệt là gói công cụ 3D CityDB cùng với thư viện 
Cesium JS có thể sử dụng hiệu quả trong công tác 
mô hình hóa 3D trên web hỗ trợ cho công tác quy 
hoạch đô thị. Nó không chỉ biểu diễn trực quan mô 
hình 3D mà còn có thể tùy biến các tính năng 
tương tác với người dùng và mô phỏng theo 
thời gian để phù hợp cho các mục đích sử dụng 
khác nhau. Tuy nhiên, trang web thử nghiệm 
trong nghiên cứu này mới là những thử nghiệm 
ban đầu, còn nhiều tính năng cần bổ sung để có thể 
hoàn thiện và ứng dụng hiệu quả hơn trong công 
tác quy hoạch, như cho phép người dùng gửi các 
phản hồi tới nhà quản lý ngay trên trang web, 
phân quyền đăng nhập để quản lý dữ liệu an toàn 
hơn, cũng như bổ sung thêm các tính năng mới 
dựa trên quyền của người dùng, đặc biệt là các 
chức năng đồ họa để các nhà quản lý có thể thiết 
kế phương án quy hoạch ngay trên trang web. 
Lời cảm ơn 
Nghiên cứu này được thực hiện dưới sự hỗ 
trợ của Đề tài nghiên cứu khoa học cấp cơ sở số 
T18-13, Trường Đại học Mỏ - Địa chất. 
Tài liệu tham khảo 
Bùi Ngọc Quý, 2008. Nghiên cứu ứng dụng 
ArcScene trong xây dựng cơ sở dữ liệu 3D GIS 
thành phố Lạng Sơn. Tạp chí Tài nguyên và Môi 
trường 9. 53 - 55. 
Bùi Ngọc Quý, Phạm Văn Hiệp, 2017. Nghiên cứu 
xây dựng mô hình 3D từ dữ liệu ảnh máy bay 
Hình 9. Ẩn nhà C trên mô hình 3D. 
86 Lã Phú Hiến/Tạp chí Khoa học Kỹ thuật Mỏ - Địa chất 60 (2), 77 - 87 
không người lái (UAV). Tạp chí Khoa học Kỹ 
thuật Mỏ - Địa chất 58(4). 201 - 211. 
Dambruch, J.; Krämer, M., 2014. Leveraging public 
participation in urban planning with 3D web 
technology. In Proceedings of the Nineteenth 
International ACM Conference on 3DWeb 
Technologies. 117 - 124. 
Đỗ Văn Dương, 2018. Nghiên cứu phương pháp 
nhận dạng tự động một số đối tượng và xây 
dựng cơ sở dữ liệu 3D bằng dữ liệu ảnh thu 
nhận từ thiết bị bay không người lái. Luận án 
tiến sĩ. Trường Đại học Mỏ - Địa chất. 
Engman, H., 2016. Web - based 3D in Urban 
Planning: Examples and Critical Success 
Factors. Gim International. Available online at 
https://www.giminternational.com/content/ 
- article/web - based - 3d - in - urban - planning. 
Haje, N.E., Jessel, J. - P., Gaildrat, V., Sanza, C., 2016. 
3D Cities Rendering and Visualisation: A Web - 
Based Solution. UDMV’ 16 : Proceedings of the 
Eurographics Workshop on Urban Data 
Modelling and Visualisation. 95 - 100. 
Liba, N. and Berg - Jürgens J., 2015. Accuracy of 
Orthomosaic Generated by Different Methods 
in Example of UAV Platform MUST Q. IOP 
Conference Series: Materials Science and 
Engineering 96. 1 - 8. 
Mete, M.O., Guler, D., Yomralioglu, T., 2018. 
Development of 3D WebGIS application with 
open source library. EURASIAN GIS 2018 
Congress. 1 - 3. 
Nguyễn Thế Thận, 2008. Giải pháp xây dựng mô 
hình cảnh quan đô thị ảo 3D bằng phần mềm 
thông tin địa lý MapsiteGIS. Bộ xây dựng. 
Nguyễn Thị Thu Hà, 2016. Giải pháp trực quan hóa 
dữ liệu đô thị 3D theo chuẩn CityGML trên nền 
web. Luận văn thạc sĩ. Đại học Quốc gia Hà Nội 
- Trường Đại học Công nghệ. 
Open Geospatial Consortium Inc, 2018. OpenGIS 
City Geography Markup Language (CityGML) 
Encoding Standard. Available online: 
https://goo.gl/YqJ8tr (Accessed on 3 July 
2018). 
Prandi, F., Soave, M., Devigili, F., Andreolli, M., De 
Amicis, R., 2014. Services oriented Smart City 
Platform based on 3D City Model Visualization. 
ISPRS Annals of the Photogrammetry. Remote 
Sensing and Spatial Information Sciences II - 4, 
59 - 64. 
Yao, Z., Nagel, C., Kunde, F., Hudra, G., Willkomm 
P., Donaubauer A., Adolphi T. and Kolbe T.H., 
2018. 3D CityDB - a 3D geodatabase solution 
for the management, analysis, and 
visualization of semantic 3D city models based 
on CityGML. Open Geospatial Data, Software 
and Standards 3(5). 1 - 26. 
Zhou, G., Tan, Z., Cheng, P., and Chen, W., 2017. 
Modeling and Visualizing 3D Urban 
Environment via Internet for Urban Planning 
and Monitoring. ISPRS Commission II/6, 1 - 6..
 Lã Phú Hiến/Tạp chí Khoa học Kỹ thuật Mỏ - Địa chất 60 (2), 77 - 87 87 
ABSTRACT 
Web - based visualization of 3D city model using open scource tools 
for urban planning 
Hien Phu La 
Faculty of Water Resources Engineering, Thuyloi University, Vietnam 
This article attempted to generate a website for visualizing 3D model of Hanoi University of Mining 
and Geology (HUMG) at the level of detail 2 (LoD2) using open source tool 3D CityDB and CesiumJS 
library. The 3D models were generated based on UAV - derived images, then they were converted to JSON 
format by using 3D CityDB - Importer Exporter tool and visualise in a website by modifying 3dwebclient 
available in 3D CityDB package. The experimental results show that the HUMG - 3D model is displayed 
visually, besides this toolkit also provides the site with some interactive features and data query such as: 
adding new data layer, finding a building by ID, simulating the shadow of the building, hide/show a 
selected building, etc. These are features can improve the effectiveness of urban planning.