4.2.1. Thiết kế chức năng
Hình 4.2 Sơ đồ thiết kế chức năng người dùng
31
4.2.2. Lập trình trang WebGIS 4.2.2.1. Các bước thực hiện chính 4.2.2.1. Các bước thực hiện chính
Bước 1: Xây dựng giao diện màn hình trang Web
Sử dụng ngôn ngữ lập trình JavaScript và HTML, phần mềm mã nguồn mở ExtJS xây dựng màn hình chính gồm các Panel (các bảng), GridPanel (lưới chứa dữ liệu), Chart (biểu đồ)…
Bước 2: Xây dựng các lớp dữ liệu bản đồ và thể hiện lên trang Web
Xây dựng các lớp bản đồ bằng phần mềm ArcGIS 9.3, gồm các lớp:
Bản đồ KCN Loteco (ranh giới các công ty).
Vị trí các ống khói xả thải.
Biên tập dữ liệu trên Geoserver, tạo style cho các lớp bản đồ. Đưa bản đồ lên trang web bằng GeoExt và OpenLayers.
Tích hợp các bản đồ nền trực tuyến: Google Street, Google Hybird…
Xây dựng các thanh công cụ: phóng to, thu nhỏ, di chuyển, thước tỉ lệ, tăng giảm độ mờ…
Bước 3: Kết nối với cơ sở dữ liệu trong PostgreSQL
Thiết lập kết nối với PostgreSQL bằng PHP.
Tạo kết nối lấy dữ liệu từ các bảng trong PostgreSQL và đưa lên web thông qua JSON và PHP.
Bước 4: Lập trình truy vấn thông tin
Dữ liệu truy vấn từ PostgreSQL được đưa vào các GridPanel thông qua ngôn ngữ JavaSript và PHP để thực hiện các chức năng lọc thông tin dữ liệu, vẽ biểu đồ, xuất báo cáo, in ấn kết quả, download dữ liệu…
32
4.2.2.2. Giao diện và các chức năng cơ bản của trang người dùng
Giao diện của trang người dùng được thiết kế thành nhiều tab (thẻ), bao gồm các tab:
Bản đồ KCN
Văn bản
Thông tin quan trắc
Tuyển dụng
Giao diện tab “Bản đồ KCN”:
Hình 4.4 Giao diện tab “Bản đồ KCN” Khu vực (1):Là khu vực tiêu đề (banner) của trang web
Khu vực (2): Là một panel chứa các thông tin: các lớp bản đồ hiện có (layer), chú thích bản đồ và thông tin cá nhân.
Khu vực (3): Là một panel chứa phần bản đồ chính, bao gồm bản đồ KCN và các nút điều khiển bản đồ cơ bản như:
: phóng to toàn màn hình.
Di chuyển: nút di chuyển bản đồ.
33
Previous / Next: quay về (tiến tới) màn hình trước (sau).
Đo khoảng cách: tính toán khoảng cách bất kỳ trên bản đồ do người dùng vẽ
(đơn vị: m hoặc km).
Đo diện tích: tính toán diện tích của một vùng người sử dụng vẽ (đơn vị m2)
Xem thông tin: xem thông tin của một đối tượng bằng cách click chuột vào đối
tượng đó.
34
Tìm kiếm công ty: Người sử dụng có thể nhập tên công ty và bấm nút “Tìm”,
trang web sẽ truy vấn theo tên công ty, trả về thông tin công ty và zoom đến công ty đó.
Hình 4.6 Tìm kiếm công ty (VD: công ty Suzuki)
Show/Hide Banner: nút checkbox điều khiển hiện hoặc ẩn thanh tiêu đề (banner).
35 Giao diện tab “Văn bản”:
Hình 4.7 Giao diện tab “Văn bản” Tab “Văn bản” gồm 2 khu vực:
Khu vực (1): Là cây thư mục (tree panel) chứa danh sách các văn bản hiện có của web, bao gồm các văn bản thông tin về Khu công nghiệp Loteco, Quy chuẩn Việt Nam về ô nhiễm không khí, các bản đồ ô nhiễm.
Khu vực (2): Là màn hình nội dung của văn bản khi người dùng chọn ở cây thư mục.
- Chức năng in ấn và download: Người sử dụng có thể dễ dàng in văn bản hoặc download văn bản về xem offline bằng cách nhấn vào nút để in và nút để download.
36 Giao diện tab “Thông tin ô nhiễm”:
Bao gồm 2 tab con là tab “Thông tin công ty” và tab “Thông tin quan trắc”:
Tab “Thông tin công ty”: Là một Grid Panel bao gồm toàn bộ thông tin của công ty được truy xuất từ cơ sở dữ liệu PostgreSQL, vì vậy khi thay đổi thông tin công ty từ cơ sở dữ liệu thì trang web sẽ tự động cập nhật theo. Danh sách công ty được tự động nhóm theo “Lô” của công ty đó hoặc người sử dụng có thể thay đổi nhóm tùy ý bằng cách chọn vào cột muốn nhóm và chọn dòng “Group By This Field”.
37
38
Tab “Thông tin quan trắc”: Là một Grid Panel bao gồm các thông tin quan trắc được lưu trữ trên PostgreSQL.
Các thông số về nồng độ khí quan trắc sẽ được tự động phân tích dựa trên QCVN và những thông số vượt quá tiêu chuẩn sẽ hiện màu đỏ kèm theo một ký hiệu cảnh báo . Đồng thời trang web còn tự động tính tổng các thông số quan trắc được.
39
Người sử dụng có thể tìm kiếm nâng cao bằng một bộ công cụ lọc dữ liệu bằng cách bấm chuột vào bên phải cột cần lọc và chọn filter.
40
Hình 4.12 Lọc dữ liệu dạng số (VD: Lọc theo nồng độ khí so2 > 300 µg/m3)
Ngoài ra người sử dụng có thể cùng lúc lọc dữ liệu kết hợp cả dạng chữ và dạng số và nhiều cột khác nhau. Khi muốn xóa lọc dữ liệu người sử dụng có thể click vào nút
Các thông số có thể được sắp xếp theo thứ tự tăng hoặc giảm bằng cách chọn Sort Ascending hoặc Sort Descending tương ứng.
41
Trang web còn cung cấp chức năng vẽ biểu đồ theo thông tin lọc được và hỗ trợ in biểu đồ bằng cách click vào nút để tạo biểu đồ và click để in. Biểu đồ được trình bày khá chi tiết và dễ dàng giúp người sử dụng theo dõi và đánh giá mức độ ô nhiễm một cách trực quan hơn.
42
Người sử dụng cũng có thể xuất toàn bộ bảng dữ liệu ra file .xls của phần mềm Excel bằng cách click vào nút
Hình 4.14 Giao diện xuất bảng dữ liệu ra Excel
Đối với người quản trị, khi muốn cập nhật thông tin quan trắc phải chuyển sang trang “Quản trị” bằng cách click vào nút
43 Giao diện tab “Tuyển dụng”:
- Bao gổm các thông tin tuyển dụng của các công ty trong KCN Loteco; các thông tin tuyển dụng được trình bày chi tiết, rõ ràng và được cập nhật liên tục giúp người sử dụng dễ dàng tra cứu.
44
4.2.2.3. Giao diện và các chức năng của trang quản trị
Chức năng “Đăng nhập”: Chức năng này dùng để đăng nhập vào trang cập nhật. Chỉ có người quản trị được cấp quyền mới được cho phép đăng nhập và cập nhật dữ liệu. Để đăng nhập, người quản trị cần phải điền chính xác tên đăng nhập và mật khẩu.
Hình 4.16 Giao diện trang “Đăng nhập”
45
Chức năng “Cập nhật dữ liệu quan trắc”: Sau khi đăng nhập thành công, trang web tự động chuyển sang trang “Cập nhật dữ liệu”. Người quản trị sẽ sử dụng chức năng này để cập nhật dữ liệu quan trắc không khí theo từng ống khói.
Hình 4.18 Giao diện trang cập nhật
- Khu vực (1): là một panel chứa danh sách các ống khói được lưu trữ trên PostgreSQL gồm các thông tin: STT, tên ống khói, tên công ty.
- Khu vực (2): là một panel chứa các thông tin chi tiết của ống khói. Khi click vào tên ống khói ở khu vực (1), thông tin ống khói sẽ được load ngay lập tức vào các text box ở khu vực (2) thông qua Ajax. Sau khi chỉnh sửa, người sử dụng click vào nút “Cập nhật” để lưu lại và hoàn tất việc chỉnh sửa.
46
Chương 5
KẾT LUẬN VÀ KIẾN NGHỊ
Đề tài bước đầu đã xây dựng được một hệ thống WebGIS bao gồm cơ sở dữ liệu địa lý của KCN Loteco và dữ liệu quan trắc không khí qua đó hỗ trợ việc quản lý dữ liệu và phục vụ nhu cầu tra cứu thông tin của người sử dụng, chủ yếu là người dùng phổ thông, những người không được đào tạo về GIS. Thông qua trang WebGIS, các thông tin KCN Loteco và thông tin ô nhiễm môi trường không khí được phổ biến rộng rãi đến cộng đồng, giúp nâng cao nhận thức của người dân về môi trường.
Trang WebGIS được xây dựng tích hợp các chức năng sau:
Hiển thị các lớp bản đồ, chú thích, các thao tác cơ bản trên bản đồ: di chuyển, thu phóng, đo đạc, xem thông tin đối tượng, tìm kiếm công ty…
Xem thông tin KCN Loteco, thông tin tuyển dụng.
Xem các văn bản pháp quy về ô nhiễm môi trường, in ấn và download.
Xem bản đồ ô nhiễm của KCN Loteco.
Truy vấn và tra cứu dữ liệu các công ty và dữ liệu quan trắc không khí.
Tìm kiếm, lọc, tính toán dữ liệu; hỗ trợ xuất dữ liệu ra Excel tiện lợi cho việc lưu trữ; phân tích các thành phần khí thải vượt tiêu chuẩn
Tạo và in biểu đồ.
Nhìn chung, giao diện trang web tương đối thân thiện và dễ sử dụng. Giao diện được thiết kế theo phong cách thiết kế web hiện đại, dùng CSS và Extjs để trang trí, trình bày giao diện. Do đó khả năng tùy biến giao diện là rất linh hoạt.
Kiến nghị
Về hướng phát triển trang web: trong thời gian tới hoàn thiện các chức năng của hệ thống, đồng thời bổ sung thêm các chức năng còn thiếu như: thêm, xóa các lớp bản đồ; cải tiến các công cụ trên web để trang web hoạt động nhanh hơn; nghiên cứu các chế độ bảo mật khi đưa website lên Internet; tích hợp thêm vài dịch vụ khác ví dụ như Google Earth…
47
TÀI LIỆU THAM KHẢO Tiếng Việt:
[1]. Cục thống kê tỉnh Đồng Nai. Niên giám thống kê 2012.
[2]. Hoàng Thị Hải Yến, 2006. Ứng dụng Công nghệ thông tin giám sát chất lượng
không khí khu công nghiệp Amata – Loteco, Đồng Nai. Luận văn tốt nghiệp, 110 trang.
[3]. Nguyễn Kim Lợi, 2009. Hệ thống thông tin địa lý - Phần mềm ArcView 3.3, Nhà
xuất bản Nông nghiệp, Thành phồ Hồ Chí Minh., 226 trang.
[4]. Nguyễn Thị Minh Hoài, 2010. Ứng dụng công nghệ WebGIS giám sát ô nhiễm
không khí cho khu công nghiệp tập trung – Áp dụng thử nghiệm cho KCN Lê Minh Xuân. Luận văn thạc sĩ Quản lý Môi trường, 126 trang.
[5]. Sở Tài nguyên và Môi Trường tỉnh Đồng Nai. Báo cáo giám sát chất lượng môi
trường KCN LOTECO năm 2012.
[6]. Trần Ngọc Chấn, 2000. Ô nhiễm môi trường không khí và xử lý khí thải. Tập 1, Nhà xuất bản Khoa học và Kỹ thuật, Hà Nội.,214 tr.
Tiếng Anh:
[7]. Antonio Santiago Perez, 2012. OpenLayers Cookbook. Packt Publishing Ltd, UK, 284 pages.
[8]. Erik Hazzard, 2011. OpenLayers 2.10 – Beginner ‘s Guide. Packt Publishing Ltd, UK, 351 pages.
[9]. Ewald Geschwinde and Hans-Juergen Schoening, 2002. PHP and PostgreSQL Advanced Web Programming, Sams Publishing., 778 pages.
[10]. Jesus Garcia, 2011. Ext JS in Action, Manning Publications Co. 180 Broad St, State 1323, Stamford, 498 pages.
[11]. Shea Frederick, Colin Ramsay and Nigel White, October 2010. Learning Ext JS 3.2, Packt Publishing Ltd, UK, 432 pages.
48
Website:
[12]. AA. Alesheikh, H. Helali and HA. Behroz.. “Web GIS: Technologies and Its Applications”, K.N. Toosi University of Technology, năm 2002.
URL: http://www.isprs.org/proceedings/XXXIV/part4/pdfpapers/422.pdf [13]. Geoserver Developer Manual, Geoserver User Manual.
URL: http://www.geoserver.org. [14]. GeoExt Documentation.
URL: http://www.geoext.org/docs.html
[15]. PostgreSQL Global Development Group, 2012. PostgreSQL 9.2.1 Documentation, The PostgreSQL Global Development Group.
URL: http://www.postgresql.org/.
[16]. PostGIS: Spatial and Geographic Objects for PostgreSQL. URL: http://postgis.refractions.net/