5.1.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 JavaSript và HTML xây dựng màn hình chính
gồm các Form (biểu mẫu), Panel (các dạng bảng), GridPanel (lưới điện chứa dữ liệu), Chart (các dạng đồ thị)…
Màn hình bắt mắt với các Panel linh hoạt có khả năng đóng mở…
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 Mapinfo: Bản đồ hành chính tỉnh Bình Phước.
Bản đồ giao thông.
Bản đồ ví trí các khu công nghiệp.
Chỉnh lại tọa độ các lớp bản đồ sao cho phù hợp theo EPSG.
Tích hợp các bản đồ nền trực tuyến: Google Map, Yahoo Map.
Xây dựng các thanh công cụ: phóng to, thu nhỏ, di chuyển, thước tỉ lệ…
Bước 3: Xây dựng kết nối tới GoogleEarth API
Thiết lập kết nối tới GoogleEarth thông qua GoogleEarth plug-in. Xây dựng các Form tùy chỉnh bản đồ GoogleEarth sử dụng hàm API
Tìm kiếm vị trí trên bản đồ GoogleEarth.
Lưu trữ và upload bản đồ dạng KML/KMZ.
Các lớp bản đồ GoogleEarth: ranh giới, giao thông, công trình, địa hình.
Download bản đồ được lưu trữ trên Server.
Bước 4: Kết nối với cơ sở dữ liệu trong PostgreSQL
Thiết lập kết nối với PostgreSQL thông qua cổng JDBC bằng Java. Tạo kết nối lấy cơ sở dữ liệu từ trong PostgreSQL đưa lên web bằng JSP.
Bước 5: Lập trình truy vấn thông tin
- 69 -
Sử dụng ngôn ngữ JavaSript xử lí các GridPanel, Form thực hiện truy vấn lọc thông tin dữ liệu, vẽ đồ thị, xuất báo cáo, in ấn kết quả, download dữ liệu… bằng công nghệ AJAX.
5.1.2. Giao diện và chức năng cơ bản trên màn hình chính
Cho phép người truy cập thao với dữ liệu bằng hình ảnh, màn hình gồm có ba khu vực chính như hình dưới:
HÌNH 12
Hình 5.1 Giao diện màn hình chính của trang web
Khu vực (1): Là banner (thanh tiêu đề) của trang web.
Khu vực (2): Là một TabPanel chứa các lớp bản đồ đang được hiện thị trên bản đồ chính và các lớp được lưu trữ trên Server.
Khu vực (3): Là phần màn hình bản đồ chính, chứa lớp bản đồ đang được hiện hành cùng với một số công cụ cơ bản hỗ trợ các thao tác bản đồ.
5.2. Chức năng chính trên trang Hình 5.2 Hình 5.2 Chức năng Xem Thông Tính toán và xử - 70 -
ng chính trên trang web
H 13HÌN
Hình 5.2 Các chức năng chính trên trang Web Bản Đồ
Thêm, xóa, chồng lớp bản đồ Đo độ dài, tính diệ
tích
Download và Upload bản đồ
Văn Bản
Xem thông tin tổng quan, văn bản luậ Download, in ấn tài liệu Xem Thông Tin Truy vấn tìm thông tin Vẽ biểu đồ theo thông tin tìm đượ
In ấn, download thông tin,xuất báo
cáo
Tính toán và xử lý số liệu
Phân tích vượt chuẩ
Tính tải lượng khí th
Dự báo tải lượng
Web ồng dài, tính diện Download và Upload
Xem thông tin tổng n luật ấn tài n tìm thông theo được n, download ất báo t chuẩn ng khí thải ượng
- 71 -
5.2.1. Các chức năng đối với bản đồ 2D
5.2.1.1. Chức năng xem, thêm, xóa lớp bản đồ
Người truy cập có thể bật tắt các lớp bản đồ muốn xem trên màn hình bản đồ bằng cách đánh dấu vào các ô trống ở Panel “Lớp hiện hành”. Ở đây có 2 lớp bản đồ là bản đồ nền (Base Layer) chỉ cho phép chọn một lớp duy nhất, lớp chồng bản đồ (Overlays) có thể chọn được nhiều lớp cùng một lúc,các lớp này sẽ tự động chồng xếp lên nhau theo thứ tự từ trên xuống dưới (người truy cập có thể thay đổi vị trí các lớp bằng cách nhấn giữ một lớp bản đồ rồi kéo thả bên trên hoặc bên dưới lớp muốn thay đổi vị trí).
Người truy cập có thể thêm lớp bản đồ vào màn hình bản đồ chính bằng cách chọn một lớp bản đồ có trong Panel “Lớp lưu trữ’ sau đó nhấn vào nút “Thêm vào bản đồ”, ngay lập tức lớp bản đồ mới được chọn sẽ được hiện lên màn hình bản đồ chính, đồng thời trên Panel “Lớp hiện hành” sẽ xuất hiện một dòng mới là lớp bản đồ vừa được chọn.
Hoặc xóa lớp bản đồ ở màn hình chính bằng cách chọn lớp bản đồ muốn xóa ở Panel “Lớp hiện hành’ rồi nhấn vào nút “Xóa khỏi bản đồ”. Ngay lập tức lớp bản đồ được chọn sẽ biến mất khỏi màn hình bản đồ chính.
HÌNH 14
- 72 -
5.2.1.2. Chức năng hỗ trợ các thao tác cơ bản trên bản đồ
Chọn vào TabPanel “Bản đồ 2D” màn hình sẽ hiện thị ra như hình sau:
HÌNH 15
Hình 5.4 Màn hình bản đồ 2D
Trên cùng là thanh Toolbar với các công cụ hỗ trợ bản đồ, người truy cập có
thể thực hiện các thao tác khi nhấn vào từng nút như sau:
Zoom Extent: phóng to toàn màn hình (đến độ phân giải lớn nhất của bản
đồ).
Zoom Layer: phóng đến lớp bản đồ đang hiện hành.
Pan: nút di chuyển bản đồ.
Point, Polyline, Polygon: 3 công cụ để vẽ các đối tượng vector cơ bản như điểm, đường và vùng.
Select: chọn đối tượng vector vừa được vẽ. Measure: đo khoảng cách (đơn vị: km).
Area: tính diện tích (đơn vị: km2).
Previous/Next: quay về (tiến tới) màn hình trước (sau).
PrintPreview: xem trước màn hình chuẩn bị in.
Print: cho phép in lại màn hình bản đồ đang hiện hành. Menu: menu tổng hợp các công cụ trên.
- 73 -
Bên trái là thanh phóng to, thu nhỏ: người dùng nhấn chuột lên thanh trượt, kéo lên hay xuống để thanh thay đổi mức phóng to thu nhỏ. Nhấn vào 4 nút lên, xuống, qua trái, qua phải để thực hiện di chuyển bản đồ (hoặc nhấn 4 phím up, down, left, right trên bàn phím).
Bên phải gồm:
Bảng bật tắt lớp: giúp người xem bật tắt những lớp bản đồ khác nhau theo ý của mình. Lớp bản đồ gồm 2 loại: lớp nền và lớp chồng bản đồ. Lớp nền (Base Layer) chỉ được chọn một lớp hiển thị duy nhất. Lớp bản đồ (Overlays) có thể hiện thị nhiều lớp bản đồ chồng lên nhau, người dùng chọn các lớp muốn xem bằng cách nhấn chuột vào ô trống, màn hình sẽ vẽ lại các lớp bản đồ mới mà người dùng vừa chọn.
Bản đồ nhỏ: giúp người dùng quan sát một cách tổng quát khu vực bản đồ mình đang di chuyển đến. Người dùng có thể drag chuột trên bản đồ này để di chuyển bản đồ trên màn hình chính.
Bên dưới là thanh tỉ lệ bản đồ: Người dùng khi nhấn vào dấu mũi tên, combobox sẽ hiện ra những tùy chọn tỉ lệ bản đồ cho người dùng lựa chọn để có thể xem tỉ lệ bàn đồ theo ý của mình.
5.2.2. Các chức năng đối với bản đồ 3D 5.2.2.1. Giao diện màn hình bản đồ 3D 5.2.2.1. Giao diện màn hình bản đồ 3D
Đây là một công nghệ mới và nổi bật nhất của website này, trang web có giao diện màn hình như phần mềm GoogleEarth destop quen thuộc, với những chức năng vô cùng hữu ích và dễ dàng sử dụng như phần mềm GoogleEarth.
- 74 -
HÌNH 16
Hình 5.5 Màn hình bản đồ 3D
Có thể thấy giao diện màn hình GoogleEarth quen thuộc được hiện ra không khác gì so với phần mềm trên destop, màn hình bản đồ gồm những phần chính như:
Bên trên là thước chỉnh thời gian: Cho phép người dùng hiệu chỉnh thời gian hiện hành của bản đồ, và đây cũng chính là thướt chỉnh thời gian chiếu sáng của mặt trời. Để thay đổi thời gian người truy cập chỉ cần nhấn vào thanh trượt kéo qua trái để giảm thời gian và kéo qua phải để tăng thời gian ngay lập tức mặt trời sẽ thay đổi vị trí chiếu sáng trên bản đồ.
HÌNH 17
Hình 5.6 Thước chỉnh thời gian trên bản đồ GoogleEarth
Bên phải là thước Zoom và di chuyển bản đồ với chức năng như bản đồ 2D đã được giới thiệu ở phần trên.
Ở giữa là phần bản đồ chính, thay vì là bản đồ phẳng bình thường thì ở đây bản đồ được thể hiện là quả địa cầu, mô phỏng lại trái đất.Với dạng khối cầu như thế, người truy cập có thể dễ dàng quay bản đồ theo ý mình để đi đến những châu
- 75 -
lục khác nhau với tốc độ rất nhanh và mượt mà, không bị tình trạng dựt hình như ở bản đồ 2D.
5.2.2.2. Các chức năng chính
Khi người truy cập chuyển qua TabPanel “Bản đồ 3D” thì ngay lập tức TabPanel lưu trữ bản đồ sẽ hiện ra như hình:
Hình 5.7 Các chức năng chính của bản đồ GoogleEarth
5.2.2.3. Chức năng tìm kiếm
Khi nhấn vào thẻ “Tìm Kiếm” màn hình sẽ hiển thị như sau:
HÌNH 19
Hình 5.8 Màn hình khi chọn thẻ “Tìm Kiếm”
Nhập tên địa danh muốn tìm kiếm vào textbox, ví dụ ở đây là Bình Phước, sau đó nhấn vào nút tìm kiếm ngay lập tức, màn hình bản đồ sẽ bay tới vị trí cần tìm.
- 76 -
HÌNH 20
Hình 5.9 Màn hình kết quả sau khi thực hiện chức năng tìm kiếm
Muốn biết thêm thông tin chi tiết của từng vùng, người truy cập chỉ cần nhấn chuột trái lên bất kì vùng nào muốn xem, một cửa sổ màu trắng sẽ xuất hiện kèm theo bên trong là thông tin về vùng đó được lấy từ trong cơ sở dữ liệu.
5.2.2.4. Chức năng lưu trữ và upload dữ liệu dạng KML/KMZ
Khi nhấn vào thẻ “Dữ liệu KML” màn hình sẽ hiển thị như sau:
HÌNH 21
- 77 -
Mục này gồm cây thư mục chứa các lớp bản đồ đã được lưu trữ sẵn trên Server, khi cần thiết người truy cập có thể upload dữ liệu bản đồ của riêng mình lên trang Web bằng cách dẫn đường dẫn tới file bản đồ có trong máy tính của mình, hoặc có thể từ một địa chỉ web dạng http://localhost:9090/geoserver/ tailuongkhithaitugiaothong.kml.
Ví dụ ở đây đường dẫn tới file ./tailuongkhithaitugiaothong.kml, sau đó nhấn vào nút ngay lập tức trên cây lưu trữ sẽ xuất hiện thư mục chứa dữ liệu bản đồ vừa mới upload lên, đồng thời trên bản đồ sẽ hiện lớp bản đồ mới này.
HÌNH 22
Hình 5.11 Màn hình kết quả sau khi upload bản đồ dạng KML/KMZ Để xem rõ thông tin chi tiết về thành phần lớp bản đồ mới up lên người truy cập chỉ cần nhấn chuột trái vào phần lớp bản đồ muốn xem, một cửa sổ trắng sẽ xuất hiện chứa thông tin chi tiết bên trong.
5.2.2.5. Chức năng hiển thị các lớp bản đồ của GoogleEarth
- 78 -
HÌNH 23
Hình 5.12 Màn hình khi chọn thẻ “Lớp hiện hành”
Mục này gồm những lớp bản đồ chính của bản đồ GoogleEarth:
Ranh Giới & Địa Danh: cho phép bật tắt ranh giới hành chính và tên của các
địa danh được xây dựng sẵn trên bản đồ GoogleEarth.
Giao thông: cho phép bật tắt mạng lưới giao thông được xây dựng sẵn trên bản đồ GoogleEarth.
Công Trình & Nhà Ở: cho phép bật tắt lớp chứa công trình và nhà ở được
xây dựng sẵn trên bản đồ GoogleEarth.
Địa hình 3D: đây là nút cho phép hiển thị bản đồ dạng 3D, khi tắt chức năng
này bản đồ sẽ trở về dạng phẳng như phần bản đồ 2D đã được nêu ở phần trước.
5.2.2.6. Chức năng tùy chọn bản đồ
HÌNH 2 4
Hình 5.13 Màn hình khi chọn thẻ “Tùy Chọn Bản Đồ”
Mục này cung cấp một số chức năng cho phép người truy cập thay đổi các tùy
- 79 -
• Thước tọa độ: khi đánh dấu vào mục này thanh hiển thị tọa độ (x,y,z) và độ cao tầm nhìn sẽ xuất hiện ngay phía dưới, giúp người truy cập biết được vị trí con trỏ đang ở đâu.
HÌNH 25
Hình 5.14 Màn hình kết quả sau bật tất cả tùy chọn
• Lưới tọa độ: cho phép hiện lưới tọa độ trên bản đồ, tọa độ được qui định theo hệ qui chiếu EPSG:900913 của GoogleEarth.
• Bản độ phụ: nằm góc dưới bên trái, cho phép người truy cập có cái nhìn tổng quát về khu vực mình đang chọn.
• Thướt tỉ lệ: nằm ở góc dưới bên trái, hiện thỉ tỉ lệ của bản đồ đang chọn.
• Lớp khí quyển: thể hiện lớp khí quyển bao quanh quả địa cầu khi phóng nhỏ.
• Đơn vị (feet/mile): mặc định đơn vị bản đồ là m/km, khi chọn mục này, đơn vị của bản đồ sẽ chuyển thành feet/mile.
• Chức năng download bản đồ: Người truy cập có thể dễ dàng download những bản đồ đang được thể hiện trên bản đồ cùng những bản đồ được lưu trữ trên Server với nhiều định dạng khác nhau .jpg, .shp, .kml, .kmz…bằng cách nhấn chuột
vào biểu tượng ở th download về, người dùng ch Hình 5.15 5.2.3. Các chức năng đ 5.2.3.1. Giao diện màn hình qu Hình 5.16
Giao diện gồm 2 khu v
- 80 -
thẻ “Download Bản Đồ” trình duyệt web s i dùng chỉ việc chọn nơi lưu lại.
HÌNH 26
Hình 5.15 Màn hình khi chọn thẻ “Download Bản
ăng đối với văn bản
n màn hình quản lý văn bản
HÌNH 27
Hình 5.16 Màn hình giao diện quản lý văn bả
m 2 khu vực:
sẽ tự động bật cửa sổ
ản Đồ”
Khu vực 1: là cây th Server bao gồm những v luật…
Khu vực 2: là màn hình hi nhấn chuột vào danh sách v
5.2.3.2. Chức năng xem, download, in
Để lựa chọn văn b sách các văn bản có trong hiển thị bên Tab “Nội D kéo thanh trượt bên ph văn bản chứa hình ảnh hay b hơn bằng cách nhấn chu đồ ở độ phân giải cao h
người truy cập có thể xem chi ti Để tiện cho việc xem v cập có thể dễ dàng download v tượng ở góc trên bên ph đang xem về máy.
Ngoài ra người truy c
vào biểu tượng bên góc trên ph hiện, chọn máy in và nh
chọn.
- 81 -
là cây thư mục chứa danh sách các văn bả ng văn bản về thông tin các khu công nghiệ
là màn hình hiển thị nội dung của văn bản khi ng t vào danh sách văn bản muốn xem ở khu vực 1.
ng xem, download, in ấn văn bản
ăn bản muốn xem người truy cập chỉ việc nh n có trong danh mục bên trái, ngay lập tức nội dung v
ội Dung” bên phải. Nếu văn bản quá dài ng
bên phải lên xuống để xem theo ý của mình. Ngoài ra trong nh ảnh hay bản đồ người truy cập có thể xem ảnh
ấn chuột vào bản đồ hay hình đó, một cửa sổ m i cao hơn, cho phép phóng to, thu nhỏ và di chuy
ể xem chi tiết hơn.
ệc xem văn bản ở những máy khác không có dàng download văn bản đang xem bằng cách nh
góc trên bên phải màn hình, trình duyệt sẽ tự động download v ời truy cập có thể in nhanh văn bản đang xem b
bên góc trên phải màn hình, hộp thoại tùy ch n máy in và nhấn Print, văn bản đang xem sẽ được in ra t
ản được lưu trữ trên ệp, các văn bản pháp n khi người truy cập
ệc nhấn chuột vào danh ội dung văn bản sẽ được n quá dài người truy cập chỉ cần . Ngoài ra trong những xem ảnh ở độ phân giải cao ổ mới hiện ra chứa bản và di chuyển bản đồ để ng máy khác không có Internet người truy nhấn chuột vào biểu ộng download văn bản ang xem bằng cách nhấn ại tùy chọn máy in xuất c in ra từ máy in vừa lựa
- 82 -
HÌNH 28
Hình 5.17 Hộp thoại tùy chọn máy in
5.2.4. Các chức năng quản lí thông tin dữ liệu 5.2.4.1. Màn hình quản lí thông tin dữ liệu 5.2.4.1. Màn hình quản lí thông tin dữ liệu
Hình 5.18 Giao diện màn hình quản lí thông tin dữ liệu Giao diện gồm 3 khu vực:
- 83 -