Đang tải... (xem toàn văn)
Tài liệu tham khảo công nghệ thông tin Tìm hiểu svg và ứng dụng
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 [...]... 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... kiểm tra và các kết quả cài đặt để đảm bảo tính tương thích Các ứng dụng của SVG trong công nghiệp • Thiết bị di động Trong năm 2001, ngành công nghiệp điện thoại di động đã chọn SVG là cơ sở cho hệ nền đồ họa của mình.Nhiều công ty hàng đầu đã tham gia vào nỗ lực phát triển SVG để tạo ra tập tin đặc tả hiện trang cho bộ SVG Tiny và bộ SVG Basic SVG Tiny và SVG Basic là hai tập con của tập đặc tả SVG Hai... 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... 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ừ... hệ nền mà các ứng dụng giàu hình ảnh và các giao tiếp người dùng sẽ được xây dựng trên đó Với SVG, nhà phát triển ứng dụng sẽ quen với việc sử dụng một tập hợp các chuẩn mở Chúng không bị ràng buộc vào một cài đặt chuyên biệt nào, một nhà sản xuất nào và một công cụ soạn thảo nào SVG thích hợp cho thị trường thông dụng chuyên thiết kế đồ họa trong lĩnh vực hàng không, vận tải, xe hơi và truyền thông... liệu động SVG Print cũng tích hợp các định dạng mô tả công việc chúng chẳng hạn như PODi’s PPML và CIP4’s JDF • Các ứng dụng Web Các ứng dụng dựa trên nền đang tăng trưởng rất nhanh và phỗ biến Các nhà phát triển thường bị giới hạn bởi vấn đề không tương thích trình duyệt và thiếu các chức năng Với sự hỗ trợ mạnh mẽ của ngôn ngữ viết kịch bản (script) và hỗ trợ bắt sự kiện, SVG có thể được sử dụng dưới... đầ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... thị trường SVG Mobile được sử dụng chính cho việc gửi tin nhắn trong các ứng dụng như thiệp mừng, sơ đồ và các hoạt ảnh (ảnh chuyển động) • Ấn bản Sự kết hợp giữa các chức năng đồ họa, các hỗ trợ văn bản mang ngữ nghĩa và tính độc lập độ phân giải trong SVG đã tạo ra một định dạng thích hợp cho việc in ấn Các công ty sản xuất phần cứng in ấn hàng đầu hiện nay đang ra sức phát triển đặc tả SVG Print... ảnh và văn bản vào trong tập tin định dạng DWF Không có hoạt ảnh trong định dạng tập tin này Ngoài ra còn có một phiên bản chạy trên Java applet DWF được nhúng vào trong các sản phẩm của hãng Microsoft bằng cách sử dụng các ActiveX Control Hai ActiveX Control có thể kể đến là bộ hiển thị DWF tối ưu và bộ soạn thảo DWF dùng để xem và nhúng các tập tin DWF với đầy đủ chức năng vào trong các ứng dụng. .. trao đổi đồ họa, in ấn, ứng dụng cho thiết bị di động và thiết kế chất lượng cao SVG được xây dựng trên nhiều chuẩn thành công khác chẳng hạn như: • XML (đồ họa SVG là dạng dựa trên văn bản và do đó rất dễ tạo) • JPEG và PNG cho các định dạng ảnh • DOM cho phần viết kịch bản (script) và tương tác • SMIL cho hoạt ảnh • CSS cho việc định kiểu 30 Chương 2 Các vấn đề tổng quan SVG có khả năng tương tác . 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. 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ơ”.
