Thạc Sĩ Tìm hiểu svg và ứng dụng

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