Luận văn: Tìm hiểu SVG và xây dựng ứng dụng tìm đường đi trên bản đồ dựa trên đồ họa vectơ doc

TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM HUỲNH NGỌC ĐOÀN - 0112083 LÊ ANH TOÀN - 0112074 TÌM HIỂU SVG VÀ ỨNG DỤNG LUẬN VĂN CỬ NHÂN TIN HỌC GIÁO VIÊN HƯỚNG DẪN TS DƯƠNG ANH ĐỨC Th.S LÊ THỤY ANH NIÊN KHÓA 2001 - 2005 i NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ii NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN iii LỜI CÁM ƠN Chúng em xin chân thành cám ơn Khoa Công Nghệ Thông Tin, trường Đại Học Khoa Học Tự Nhiên TpHCM đã tạo điều kiện tốt cho chúng em thực hiện đề tài luận văn tốt nghiệp này. Chúng em xin chân thành cám ơn Thầy Dương Anh Đức và Thầy Lê Thụy Anh đã tận tình hướng dẫn, chỉ bảo chúng em trong suốt thời gian thực hiện đề tài. Chúng em xin chân thành cám ơn quý Thầy Cô trong Khoa đã tận tình giảng dạy, trang bò cho chúng em những kiến thức quý báu trong những năm học vừa qua. Chúng con xin nói lên lòng biết ơn sâu sắc đối với Ông Bà, Cha Mẹ đã chăm sóc, nuôi dạy chúng con thành người. Xin chân thành cám ơn các anh chò và bạn bè đã ủng hộ, giúp đỡ và động viên chúng em trong thời gian học tập và nghiên cứu. Mặc dù chúng em đã cố gắng hoàn thành luận văn trong phạm vi và khả năng cho phép nhưng chắc chắn sẽ không tránh khỏi những thiếu sót. Chúng em kính mong nhận được sự cảm thông và tận tình chỉ bảo của quý Thầy Cô và các bạn. Nhóm thực hiện Huỳnh Ngọc Đoàn và Lê Anh Toàn 07/2005 iv LỜI NÓI ĐẦU Sự phát triển của Internet đang vươn tới mọi ngóc ngách trong đời sống kinh tế, xã hội. Các ứng dụng của Internet đang làm cho cuộc sống ngày hoàn thiện hơn, rút ngắn khoảng cách về không gian. Các công ty lớn trên thế giới đang chuyển hướng công nghệ của mình vào siêu xa lộ thông tin. Họ ra sức phát triển các cơ sở hạ tầng, các ứng dụng, các dịch vụ giá trị gia tăng và các chuẩn mực. Nếu nhà phát triể n nào tạo ra một chuẩn mực tốt thì sẽ chiếm lĩnh được thị trường, lật đổ những chuẩn mực trước đó. Sự phát triển công nghệ cho Internet đang thu hút các tổ chức, các công ty ra sức áp đặt các chuẩn mực riêng của mình lên ngành công nghiệp này. Hệ quả là thế giới đã chứng kiến nhiều sự thay đổi chuẩn mực, kèm theo đó là phí tổn khi phải chuyển đổi từ định dạng theo chuẩn cũ sang định dạng của chuẩn mới. Một những sự chuyển đổi đó là sự chuyển đổi từ các định dạng ảnh quét này sang định dạng ảnh quét khác, chuyển từ định dạng ảnh quét sang định dạng ảnh véc-tơ. Khi các ảnh đã được mô tả bằng véc-tơ, các hệ nến, các trình soạn thảo và các ứng dụng đòi hỏi phả i có một hệ thống quy ước chung để xử lý. Một loạt các chuẩn véc-tơ đã ra đời nhưng đều là các định dạng độc quyền của từng công ty. Từ năm 1999, chuẩn đồ họa véc-tơ SVG đã ra đời đánh dấu sự hợp nhất của các công ty trong việc xử lý đồ họa véc-tơ. Sự xuất hiện của SVG đã dẫn đến một loạt ứng dụng đã ra đời, tận dụng được những ưu điểm của chuẩn này. Trong các ứng dụng của SVG, ứng dụng bản đồ là thể hiện rõ nhất tính ưu việt của SVG. Như vậy tại sao không tận dụng SVG và GIS để tạo ra một chương trình tìm kiếm đường đi trên bản đồ? v Với ý tưởng trên, chúng em đã chọn và tập trung phát triển đề tài “Tìm hiểu SVG và xây dựng ứng dụng tìm đường đi trên bản đồ dựa trên đồ họa véc-tơ”. Nội dung của luận văn được chia làm 5 chương như sau: Chương 1. Mở đầu: giới thiệu vai trò của đồ họa véc-tơ và GIS. Dẫn nhập khả năng sử dụng SVG kết hợp GIS để tạo bản đồ, l ý do thực hiện đề tài, đồng thời giới thiệu sơ lược về đề tài và mục tiêu phải đạt được. Chương 2. Các vấn đề tổng quan: khái quát về chuẩn véc-tơ cho bản đồ, các định dạng véc-tơ thông dụng hiện nay và minh họa bằng các ví dụ đơn giản, mô hình đối tượng tài liệu DOM, ngôn ngữ XML, cũng như trình bày về những điều cơ bản nhất c ủa hệ thống thông tin địa lý GIS. Chương 3. Cấu trúc định dạng tập tin SVG: trình bày chi tiết về SVG, các thành phần chính thường được sử dụng trong đặc tả SVG, kiến trúc nội vi SVG, kiến trúc ứng dụng SVG. 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: trình bày các vấn đề liên quan trực tiếp đến việc xây dựng ứng dụng. Chương 5. T ổng kết: tóm lại các vấn đề đã giải quyết và nêu ra một số hướng phát triển trong tương lai. vi MỤC LỤC Chương 1 Mở đầu 14 1.1 Vai trò của đồ họa véc-tơ trong ứng dụng bản đồ 14 1.2 Mục tiêu của đề tài 15 Chương 2 Các vấn đề tổng quan 16 2.1 Tổng quan về chuẩn véc-tơ cho bản đồ 16 2.1.1 Giới thiệu về chuẩn véc-tơ cho bản đồ 16 2.1.1.1 Chuẩn chính thức 16 2.1.1.2 Chuẩn bất thành văn 17 2.1.2 Các định dạng của véc-tơ 18 2.1.2.1 SVF 18 2.1.2.2 DWF 20 2.1.2.3 Flash (còn gọi là SWF) 21 2.1.2.4 PGML 22 2.1.2.5 WebCGM 23 2.1.2.6 VML 24 2.1.2.7 PDF 27 2.1.2.8 SVG 30 2.1.2.9 VRML 36 2.1.2.10 HGML 37 2.1.2.11 DrawML 38 2.1.3 Mô hình DOM 39 2.1.4 Ngôn ngữ XML 40 2.1.5 Tổng quan về GIS 42 2.1.5.1 Khái niệm GIS? 42 2.1.5.2 Các thành phần của GIS 42 2.1.5.3 - Chuyên viên (personnel): nhân viên, chuyên viên phân tích, thiết kế, phát triển, bảo trì hệ thống thông tin dữ liệu GIS 42 2.1.5.4 Chức năng của GIS 42 2.1.5.5 Các ứng dụng cơ bản trong thực tế của GIS 42 Chương 3 Cấu trúc định dạng tập tin SVG 44 3.1 Định nghĩa 44 3.2 Sự tương thích với các chuẩn khác 44 3.3 Loại MIME của SVG và Không gian tên SVG 46 3.3.1 Loại MIME của SVG, mở rộng tên tập tin và loại tập tin Macintosh: 46 3.3.2 Không gian tên SVG, định danh công cộng và định danh hệ thống: 47 3.4 Định nghĩa một phân đoạn tài liệu SVG : thành phần ‘SVG’ 47 3.4.1 Tổng quan: 47 3.4.2 Thành phần ‘svg’: 50 3.5 Gom nhóm : thành phần ‘g’: 52 vii 3.6 Tham chiếu và thành phần ‘defs’: 53 3.6.1 Tổng quan: 53 3.6.2 Các thuộc tính tham chiếu URI: 57 3.6.3 Thành phần ‘defs’ 58 3.7 Thành phần ‘desc’ và ‘title’: 59 3.8 Thành phần ‘symbol’: 62 3.9 Thành phần ‘use’: 62 3.10 Thành phần ‘image’: 74 3.11 Các hình cơ bản 77 3.11.1 Hình chữ nhật – thành phần ‘rect’ 77 3.11.2 Hình tròn – thành phần ‘circle’ 79 3.11.3 Hình e-lip – thành phần ‘ellipse’ 79 3.11.4 Đường thẳng – thành phần ‘line’ 81 3.11.5 Đường gấp khúc – thành phần ‘polylinbe’ 82 3.11.6 Đa giác – thành phần ‘polygon’ 83 3.12 Hệ trục toạ độ, các phép biến đổi và các đơn vị đo 84 3.12.1 Giới thiệu 84 3.12.2 Khung nhìn ban đầu 85 3.12.3 Hệ trục toạ độ ban đầu 87 3.12.4 Các phép biến đổi hệ trục toạ độ 88 3.12.5 Thuộc tính ‘transform’ 95 3.12.6 Thuộc tính ‘viewBox’ 97 3.12.7 Thuộc tính ‘preserveAspectRatio’ 100 3.12.8 Thiết lập khung nhìn 106 3.13 Định kiểu (styling) 108 3.13.1 Các thuộc tính định kiểu của SVG 108 3.13.2 Định kiểu dùng thuộc tính trình diễn 108 3.13.3 Định kiểu bằng CSS 109 3.13.4 Thành phần ‘style’ 112 3.13.5 Thuộc tính ‘class’ 112 3.13.6 Phạm vi của trang định kiểu: 113 3.14 Đường xén 114 3.14.1 Giới thiệu: 114 3.14.2 Đường xén ban đầu 114 3.14.3 Thuộc tính ‘overflow’ và ‘clip’ 114 3.14.4 Đường xén đối với khung nhìn và đường xén đối với ‘viewBox’ 116 3.14.5 Thiết lập đường xén mới 117 3.15 Thành phần ‘path’ 121 3.15.1 Giới thiệu 121 3.15.2 Thành phần ‘path’ 121 3.15.3 Dữ liệu đường (path data) 121 3.16 Thành phần ‘text’ 122 3.16.1 Giới thiệu 122 viii 3.16.2 Thành phần ‘text’ 123 3.16.3 Thuộc tính thiết lập phông chữ cho thành phần ‘text’ 126 3.16.4 Thuộc tính canh lề 127 3.16.5 Thành phần ‘tspan’ 128 3.16.6 Thành phần ‘tref’ 131 3.17 Vẽ chữ dọc theo một đường 132 3.17.1 Giới thiệu: 132 3.17.2 Thành phần ‘textPath’ 133 3.18 Khả năng ảnh động của SVG - thành phần ‘animate’ 138 3.18.1 Giới thiệu 138 3.18.2 Các thành phần ảnh động 139 3.18.2.1 Tổng quan 139 3.18.2.2 Mối quan hệ của ảnh động SVG với SMIL Animation 139 3.18.3 Ví dụ ảnh động: 141 3.19 Viết script (kịch bản) 142 3.19.1 Chỉ định ngôn ngữ viết script 142 3.19.1.1 Chỉ định ngôn ngữ viết script mặc định 142 3.19.1.2 Khai báo cục bộ ngôn ngữ viết script 143 3.19.2 Thành phần ‘script’ 143 3.19.3 Quản lý sự kiện 146 3.19.4 Thuộc tính sự kiện 146 3.19.5 ECMAScript và DOM 148 3.19.5.1 Lấy đối tượng tài liệu 148 3.19.5.2 Lấy thành phần gốc 148 3.19.5.3 Tạo một node trong cây tài liệu 148 3.19.5.4 Xóa một thành phần ra khỏi thành phần cha của nó 149 3.19.5.5 Thiết lập thuộc tính sự kiện 149 3.19.5.6 Thiết lập bộ lắng nghe sự kiện 149 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 151 4.1 Các kĩ thuật và công nghệ 151 4.2 WMS 151 4.3 WFS 152 4.4 GEOSERVER 154 4.5 Kiến trúc ứng dụng 155 4.6 Client-side 156 4.7 Server- side 156 4.8 Sơ đồ tương tác chi tiết giữa client và server 158 4.8.1 Mô tả chi tiết client 159 4.8.1.1 Vấn đề hiển thị nội dung SVG ở phía client 159 4.8.1.2 Vấn đề tương tác với nội dung SVG ở phía client 159 4.8.1.3 Tìm đường đi từ giữa hai điểm 160 4.8.1.4 Vấn đề thay đổi tỉ lệ phóng to thu nhỏ 161 ix 4.8.2 Mô tả chi tiết server 162 4.8.2.1 Mô tả chi tiết “Bản đồ ASPX” 162 4.8.2.2 Mô tả “Service tìm đường” 163 4.8.2.3 Mô tả Geoserver 163 4.8.2.4 Mô tả Microsoft SQL Server 169 4.8.3 Mô tả chi tiết quá trình tìm kiếm đường đi 171 Chương 5 TỔNG KẾT 173 5.1 Kết luận 173 5.2 Hướng phát triển: 173 Phụ lục A Mô tả bổ sung cho các định dạng véc-tơ 174 Phụ lục B Kết quả cài đặt 190 Tài liệu tham khảo 194 [...]... chọn và xây dựng đề tài “TÌM HIỂU SVG VÀ XÂY DỰNG ỨNG DỤNG TÌM ĐƯỜNG ĐI TRÊN BẢN ĐỒ DỰA TRÊN ĐỒ HỌA VECTƠ”, với dữ liệu là bản đồ đường đi trong Thành phố Hồ Chí Minh Các chức năng chính của ứng dụng cần phải xây dựng : - Chương trình đòi hỏi về giao diện : cho phép người dùng duyệt từng phần trên bản đồ theo các chiều : sang trái, sang phải, lên trên và xuống dưới và cho phép phóng to, thu nhỏ phần bản. .. lĩnh vực bản đồ Việc kết hợp SVG và GIS sẽ tạo ra một hệ mới được gọi là SVG GIS Hệ này có chức năng tìm kiếm, tra cứu thông tin bản đồ đồng thời lại tận dụng được tính ưu việt của SVG SVG GIS cho phép phóng to bản đồ đến kích cỡ bất kỳ mà không vỡ ảnh SVG có thể được xén theo kích thước tùy ý để truyền tải trên mạng được nhanh chóng Bản thân SVG đã hàm chứa dữ liệu Hình 1.1 Ứng dụng bản đồ SVG của... nay, trên thế giới, các ứng dụng bản đồ đang chuyển dần sang sử dụng chuẩn SVG Các ứng dụng này vô cùng đa dạng, từ quản lý mùa màng, dịch bệnh, dân số, thời tiết, tội phạm cho đến quản lý đường trong đô thị Tại Việt Nam, việc xây dựng một ứng dụng bản đồ SVG cũng rất cần thiết vì sớm hay muộn thì chúng ta cũng phải thực hiện đi u này để tận dụng lợi thế của SVG Chính vì xuất phát từ nhu cầu trên, ... 167 Bảng 4.2 Bảng MapNetworkArc_AutoWithDirection 168 Bảng 4.3 Bảng MapNetworkDanhSachNodeKe 168 Bảng A.1 Cấu trúc tập tin Flash 175 Bảng A.2 Danh sách 18 thẻ của HGML 180 xiii Chương 1 Mở đầu Chương 1 Mở đầu 1.1 Vai trò của đồ họa véc-tơ trong ứng dụng bản đồ SVG (Scalable Vector Graphics) (Đồ họa véc-tơ khả co) là một chuẩn ra đời vào năm 1999 SVG là một định dạng đồ họa. .. Khoa học và Công nghệ TP Hồ Chí Minh 14 Chương 1 Mở đầu Một đi u cần lưu ý khi phát triển ứng dụng với SVG là tốc độ hiển thị nội dung SVG phụ thuộc vào độ phức tạp của nội dung SVG và tốc độ xử lý của máy tính Do đó đối với ứng dụng bản đồ SVG, người phát triển cần phải chọn giải pháp tối ưu nhất là giảm tối đa kích thước tập tin svg cần hiển thị tại một thời đi m bằng cách xén nội dung SVG bên trong... Hình 1.1 Ứng dụng bản đồ SVG của Sở Khoa học và Công nghệ TP Hồ Chí Minh 12 Hình 2.1 Luồng công việc của VML và HTML 23 Hình 2.2 Minh họa VML 25 Hình 2.3 Các thành phần của PDF 27 Hình 2.4 Minh họa đơn giản về SVG 33 Hình 2.5 Một ví dụ đơn giản về cây phân cấp DOM 37 Hình 2.6 Kiến trúc và hình thái XML 39 Hình 3.1 Minh họa nội dung SVG được... “Service tìm đường 161 Hình 4.10 Mô tả Geoserver 161 Hình 4.11 Kết xuất của Geoserver 162 Hình A.1 Ví dụ về ảnh VRML 178 Hình B.1 Bản đồ SVG được phát sinh bởi GenerateSVGMap 189 Hình B.2 Bản đồ SVG được hiển thị trong chương trình client 190 Hình B.3 Minh hoạ chú thích khi rê chuột lên một đối tượng 191 xii DANH MỤC CÁC BẢNG BIỂU Bảng 4.1 Bảng MapNetworkWithLength... chuẩn hóa Trong khi đó, bản thân bản đồ lại cần một lượng các hàm bổ sung Đi u này có thể đạt được bằng cách sử dụng server scripts hoặc các chỉ thị javascript phức tạp, và bằng cách nạp các ảnh quét Thời đi m cuối năm 1999 đã chứng kiến sự ra đời của một chuẩn mới đầy hứa hẹn được gọi là SVG (Scalable Vector Graphics) Chuẩn này tạo ra khả năng trang bị đồ họa véc-tơ cho các web site SVG được phát triển... xuống dưới và cho phép phóng to, thu nhỏ phần bản đồ đang xem Đồng thời phải có các luật giao thông như đường một chiều kí hiệu trên bản đồ để tránh cho người dùng vi phạm Cho phép thay đổi các thông số như tỉ lệ phóng to thu nhỏ mỗi lần, tỉ lệ di chuyển - Cho phép người dùng tra cứu các tên đường - Cho phép người dùng tìm đường đi ngắn nhất giữa 2 đường bằng chỉ dẫn lời hoặc bằng hình ảnh trực quan... véc-tơ cho bản đồ 2.1.1 Giới thiệu về chuẩn véc-tơ cho bản đồ Trong lĩnh vực bản đồ, bằng cách sử dụng véc-tơ, chúng ta có thể làm cho việc tương tác, phân tích, sử dụng các chức năng liên quan đến màn hình trở nên dễ dàng hơn, chẳng hạn như phóng to thu nhỏ (zoom) và kéo (pan) Chất lượng của các hình ảnh được tái hiện cũng tăng lên rất đáng chú ý Cách đây không lâu, chỉ có việc hiển thị văn bản và ảnh . cầu trên, cùng với sự hấp dẫn của công nghệ nên chúng em đã chọn và xây dựng đề tài “TÌM HIỂU SVG VÀ XÂY DỰNG ỨNG DỤNG TÌM ĐƯỜNG ĐI TRÊN BẢN ĐỒ DỰA TRÊN ĐỒ HỌA VECTƠ”, với dữ liệu là bản đồ đường. Với ý tưởng trên, chúng em đã chọn và tập trung phát triển đề tài Tìm hiểu SVG và xây dựng ứng dụng tìm đường đi trên bản đồ dựa trên đồ họa véc-tơ”. Nội dung của luận văn được chia. Trong các ứng dụng của SVG, ứng dụng bản đồ là thể hiện rõ nhất tính ưu việt của SVG. Như vậy tại sao không tận dụng SVG và GIS để tạo ra một chương trình tìm kiếm đường đi trên bản đồ?