TÌM HIỂU SVG VÀ ỨNG DỤNG - 9

Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVGHình 4.7 Cây DOM quản lý qui trình bắt sự kiệnNgười dùng tương tác với thành phần này thông qua đoạn mã Javascript. Đoạn thực thi tương ứng cho mỗi sự kiện có thể được nhúng nội tuyến vào trong tập tin .svg, hoặc có thể được đặt trong một tập tin Javascript khác rồi tham chiếu đến tập tin Javascript này từ trong tập tin .svg. Vậy bằng cách thao tác với một điểm, một đường, hoặc một vùng, ta có...
Nội dung trích xuất từ tài liệu:
TÌM HIỂU SVG VÀ ỨNG DỤNG - 9Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG Hình 4.7 Cây DOM quản lý qui trình bắt sự kiện Người dùng tương tác với thành phần này thông qua đoạn mã Javascript. Đoạnthực thi tương ứng cho mỗi sự kiện có thể được nhúng nội tuyến vào trong tập tin.svg, hoặc có thể được đặt trong một tập tin Javascript khác rồi tham chiếu đến tậptin Javascript này từ trong tập tin .svg. Vậy bằng cách thao tác với một điểm, một đường, hoặc một vùng, ta có thểtruy vấn thông tin mà thành đó chứa. Trong trường hợp của ứng dụng bản đồ thì đólà thông tin về tọa độ, chiều dài, có bao nhiêu nhà trên đường đang tương tác. Khi có những thông tin này, người lập trình có thể tìm đường đi từ một đỉnhtới một đỉnh khác.4.8.1.3 Tìm đường đi từ giữa hai điểm Khi đã xác định được tọa độ hai điểm mà người dùng cần tìm đường đi giữachúng, client sẽ gửi câu lệnh yêu cầu server thực hiện việc tìm kiếm đường đi vớiđỉnh đầu và đỉnh cuối là hai điểm trên. Yêu cầu được server nhận thông qua một 160Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVGdịch vụ web (web service) chạy ở phía server. Sau khi việc tìm đường đã hoàn tất,server thông báo lại kết quả cho client cũng thông qua cùng một web trên. Client căn cứ vào kết quả trả về mà hiển thị thông tin trên bản đồ .svg. Thôngtin trả về là một tập các tọa độ kề nhau để đi từ điểm A đến điểm B, với A,B là haiđiểm đã được chọn để tìm kiếm đường đi.4.8.1.4 Vấn đề thay đổi tỉ lệ phóng to thu nhỏ Bộ hiển thị SVG đã hỗ trợ chức năng phóng to thu nhỏ. Người dùng có thểphóng to đến mức tùy ý mà luôn an tâm rằng ảnh không bị vỡ. (Ghi chú: Chức năng phóng to trong Adobe SVG Viewer là Ctrl+ kéo chuột) Một cách khác là sử dụng tính năng của server WFS. Khi cần phóng to vùngnào, người dùng chọn một đường bao ngoài của vùng đó. Server dữ liệu sẽ thựchiên chức năng truy vấn đến vùng đó, chỉ chọn những tọa độ nằm trong vùng mongmuốn. Ưu điểm của kiến trúc trên: − Các xử lý truy vấn dữ liệu được thực hiện ngay bên phía client, không cần phải chuyển về sever. − Tốc độ đáp ứng tương tác nhanh hơn so với việc chuyển toàn bộ hàm về server. Khuyết điểm của kiến trúc trên: − Do server nằm phân tán nên việc truy vấn dữ liệu mới từ server sẽ tốn thời gian truyền tải tập tin .svg trên mạng. − Kích thước tập tin .svg không được quá lớn vì nếu như thế sẽ làm cho thời gian truyền tải và thời gian hiển thị nội dung SVG gia tăng. 161Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG − Mỗi lần cần nội dung mới ở server giao diện thì phải chờ cho bộ hiển thị SVG xây dựng xong hình ảnh trong tập tin .svg được trả về. Khi đó người dùng phía client mới thấy được ảnh SVG.4.8.2 Mô tả chi tiết server Server gồm hai phần con là UIServer (viết tắt của User Interface Server, đượcgọi là server giao diện) và DataServer (server chuyên chứa dữ liệu). Trong kiến trúc ứng được trình bày ở hình phía trên, UIServer gồm hai phầnnhỏ nữa là “Bản đồ ASPX” và “Service tìm đường”. DataServer gồm hai phần conlà Geoserver và Microsoft SQL Server. Sau đây là mô tả cho từng phần con:4.8.2.1 Mô tả chi tiết “Bản đồ ASPX” Server con này nhận yêu cầu truy vấn tập tin .svg. Sau đó gửi yêu cầu nàyxuống cho Geoserver. Geoserver đóng vai trò là một server dữ liệu, chuyên cungcấp dữ liệu dạng .gml. Sau đó sever “Bản đồ ASPX” sẽ chuyển đổi dữ liệu này sangđịnh dạng .svg. Để viết được server con này, người phát triển phải hiểu cú pháp của GML vàSVG, chẳng hạn như chuyển một “LineString(10,10 14,234)” từ GML sang “line x1= 10, y1=10 x2=14 y2=234 stroke-width = 1” trong định dạng SVG. Client Câu lệnh yêu cầu tập tin .svg Server “Bản đồ ASPX” Tập tin .svg Hình 4.8. Mô tả chức năng server “Bản đồ ASPX” Geoserver 162Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG4.8.2.2 Mô tả “Service tìm đường” Chức năng của “Service tìm đường” là tìm đường đi giữa hai điểm được phíaclient yêu cầu. Server con này sẽ truy vấn trên cơ sở dữ liệu (CSDL) trongMicrosoft SQL Server để lấy thông tin cần thiết cho việc tìm đường. Mô tả chi tiếtcủa cấu trúc bảng trong SQL Server sẽ được mô tả ở mục 4.4.2.4 ...