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

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ơ SVG 160 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ạ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ó 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 đỉnh tớ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ữa chú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 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ơ SVG 161 dị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ông tin 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ùng nào, người dùng chọn một đường bao ngoài của vùng đó. Server dữ liệu sẽ thực hiên chức năng truy vấn đến vùng đó, chỉ chọn những tọa độ nằm trong vùng mong muố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. 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ơ SVG 162 − 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, được gọ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ần nhỏ nữa là “B ản đồ ASPX” và “Service tìm đường”. DataServer gồm hai phần con là 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ày xuống cho Geoserver. Geoserver đóng vai trò là một server dữ liệu, chuyên cung cấ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. Câu lệnh yêu cầu tập tin .svg Client Server Tập tin .svg “Bản đồ ASPX” Geoserver Hình 4.8. Mô tả chức năng server “Bản đồ ASPX” 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ơ SVG 163 4.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ía client yêu cầu. Server con này sẽ truy vấn trên cơ sở dữ liệu (CSDL) trong Microsoft SQL Server để lấy thông tin cần thiết cho việc tìm đường. Mô tả chi tiết của cấu trúc bảng trong SQL Server sẽ được mô tả ở mục 4.4.2.4 Hình 4.9. Mô tả server “Service tìm đường” 4.8.2.3 Mô tả Geoserver Hình 4.10. Mô tả Geoserver dinhDau, toaDo1, dinhCuoi, toaDo2 Câu lệnh yêu cầu tìm đường Client Server Kết quả: Danh sách các tọa độ “Service tìm đường” MS SQL Server Tập tin hình học (shape file) *.frm *.myd, *.myi MySQL Server 4.1 Geoserver 1.3 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ơ SVG 164 Geoserver đóng vai trò là server chuyên cung cấp dữ liệu. Ứng dụng sử dụng bốn lớp dữ liệu là: đường, bách hóa tổng hợp, bệnh viện, trường học. Trong các lớp trên, lớp đường được lấy từ dữ liệu của MySQL. Các lớp còn lại được lấy từ shapefile. Hiện nay ứng dụng sử dụng hai nguồn dữ liệu là shape file và MySQL. Đối với shape file thì chỉ cần nạp tậ p tin .shp vào. Đối với MySQL thì phải nạp tập tin dữ liệu vào MySQL, sau đó kết nối MySQL với Geoserver. Hình 4.11. Kết xuất của Geoserver Các tập tin dữ liệu .gml được Geoserver phát sinh sẽ được server “ Bản đồ ASPX” chuyển sang tập tin .svg. Ứng dụng sử dụng phương thức HTTP POST và tác vụ GetFeatureType. 4.8.2.3.1 Phương thức HTTP POST Sử dụng phương thức HTTP POST sẽ yêu cầu client chuyển các yêu cầu trong phần thân tài liệu POST vào trong dòng URL. Khi này WFS không bao giờ được phép yêu cầu thêm bất cứ tham số phụ nào để bổ sung vào cuối dòng URL nhằm mục đích xây dựng một kết quả hợp lệ cho yêu cầu tác vụ. Geoserver hỗ trợ cả hai phương thức HTTP GET và HTTP POST. Sử dụng phương thức nào cũng cho kết quả như nhau. Tuy nhiên, ứng dụng có sử dụng gói Geoserver 1.3 Tập tin GML Bản đồ ASPX Chuyển đổi dữ liệu sang SVG Tập tin SVG Client 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ơ SVG 165 CarbonTools giao tiếp với Geoserver, mà một lớp trong công cụ này (lớp HandlerWFS) chỉ hỗ trợ phương thức HTTP POST. Do đó, luận văn sử dụng phương thức HTTP POST để cài đặt. Từ đó, phần báo cáo chỉ đề cập HTTP POST, còn phần mô tả chi tiết nằm ngoài phạm vi nghiên cứu. (xin xem thêm tập tin “04- 094_Web_Feature_Service_Implementation_Specification_V1[1].1.pdf”, phần HTTP POST trong thư mục Ref\ThamKhaoChinh\GIS) 4.8.2.3.2 Tác vụ GetFeatureType Tác vụ GetFeature cho phép nhận về các tính năng từ một WFS. Một yêu cầu GetFeature được xử lý bởi một WFS. Khi giá trị của thuộc tính outputFormat được thiết lập là text/gml; subtype=gml/3.1.1, một tài liệu GML chứa kết quả sẽ được trả về cho trình khách (client). Nếu một WFS cài đặt “Xlink traversal” (tạm dịch là bộ phân tích liên kết), thì một WFS client có thể dùng thuộc tính traverseXlinkDepth và traverseXlinkExpiry để yêu cầu các thành phần được định danh bằng một liên kết. Yêu cầu: (Request) Mã hóa dạng XML của một yêu cầu GetFeature được định nghĩa theo giản đồ phân đoạn XML sau: <xsd:element name="GetFeature" type="wfs:GetFeatureType"/> <xsd:complexType name="GetFeatureType"> <xsd:complexContent> <xsd:extension base="wfs:BaseRequestType"> <xsd:sequence> <xsd:element ref="wfs:Query" maxOccurs="unbounded"/> </xsd:sequence> <xsd:attribute name="resultType" type="wfs:ResultTypeType" use="optional" default="results"/> <xsd:attribute name="outputFormat" type="xsd:string" use="optional" default="text/xml; subtype=3.1.1"/> <xsd:attribute name="maxFeatures" type="xsd:positiveInteger" use="optional"/> 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ơ SVG 166 <xsd:attribute name="traverseXlinkDepth" type="xsd:string" use="optional"/> <xsd:attribute name="traverseXlinkExpiry" type="xsd:positiveInteger" use="optional"/> </xsd:extension> </xsd:complexContent> </xsd:complexType> <xsd:simpleType name="ResultTypeType"> <xsd:restriction base="xsd:string"> <xsd:enumeration value="results"/> <xsd:enumeration value="hits"/> </xsd:restriction> </xsd:simpleType> <xsd:element name="Query" type="wfs:QueryType"/> <xsd:complexType name="QueryType"> <xsd:sequence> <xsd:choice minOccurs="0" maxOccurs="unbounded"> <xsd:element ref="wfs:PropertyName"/> <xsd:element ref="ogc:Function"/> </xsd:choice> <xsd:element ref="ogc:Filter" minOccurs="0" maxOccurs="1"/> <xsd:element ref="ogc:SortBy" minOccurs="0" maxOccurs="1"/> </xsd:sequence> <xsd:attribute name="handle" type="xsd:string" use="optional"/> <xsd:attribute name="typeName" type="wfs:TypeNameListType" use="required"/> <xsd:attribute name="featureVersion" type="xsd:string" use="optional"/> <xsd:attribute name="srsName" type="xsd:anyURI" use="optional"/> </xsd:complexType> <xsd:simpleType name="Base_TypeNameListType"> <xsd:list itemType="QName"/> </xsd:simpleType> <xsd:simpleType name="TypeNameListType"> <xsd:restriction base="wfs:Base_TypeNameListType"> <xsd:pattern value="((\w:)?\w(=\w)?){1,}"/> </xsd:restriction> </xsd:simpleType> 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ơ SVG 167 4.8.2.3.3 CarbonTools: công cụ hỗ trợ kèm theo Geoserver CarbonTools là một công cụ phát triển phần mềm được thiết kế dành riêng cho nhà phát triển và phân tích thông tin địa lý. Công cụ này đóng gói các giải pháp tương tác thuộc về không gian địa lý như các đặc tả của OGC (Open Geospatial Consortium). CarbonTools là một sản phẩm của nhiều năm kinh nghiệm, công cụ này giải quyết nhiều vấn đề và đưa ra một giao diện lập trình ứng dụng (API). Gói CarbonTools được thiết kế cho phép mở rộng. Thư viện cốt lõi cung cấp một nền mở cho phép mở rộng hỗ trợ cho các nguồn dữ liệu không gian địa lý mới, các bộ quản lý dịch vụ và nhiều kĩ thuật trực quan mới, …. Hơn thế nữa, một lượng lớn các giải pháp có thể được cung cấp khi sử dụng CarbonTools: các ứng dụng desktop độc lập, các mở rộng phần mềm của phía thứ ba, các d ịch vụ Web .Net và nhiều hơn thế nữa. Các công cụ CarbonTools .Net, kèm theo bộ cung cụ này, cung cấp một mở rộng cho các công cụ .Net Form. Điều này làm cho các tác vụ WMS/WFS/GML phức tạp có thể được thực hiện bằng cách kéo thả các thành phần vào Form. Các điều khiển này cung cấp một khởi điểm tốt để phát triển các ứng dụng thỏa OGC. Để giúp đỡ nhà phát triển, một số tiện ích được kèm theo gói này cùng với mã ngu ồn đầy đủ. Trong số đó là CarbonViewer, một bộ hiển thị WMS/WFS/GML độc lập. CarbonTools gồm có 9 gói riêng rẽ: • CarbonTools.Controls : Chứa các điều khiển hỗ trợ lập trình giao diện • CarbonTools.Core.Base : Chứa các lớp cơ sở. • CarbonTools.Core.Drawing : Chứa các lớp hỗ trợ vẽ hình. • CarbonTools.Core.Features : Chứa các lớp dùng cho quản lý dữ liệu địa lý … • CarbonTools.Core.Geometries: Chứa các lớp về đối tượng hình họ c như đường thẳng, đa giác…. • CarbonTools.Core.GML : Chứa các lớp phân tích tài liệu GML 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ơ SVG 168 • CarbonTools.Core.OGCCapabilities : Chứa các lớp hỗ trợ phân tích khả năng của một WFS hay WMS. • CarbonTools.Core.WFS : Chứa các lớp hỗ trợ giao tiếp, gởi các yêu cầu WFS tới WFS server. • CarbonTools.Core.WMS: Chứa các lớp hỗ trợ giao tiếp, gởi các yêu cấu WMS tới WFS server Trong các gói trên, gói được sử dụng chính trong chương trình phát sinh bản đồ SVG là CarbonTools.Core.WFS, các lớp trong gói này là: Class Description HandlerWFS Quản lý tương tác với một WFS thỏa đặc tả của OGC QueryBuilder Chuyển dữ liệu nguồn (SourceWFS) thành một câu truy vấn dịch vụ thỏa đặc tả WFS của OGC SourceWFS Quản lý dữ liệu truy cập và truy vấn đối với một dịch vụ WFS thỏa đặc tả WFS của OGC. Dữ liệu quản lý bao gồm : • Address (Một dịnh danh tài nguyên cho dịch vụ) • BBox (Đường bao của vùng địa lý) • FilterProperty (Tên thuộc tính chứa hình học mà đường bao sẽ được áp dụng) • Format (Định dạng GML được 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ơ SVG 169 Tên cột Kiểu dữ liệu Chiều dài Cho phép rỗng Id Số nguyên 4 không Name Chuỗi 255 Có daiLo Số nguyên 4 Có yêu cầu) • Layers (các lớp dữ liệu) • Maxfeature (Số tính năng tối đa cần lấy) …. WFSLayerType Kiểu và tên lớp được dùng trong câu truy vấn Ta sẽ dùng SourceWFS để lưu trữ các thông tin về một yêu cầu GetFeature. Đồng thời dùng HandlerWFS để gửi yêu cầu đi và nhận dữ liệu trả về từ WFS server, sau đó xử lý và tạo nội dung SVG . 4.8.2.4 Mô tả Microsoft SQL Server Microsoft SQL Server là server chuyên cung cấp dữ liệu cho việc tìm kiếm đường đi. Trong SQL Server, các bảng sau được sử dụng: • MapNetworkWithLength • MapNetworkDanhSachNodeKe • MapNetworkArc_AutoWithDirection Sau đây là mô tả cho từng bảng trên: • Bảng MapNetworkWithLength B ảng 4.1. Bảng MapNetworkWithLength Trong đó: o Id : mô tả số nguyên định dang cho một đường trong thực tế [...]... Truy tìm đường đi dựa vào mảng truoc Quy tắc truy tìm như sau o Bước 4.1: Gán u = t0 Đưa t0 vào danh sách đường đi o Bước 4.2: Với mỗi đỉnh u hiện có, ta gán v = truoc[u] Nếu v == VO_CUC thì dừng lại Ngược lại, đưa v vào danh sách đường đi, gán u=v, rồi lặp lại bước 4.2 172 Chương 5 TỔNG KẾT Chương 5 TỔNG KẾT 5.1 Kết luận Sau thời gian nghiên cứu, chúng em đã tìm hiểu được cấu trúc tập tin ảnh véctơ SVG, ... Flash nhỏ và dễ dàng được nhúng vào các ứng dụng Bộ hiển thị Flash chỉ phụ thuộc vào một tập lệnh rất nhỏ của hệ điều hành Do đó nó có khả năng lớn để chạy trên nhiều hệ nền khác nhau • Độc lập tập tin − Các tập tin được hiển thị mà không có sự phụ thuộc nào với các tài nguyên bên ngoài, chẳng hạn như phông chữ • Tính khả co − Các tập tin làm việc tốt trên các phần cứng yếu, và có thể tận dụng được... ảnh véctơ SVG, kĩ thuật viết script và các kĩ thuật liên quan để xây dựng được: • Một server phát sinh bản đồ thành phố với bốn lớp đường, trường học cấp ba, bệnh viện, bách hóa tổng hợp bằng SVG có định kiểu • Một service tìm đường đi ngắn nhất • Bản đồ SVG phát sinh có khả năng tương tác phía người dùng • Một ứng dụng phía trình khách có thể dùng để duyệt bản đồ SVG có sẵn được phát sinh bởi server... tương tự ma trận và các phép biến đổi màu được có các trường thông dụng được sử dụng thường xuyên hơn các giá trị Ví dụ, đối với một ma trận thì trường được sử dụng thường xuyên nhất là trường tịnh tiến Phép co giãn và xoay ít thông dụng hơn Do đó nếu trường co giãn không có giá trị, nó được cho giá trị là 100% Nếu trường xoay không có giá trị, Flash coi như không có phép xoay Việc sử dụng các giá trị... lai chúng em sẽ tiếp tục nghiên về chuẩn ảnh véc-tơ SVG để hoàn thiện chương trình tìm đường đi ngắn nhất trên bản đồ thành phố, bao gồm việc kiểm soát độ phóng to, thu nhỏ bản đồ bằng sự kết hợp với server phát sinh bản đồ động theo theo kích thước trình khách yêu cầu, và tìm đường đi ngắn nhất 173 Phụ lục A Phụ lục A Mô tả bổ sung cho các định dạng véc-tơ 1 SVF Tổng quan về ba phần trong cấu trúc của... tin qua một mạng có băng thông bị giới hạn và độ rộng băng thông này không thể được ước lượng trước Các tập tin được nén lại để trở nên nhỏ hơn và hỗ trợ xây dựng hình ảnh dần dần thông qua kỹ thuật luồng (streaming) SWF là một định dạng nhị phân và người sử dụng không thể đọc chúng dưới dạng văn bản như HTML SWF sử dụng các kỹ thuật chẳng hạn như nén bit và các cấu trúc có các trường tùy biến để tối... (nhận -1 , 0 , 1) Nếu là 0 thì đi được cả hai chiều Nếu là +1 thì chỉ đi được từ nodeStart đến nodeEnd Nếu là -1 thì chỉ đi được từ nodeEnd đến nodeStart • Bảng MapNetworkDanhSachNodeKe Tên cột Kiểu dữ liệu Chiều dài id Số nguyên 4 không 4 Có DanhSachNodeKe Chuỗi Cho phép rỗng Bảng 4.3 Bảng MapNetworkDanhSachNodeKe 170 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ơ SVG. .. bit Phần đầu của tập tin chứa một khối header có cấu trúc như sau: Trường Chứng thực Chứng thực Chứng thực Phiên bản Chiều dài tập tin Kích thước khung hình Tốc độ khung hình Số lượng khung hình Kiểu UI8 UI8 UI8 UI8 UI32 RECT UI16 UI16 Chú thích Byte chứng thực thứ 1 – luôn là 'F' Byte chứng thực thứ 2 – luôn là 'W' Byte chứng thực thứ 3 – luôn là 'S' Byte mô tả phiên bản Chiều dài của cả tập tin Kích... dữ liệu có một kiểu thẻ (stag) và một chiều dài Có hai dạng mô tả khối dữ liệu này: dạng ngắn và dạng dài Tối ưu hóa kích thước tập tin SWF Vì các tập tin SWF thường được phân phối qua kết nối mạng nên thật sự chúng cần phải càng nhỏ càng tốt Sau đây là một vài kỹ thuật được sử dụng để giải quyết vấn đề này: • Tái sử dụng − Cấu trúc của từ điển kí tự làm cho việc tái sử dụng các thành phần trong một... các đỉnh mở, tức chưa xét • Bước 1: gán S= {s0}, T = T \ {s0} u = s0; • Bước 2: tìm đỉnh mở v có sao cho doDai[v] giá trị nhỏ nhất Nếu v trùng u thì có nghĩa là đã tìm được đường đi Khi này chuyển sang bước 4 Nếu không thì chuyển sang bước 3 171 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ơ SVG • Bước 3: cập nhật giá trị doDai, daDuyet từ đỉnh v Xét các đỉnh kề v Nếu . 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 163 4.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ía. 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 164 Geoserver đóng vai trò là server chuyên cung cấp dữ liệu. Ứng dụng sử dụng bốn lớp dữ liệu là: đường, bách. HTTP GET và HTTP POST. Sử dụng phương thức nào cũng cho kết quả như nhau. Tuy nhiên, ứng dụng có sử dụng gói Geoserver 1.3 Tập tin GML Bản đồ ASPX Chuyển đổi dữ liệu sang SVG Tập tin SVG Client