3.3.1. Công nghệ Mapserver
MapServer là phần mềm mã nguồn mở cho phép tạo các bản đồ động và trình bày dữ liệu không gian trên Web. Đây là sản phẩm của trường Đại học Tổng hợp Minnesota (Mỹ) trong dự án kết hợp giữa NASA và Sở Tài nguyên bang Minnesota.
MapServer có các đặc điểm sau:
- Hỗ trợ các dịch vụ WebGIS theo chuẩn OGC, bao gồm: WMS Server, WMS Client, WFS Server, WFS Client và WCS Server.
- Hỗ trợ các ngôn ngữ kịch bản phổ biến và môi trường phát triển như .NET, PHP, Perl, Python, Java, và Ruby.
- Hỗ trợ các hệ điều hành: Linux, Windows, MAC OS X, …
- Hỗ trợ nhiều định dạng dữ liệu raster và vector như: TIFF/GeoTIFF, GIF, PNG, JPEG, ESRI shapefile, PostGIS, ESRI ArcSDE, Oracle Spatial, MySQL, …
3.3.2. Công nghệ Google Map
Google Map là một dịch vụ công nghệ bản đồ trực tuyến trên web miễn phí được cung cấp bởi Google và hỗ trợ nhiều dịch vụ dựa vào bản đồ như Google Ride Finder và một số có thể dùng để nhúng vào các trang web của bên thứ ba thông qua Google Map API.
Google Map có các đặc điểm sau:
- Cung cấp nhiều loại bản đồ của Google như: bản đồ đường, ảnh vệ tinh, bản đồ địa hình, bản đồ 3D… với các chức năng chỉ đường đi, xem thông tin địa điểm, thông tin khu vực…
- Cung cấp thư viện lập trình Google Map API cho phép người sử dụng nhúng dịch vụ bản đồ của Google vào ứng dụng web của mình.
- Hỗ trợ phát triển trên các môi trường lập trình như JAVA, .NET
- Hỗ trợ các định dạng dữ liệu raster, KML, KMZ.
- Mã nguồn mở tuy nhiên sử dụng API key do Google cung cấp. Một API key cho phép người sử dụng kiểm soát các ứng dụng của mình và cũng là cách Google có thể liên lạc với người sử dụng về ứng dụng có ích mà họ đang xây dựng.
18
3.3.3. Công nghệ Geoserver
- Geoserver là một máy chủ mã nguồn mở được viết bằng ngôn ngữ Java, với mục đích kết nối những thông tin địa lý có sẵn tới các WebGIS sử dụng chuẩn mở OGC. Geoserver được bắt đầu bởi một tổ chức phi lợi nhuận có tên The Open Planning Project (TOPP), nhằm mục đích hỗ trợ việc xử lý thông tin không gian địa lý với chất lượng cao, đơn giản trong sử dụng, là phần mềm mã nguồn mở nhằm cung cấp và chia sẻ dữ liệu.
- Geoserver cho phép người sử dụng chia sẻ và chỉnh sửa dữ liệu không gian (geospatial data), tạo kiểu hiển thị (style) cho các lớp bản đồ (layer).
- Là một dự án mang tính cộng đồng, Geoserver được phát triển, thử nghiệm và hỗ trợ bởi nhiều nhóm đối tượng và tổ chức khác nhau trên toàn thế giới. Geoserver được xây dựng theo chuẩn Open Geospatial Consortium (OGC), hỗ trợ đầy đủ Web Map Service (WMS) và Web Feature Service (WFS). GeoServer là thành phần nền tảng của WebGIS.
- Geoserver hỗ trợ nhiều định dạng dữ liệu vector và raster như: ESRI Shapefile, PostGIS, Web Feature Server, ArcGrid, GeoTIFF,…
19
- Geoserver hỗ trợ truy xuất dữ liệu từ PostGIS và quản lý dưới dạng các layer. Với vài thao tác đơn giản, người sử dụng có thể thêm các layer từ PostGIS, chỉnh sửa thông tin không gian, tùy chỉnh các kiểu hiển thị (style) cho từng layer và thể hiện lên trang web theo từng layer hoặc một nhóm các layer (layer groups).
20
21
Hình 3.7 Giao diện hiển thị và chỉnh sửa thông tin layer vừa thêm vào
22
Hình 3.9 Xem trước layer vừa tạo bằng công cụ Layer Preview
3.3.4. OpenLayers
OpenLayers là một thư viện thuần JavaScript hỗ trợ cho việc hiển thị dữ liệu bản đồ trên hầu hết các trình duyệt web mà không phụ thuộc vào phía server.
OpenLayers cài đặt một tập các hàm API JavaScript hỗ trợ việc xây dựng các ứng dụng bản đồ trên nền web, cũng tương tự như các hàm API của Google Maps và MSN Virtual Earth, nhưng với sự khác biệt quan trọng – OpenLayers là phần mềm mã nguồn mở, được phát triển bởi cộng đồng phần mềm mã nguồn mở. (adsbygoogle = window.adsbygoogle || []).push({});
Có hai khái niệm quan trọng cần được hiểu rõ khi làm việc với OpenLayers để xây dựng bản đồ đó là: “Map”, và “Layer”. “Map” là nơi để lưu giữ các thông tin về hệ quy chiếu, đơn vị,… của bản đồ. Bên trong bản đồ, dữ liệu được hiển thị thông qua các “Layer”. Một “Layer” là một lớp dữ liệu, nó cho biết OpenLayers nên yêu cầu và hiển thị dữ liệu như thế nào. Trong một “Map”có thể chứa một hoặc nhiều ‘Layer’ chồng lên nhau. Dữ liệu được hiện thị trong một ‘Layer’ có thể là dạng raster hoặc vector.
Đặc điểm nổi bật của thư viện OpenLayers: - Bộ thư viện mã nguồn mở.
23
- Hỗ trợ nhiều loại dịch vụ (WMS, WFS, WCS,…) và map server như ArcGIS server, Geoserver, Mapserver.
- Đọc được các bản đồ mở như: Google Map, OpenStreetMap,… - Hỗ trợ xây dựng các thao tác trên bản đồ.
3.3.5. ExtJS
ExtJS là một thư viện JavaScript Framework hỗ trợ xây dựng các ứng dụng web tương tác bằng cách sử dụng các kỹ thuật như Ajax, DHTMLvà JavaScript DOM. ExtJS cung cấp một bộ giao diện đầy đủ để sử dụng trong các ứng dụng web.
Một số tính năng của Ext JS:
- Phát hiện các trình duyệt và hệ điều hành được sử dụng bởi khách hàng. - Lấy dữ liệu từ DOM (Document Object ).
- Mã hóa và giải mã JSON.
- Mã hóa và giải mã dữ liệu URL.
- Xác định kiểu đối tượng và chuyển đổi giá trị. - Hỗ trợ giao diện trực quan.
Một số ưu điểm của ExtJS:
- Giao diệnthân thiện với người sử dụng. - Tài liệu hướng dẫn chi tiết.
- Có cộng đồng lớn tham gia học hỏi và hỗ trợ.
- Hỗ trợ trên nhiều trình duyệt: IE, Firefox, Chrome, Safari, Opera…
- Có thể tương tác với jQueryvà Prototype (2 thư viện Javascrip Framework tương tự ExtJS)
- Hỗ trợ tạo nhiều Widgets(các thành phần của website) như: Data grid, window, tree panel, combo boxes, forms, charts, calendar, google maps, themes...
3.3.6. GeoExt
GeoExt là một thư viện JavaScript cung cấp một nền tảng cho phép tạo ra các ứng dụng web bản đồ một cách phong phú. GeoExt kết hợp các thư viện OpenLayers và ExtJS. Ưu điểm của GeoExt:
24 - Được xây dựng dựa trên nền tảng ExtJS. - Tích hợp thư viện OpenLayers.
- Có khả năng tương tác với người dùng mà không cần Flash hay Silverlight. - Được thiết kế tốt và có khả năng mở rộng các thành phần.
- Cung cấp rất nhiều các công cụ tùy biến và xử lý dữ liệu (map panel, tree legend, layer tree, feature popup, toolbar…).
- Hỗ trợ công cụ in ấn bản đồ ra file PDF. - Hỗ trợ xây dựng và tùy biến các lớp bản đồ.
- GeoExt dựa trên thư viện ExtJS và OpenLayers nên việc lập trình tương đối dễ dàng do sử dụng những đoạn code rất đơn giản và ngắn gọn. Hình 3.3 cho thấy chỉ với một đoạn code đơn giản, một cửa sổ bản đồ được tạo ra với các chức năng cơ bản như di chuyển, phóng to, thu nhỏ bản đồ.
Hình 3.10 Tạo cửa sổ bản đồ đơn giản bằng GeoExt
Kết luận: Geoserver có những đặc điểm nổi trội so với Mapserver như: Geoserver có
giao diện đồ họa đẹp, việc cấu hình và kết nối đến CSDL PostgreSQL rất đơn giản, hỗ trợ chỉnh sửa layer trực tiếp trên web dựa vào WFS,… Các thư viện OpenLayers, GeoExt, ExtJS cũng cho thấy các ưu điểm nổi bật. Việc kết hợp các công cụ Geoserver, hệ quản trị CSDL PostgreSQL, thư viện OpenLayers, GeoExt, ExtJS sẽ tạo nên một nền tảng vững chắc để xây dựng WebGIS. Chính vì vậy các công nghệ trên được chọn để sử dụng trong đề tài.
25
3.4. Các nghiên cứu trong và ngoài nước (adsbygoogle = window.adsbygoogle || []).push({});
Trong nước
Tại Việt Nam, WebGIS mã nguồn mở cũng đang từng bước được nghiên cứu và ứng dụng rộng rãi hơn trong nhiều lĩnh vực: quản lý tài nguyên, môi trường, công nghiệp, thương mại và du lịch,… Nghiên cứu ứng dụng công nghệ WebGIS vào công tác quản lý môi trường đã được triển khai tại một số Viện, Trung tâm nghiên cứu và Trường Đại học lớn của Việt Nam. Một số đề tài đã thực hiện trong thời gian qua như:
- Xây dựng WebGIS phục vụ công nghiệp dựa trên công nghệ WebGIS của MapInfo MapXtreme kết hợp công nghệ xây dựng WebGIS theo chuẩn OpenSource (Nguyễn Văn Hiệp, 2009).
- Ứng dụng WebGIS quản lý tổng hợp và thống nhất số liệu quan trắc môi trường tỉnh Quảng Ngãi.
- Hệ thống WINSCAN (Web gIs eNvironmental information management Software for CAN tho) là một hệ thống thông tin môi trường để lưu trữ, quản lý và phân tích các thông tin môi trường ở thành phố Cần Thơ.
Dù mới chỉ là bước đầu nhưng nhiều kết quả nghiên cứu đã được đưa vào ứng dụng trong công tác quản lý môi trường góp phần nâng cao hiệu quả công tác quản lí nhà nước về môi trường. Với lợi ích mà nó mang lại thì WebGIS mã nguồn mở ở Việt Nam sẽ phát triển mạnh hơn, phục vụ hiệu quả hơn cho người quản lý cũng như người dùng.
Ngoài nước
Công nghệ WebGIS mã nguồn mở đã phát triển mạnh mẽ, mang lại ứng dụng rộng rãi trong nhiều lĩnh vực cho nhiều nước như: Tại Italy, năm 2002, M. A. Brovelli và D.Magni đã nghiên cứu xây dựng webGIS trên nền MapServer và PostGIS cung cấp các chức năng tương tác, truy vấn thông tin bản đồ phục vụ cho ngành khảo cổ, Puyam S.Singh, Dibyajyoti Chutia và Singuluri Sudhakar sử dụng PostgresSQL, PostGIS, PHP, Apache và MapServer phát triển một WebGIS mã nguồn mở hỗ trợ việc ra quyết định, chia sẻ thông tin về tài nguyên thiên nhiên ở Ấn Độ năm 2012.
26
Chương 4
KẾT QUẢ XÂY DỰNG TRANG WEBGIS 4.1. Thiết kế và xây dựng cơ sở dữ liệu
Dữ liệu không gian của KCN Loteco hay còn gọi là dữ liệu nền bản đồ được số hóa bằng phần mềm ArcGIS 9.3. Gồm có: dữ liệu về ranh giới của KCN Loteco, ranh giới các công ty và vị trí các ống khói thải.
Dữ liệu thuộc tính gồm các thông tin về khu công nghiệp, công ty, các thông số quan trắc, các bản đồ ô nhiễm được thu thập từ văn bản của ban quản lý các khu công nghiệp, các báo cáo của Sở Tài nguyên Môi trường tỉnh Đồng Nai được công bố công khai.
Các bảng dữ liệu chính được sử dụng:
Bảng 4.1 Các bảng dữ liệu được lưu trữ trong PostgreSQL
STT Tên bảng Ghi chú
1 congty Thông tin về công ty
2 ong_khoi Thông tin về ống khói
3 thongso_quantrac Các thông số quan trắc 4 ketqua_quantrac Kết quả quan trắc
Bảng 4.2 Bảng congty
Tên thuộc tính Kiểu giá trị Ghi chú
id_cty (PK) Integer Mã ID công ty (khóa chính) ten_cty Character (20) Tên công ty
ten_da Character (80) Tên dự án nganhnghe Character (80) Ngành nghề
27
quoc_gia Character (50) Quốc gia so_gp Character (50) Số giấy phép
ngay_thanhlap Date Ngày thành lập
von_dautu Integer Vốn đầu tư (USD)
dien_thoai Character (15) Điện thoại
lo Character (5) Thuộc lô
the_geom Geometry Mô tả dạng hình học (adsbygoogle = window.adsbygoogle || []).push({});
Bảng 4.3 Bảng ong_khoi
Tên thuộc tính Kiểu giá trị Ghi chú
id_ok (PK) Integer Mã ID ống khói (khóa chính)
id_cty (FK) Integer Mã ID công ty (khóa ngoại tham chiếu)
ten_ok Character (5) Tên ống khói, điểm lấy mẫu
cong_suat Numeric Công suất (tấn/h)
chieucao_ok Numeric Chiều cao ống khói (m) duongkinh_ok Numeric Đường kính ống khói (m)
the_geom Geometry Mô tả dạng hình học
Bảng 4.4 Bảng thongso_quantrac
Tên thuộc tính Kiểu giá trị Ghi chú
id_thongso (PK) Integer Mã ID thông số quan trắc
(khóa chính)
ten_thongso Character (10) Tên thông số
ghi_chu Text Ghi chú
28
Bảng 4.5 Bảng ketqua_quantrac
Tên thuộc tính Kiểu giá trị Ghi chú
ngay_do (PK) Date Ngày đo (khóa chính)
id_ok (PK, FK) Integer Mã ID ống khói (khóa chính, khóa ngoại tham chiếu)
id_thongso (PK, FK) Integer Mã ID thông số quan trắc (khóa chính, khóa ngoại tham chiếu)
29
30
4.2. Thiết kế trang WebGIS 4.2.1. Thiết kế chức năng 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: (adsbygoogle = window.adsbygoogle || []).push({});
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 đó. (adsbygoogle = window.adsbygoogle || []).push({});
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