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ơ

Chia sẻ: Cao Tt | Ngày: | Loại File: PDF | Số trang:20

Thêm vào BST

Báo xấu

224
lượt xem 23
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 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ơ

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
NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... i
NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ii
LỜI CÁM ƠN Chuùng em xin chaân thaønh caùm ôn Khoa Coâng Ngheä Thoâng Tin, tröôøng Ñaïi Hoïc Khoa Hoïc Töï Nhieân TpHCM ñaõ taïo ñieàu kieän toát cho chuùng em thöïc hieän ñeà taøi luaän vaên toát nghieäp naøy. Chuùng em xin chaân thaønh caùm ôn Thaày Döông Anh Ñöùc vaø Thaày Leâ Thuïy Anh ñaõ taän tình höôùng daãn, chæ baûo chuùng em trong suoát thôøi gian thöïc hieän ñeà taøi. Chuùng em xin chaân thaønh caùm ôn quyù Thaày Coâ trong Khoa ñaõ taän tình giaûng daïy, trang bò cho chuùng em nhöõng kieán thöùc quyù baùu trong nhöõng naêm hoïc vöøa qua. Chuùng con xin noùi leân loøng bieát ôn saâu saéc ñoái vôùi OÂng Baø, Cha Meï ñaõ chaêm soùc, nuoâi daïy chuùng con thaønh ngöôøi. Xin chaân thaønh caùm ôn caùc anh chò vaø baïn beø ñaõ uûng hoä, giuùp ñôõ vaø ñoäng vieân chuùng em trong thôøi gian hoïc taäp vaø nghieân cöùu. Maëc duø chuùng em ñaõ coá gaéng hoaøn thaønh luaän vaên trong phaïm vi vaø khaû naêng cho pheùp nhöng chaéc chaén seõ khoâng traùnh khoûi nhöõng thieáu soùt. Chuùng em kính mong nhaän ñöôïc söï caûm thoâng vaø taän tình chæ baûo cuûa quyù Thaày Coâ vaø caùc baïn. Nhoùm thöïc hieän Huyønh Ngoïc Ñoaøn vaø Leâ Anh Toaøn 07/2005 iii
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 đồ? iv
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. v
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 vi
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 vii
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 viii
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 ix
DANH MỤC CÁC HÌNH 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 nhúng nội tuyến ........................................ 47 Hình 3.2 Minh họa thành phần gom nhóm ‘g’.......................................................... 51 Hình 3.3 Minh họa thành phần ‘defs’ ....................................................................... 57 Hình 3.4 Cây DOM của nội dung SVG cho ví dụ hình chữ nhật tô tuyến tính ........ 57 Hình 3.5 Cây tài liệu của thành phần ‘use’ chỉ dùng ‘g’ .......................................... 65 Hình 3.6 Minh họa thành phần ‘use’ chỉ dùng ‘g’ .................................................... 65 Hình 3.7 Cây tài liệu của thành phần ‘use’ dùng ‘g’ và ‘svg’ .................................. 66 Hình 3.8 Minh họa thành phần ‘use’ dùng ‘g’ và ‘svg’............................................ 67 Hình 3.9 Minh họa thành phần ‘use’ với thuộc tính ‘transform’.............................. 68 Hình 3.10 Minh họa thành phần ‘use’ với trang định kiểu CSS............................... 69 Hình 3.11 Minh họa thành phần ‘rect’ vuông góc .................................................... 76 Hình 3.12 Minh họa thành phần ‘rect’ tròn góc........................................................ 76 Hình 3.13 Minh họa thành phần ‘circle’ ................................................................... 77 Hình 3.14 Minh họa thành phần ‘ellipse’ ................................................................. 79 Hình 3.15 Minh họa thành phần ‘line’...................................................................... 80 Hình 3.16 Minh họa thành phần ‘polyline’............................................................... 81 Hình 3.17 Minh họa hệ trục tọa độ ban đầu.............................................................. 86 Hình 3.18 Minh họa hiển thị không có phép biến đổi .............................................. 87 Hình 3.19 Minh họa phép tịnh tiến ........................................................................... 89 x
Hình 3.20 Minh họa phép quay và phép co giãn ...................................................... 90 Hình 3.21 Minh họa phép kéo xiên theo trục X, trục Y............................................ 91 Hình 3.22 Minh họa phép các phép biến đổi lồng nhau ........................................... 93 Hình 3.23 Minh họa thuộc tính ‘viewBox’ ............................................................... 96 Hình 3.24 Minh họa thuộc tính ‘preserveAspectRatio’ .......................................... 104 Hình 3.25 Minh họa thuộc tính ‘fill’....................................................................... 107 Hình 3.26 Minh họa nội dung SVG có tham chiếu đến trang định kiểu CSS ........ 108 Hình 3.27 Minh họa thành phần ‘clipPath’............................................................. 118 Hình 3.28 Minh họa thành phần ‘path’ ................................................................... 120 Hình 3.29 Minh họa thành phần ‘text’.................................................................... 124 Hình 3.30 Minh họa thành phần ‘tspan’ ................................................................. 127 Hình 3.31 Minh họa thành phần ‘tspan’ có một vị trí đặc biệt ............................... 128 Hình 3.32 Minh họa thành phần ‘tspan’ thiết lập vị trí mới cho mỗi kí tự trong chuỗi ...................................................................................................... 129 Hình 3.33 Minh họa thành phần ‘tref’ .................................................................... 130 Hình 3.34 Minh họa thành phần ‘textPath’............................................................. 134 Hình 3.35 Minh họa thành phần ‘textPath’ có sử dụng thuộc tính ‘tspan’............. 135 Hình 3.36 Minh họa thành phần ‘textPath’ sử dụng thuộc tính ‘startOffset’ ......... 136 Hình 3.37 Minh họa thành phần ảnh động animateMotion .................................... 140 Hình 3.38 Minh họa chức năng bắt sự kiện chuột .................................................. 142 Hình 3.39 Minh họa bộ timer và thuộc tính mờ ‘opaque’ ...................................... 144 Hình 4.1 Mô hình kiến trúc giao tiếp giữa client và WFS ...................................... 150 Hình 4.2 Sơ đồ phân tầng của GeoServer ............................................................... 153 Hình 4.3 Sơ đồ kiến trúc ứng dụng ......................................................................... 154 Hình 4.4 Kiến trúc client-server được cài đặt ......................................................... 155 Hình 4.5 Kiến trúc chi tiết client-server được cài đặt ............................................. 156 Hình 4.6 Minh họa yêu cầu hiển thị nội dung ở phía client.................................... 157 Hình 4.7 Cây DOM quản lý qui trình bắt sự kiện................................................... 158 Hình 4.8 Mô tả chức năng server “Bản đồ ASPX”................................................. 160 xi
Hình 4.9 Mô tả server “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 ............................................................... 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 véc-tơ hỗ trợ các nhà phát triển mô tả các hình ảnh bằng văn bản. Những năm gần đây, các ứng dụng về SVG ngày càng được phát triển mạnh trên khắp thế giới, trên các hệ thống máy tính để bàn và gần đây là trên các thiết bị nhúng chẳng hạn như thiết bị di động. Tại Việt Nam, việc nghiên cứu SVG cũng đã đạt được một số kết quả đáng khích lệ. Có thể kể đến kết quả nghiên cứu của Sở Khoa học và Công nghệ TP. Hồ Chí Minh (http://www.ioit-hcm.ac.vn/map/index.html). SVG ngày càng phát triển lớn mạnh. Bên cạnh đó là GIS cũng đang chiếm vai trò quan trọng trong 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 Sở 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 nó. 1.2 Mục tiêu của đề tài Hiện 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, 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 đ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 đồ đ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. 15
Chương 2. Các vấn đề tổng quan Chương 2 Các vấn đề tổng quan 2.1 Tổng quan về chuẩn 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 quét (raster image) được tiêu 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 theo yêu cầu của giới công nghiệp, nên một lượng lớn các ứng dụng sẽ được phát triển tiếp. Khi xét về mặt lợi ích cho bản đồ, lần đầu tiên trong lịch sử của web, đã có một chuẩn tuân thủ tối đa các yêu về đồ họa. Chuẩn véc-tơ được chia ra làm hai phần: • Chuẩn chính thức • Chuẩn bất thành văn 2.1.1.1 Chuẩn chính thức Các chuẩn chính thức là sự thỏa thuận bằng tài liệu chứa các đặc tả kỹ thuật hoặc các tiêu chuẩn được sử dụng dưới vai trò là các luật, các hướng dẫn hoặc các định nghĩa về các chức năng chính. Các chuẩn được tạo ra để đảm bảo rằng các tài liệu, sản phẩm, qui trình và dịch vụ luôn đúng với mục tiêu ban đầu của nó. Chúng được chứng nhận bởi các tổ chức về tiêu chuẩn, chẳng hạn như ISO (International 16
Chương 2. Các vấn đề tổng quan Organization for Standardization = Tổ chức Quốc tế về Tiêu chuẩn hóa) hoặc IEEE (Institute of Electrical and Electronical Engineers = Viện kỹ sư điện và điện tử Hoa Kỳ) và được bắt buộc phải sử dụng thông qua các văn bản qui định. ECMA (European Computer Manufacturer's Assocation = Hiệp hội các nhà sản xuất máy tính châu Âu) hoặc W3C (World Wide Web Consortium = Tổ chức World Wide Web) cũng công bố các chuẩn có khả năng trở thành chuẩn chung nhưng không bắt buộc các nhà sản xuất phải áp dụng chúng. Trong thế giới WWW, có một sự thuận lợi trong việc cân bằng các ngôn ngữ soạn thảo văn bản. Người dùng có thể viết một đoạn văn bản không chỉ bằng ngôn ngữ HTML mà còn có thể sử dụng các thành phần trong các ngôn ngữ hiện có khác (chẳng hạn như “formatting”, “animating”, “interactivity”). Các thành phần trong các ngôn ngữ khác nhau được đặt chung với nhau nên cần phải “giao tiếp với nhau”. Việc giao tiếp này chỉ có được thực hiện thông qua một cú pháp chính xác được cung cấp bởi các chuẩn. 2.1.1.2 Chuẩn bất thành văn Đây là một tiêu chuẩn hiện đang được chấp nhận và sử dụng rộng rãi mặc dù không có tổ chức tiêu chuẩn nào thông báo chấp nhận nó. Vì các lý do kỹ thuật, các công ty phần mềm thường không chấp nhận tất cả các chuẩn bất thành văn của công ty khác. Mặt khác, vì các lý do thương mại, họ muốn thiết lập các chuẩn riêng của mình, cố gắng tạo ra một chuẩn bất thành văn mới. Flash là một chuẩn như vậy. Hậu quả của việc trên là chúng tạo ra một lượng khỗng lồ các chuẩn bất thành văn. Điều này có nghĩa là các phần của các chuẩn không thể được áp dụng trong thực tế (chẳng hạn như HTML 4.0). Tiếp theo của việc này là rất nhiều các chuẩn riêng của các công ty tạo nên vấn đề không tương thích khi kết hợp các sản phẩm, hoặc khi sử dụng các biến môi trường. Không phải chỉ có các công ty lớn mới có khả năng tạo ra các chuẩn mới. Thậm chí một nhóm nghiên cứu cũng có khả năng nghĩ ra và công bố một ý tưởng nào đó, miễn là nó có được cộng đồng người dùng chấp nhận hay không. Một ví dụ 17
Chương 2. Các vấn đề tổng quan cho việc này là Tổ chức CERN (European Organization for Nuclear Research = Tổ chức Nghiên cứu về Hạt nhân của châu Âu) đã tạo ra trình duyệt đồ họa đầu tiên đang được sử dụng rộng rãi. Một ví dụ khác là Viện Fraunhofer (tại Đức) đã tạo ra chuẩn nén âm thanh MP3 rất thông dụng hiện nay. Cũng giống như các chuẩn bất thành văn, nếu thực sự hữu ích, chúng sẽ được chấp nhận trong lĩnh vực thương mại. Sau đó sẽ được tinh chỉnh và thương mại hóa. 2.1.2 Các định dạng của véc-tơ Các định dạng thông dụng hiện nay trên Internet: • SVF • DWF • Flash • PGML • WebCGM • VML • PDF • SVG • VRML • HGML • DrawML Sau đây là mô tả tổng quan từng định dạng trên: 2.1.2.1 SVF SVF (Simple Vector Format = Định dạng véc-tơ đơn giản) là một định dạng đồ họa véc-tơ hỗ trợ thông tin về lớp và các siêu liên kết. Nó được SoftSource và NCSA phát triển nhằm cung cấp một định dạng véc-tơ hai chiều hữu ích trong thế giới World Wide Web. Ban đầu SVF được dự định sử dụng cho lĩnh vực trình bày web của các ảnh vẽ CAD. SVF có một plugin, được giới thiệu vào năm 1996 để tham gia vào việc biểu diễn các véc-tơ trong thể giới World Wide Web. Sau năm 1997, nó không còn được phát triển nữa. Các ấn bản tài liệu chỉ hỗ trợ cho các phiên bản thương mại. Hiện 18
Chương 2. Các vấn đề tổng quan nay, không có bộ chuyển đổi giữa SVF với hai định dạng HPGL và DXF. Các chức năng của nó: phóng to thu nhỏ không rung (mịn), cửa sổ phóng to thu nhỏ, kéo, ẩn/hiện các lớp. Việc tương tác bị giới hạn nhiều hơn: các đường thẳng và bề mặt chỉ có thể được gắn với các siêu liên kết với sự trợ giúp của các chương trình bên ngoài. Trong việc hiển thị, SVF không hỗ trợ phép khử răng cưa và không có hoạt ảnh. SVF được thiết kế thành một định dạng đơn giản để mô tả ảnh véc-tơ. Các đối tượng vẽ cơ bản gồm có điểm, đường thẳng, đường tròn, cung, đường cong Bezier và văn bản. Các chức năng của định dạng này bao gồm: • các lớp (điều khiển sự xuất hiện của các đối tượng) • các siêu liên kết (cho phép người dùng nhấn vào một vùng của ảnh vẽ để thực thi một tác vụ) • các thông báo (gửi các thông điệp khi người dùng vượt qua một mức phóng to hay thu nhỏ nhất định nào đó) • các phép tô màu • khả năng cho phép khai báo lại các màu mặc định Tập tin SVF được chia thành 3 phần: phần giới thiệu (intro), phần đầu (header) và phần thân (main). Phần giới thiệu chỉ đơn giản là một chuỗi văn bản xác định tập tin hiện tại là một tập tin dạng SVF. Phần đầu (header) chứa thông tin tổng quát dùng trong việc hiển thị và chỉnh sửa ảnh chẳng hạn như các lớp, các phạm vi và màu sắc. Phần thân mô tả các ảnh và siêu liên kết sẽ được vẽ như thế nào. (xin vui lòng xem phụ lục A mục 1 để biết thêm về ba phần trên) Kiểu MIME (Multipurpose Internet Mail Extensions) Kiểu MIME cho các tập tin SVF là “vector/vnd.svf”. Phần mở rộng của tập tin theo quy ước là .SVF hoặc .svf. Cú pháp cho SVF phiên bản 1.1 19