Tìm hiểu svg và ứng dụng

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.38 MB, 195 trang )

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

x

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

xi

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

xii

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

xiii

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

Chương 1. Mở đầu
14

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 ( />).
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

Chương 1. Mở đầu
15

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.

Chương 2. Các vấn đề tổng quan
16

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

Chương 2. Các vấn đề tổng quan
17

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ụ

Chương 2. Các vấn đề tổng quan
18

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

Chương 2. Các vấn đề tổng quan
19

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

Chương 2. Các vấn đề tổng quan
20

(Xin vui lòng xem phụ lục A mục 1 để biết thêm về phần này)
(Nguồn: />)

2.1.2.2 DWF
DWF (Drawing Web Format) là một định dạng tập tin mở của hãng Autodesk,
được sử dụng kèm với plugin WHIP4 của AutoDesk. Đây là một trong một vài
plugin sử dụng Javascript. Tập tin theo định dạng DWF được tạo từ các tập tin định
dạng DWG. Các chức năng của định dạng DWF gồm có: kéo (pan), phóng to và thu
nhỏ không bị giật hình (smooth zoom), cửa sổ phóng to thu nhỏ (zoom window),
phóng to thu nhỏ trên một khung nhìn được định nghĩa trước, xếp lớp bên trong và
bên ngoài, và hiển th
ị các siêu liên kết. Người dùng có thể chèn ả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 của Microsoft. Hai ActiveX Control này sẽ t
ăng
cường khả năng chia sẻ và hiển thị các thiết kế bằng cách nhúng các tập tin DWF
vào trong các tài liệu Internet Explorer, PowerPoint, Word, hoặc Excel kèm theo
đầy đủ chức năng kéo, phóng to thu nhỏ và các chức năng khác. Các tập tin DWF
máy chủ (host DWF files) trên các web site có nhiệm vụ chia sẻ các sơ đồ, bản đồ
và các danh mục thành phần (component category) (trong các bản vẽ của các kiến
trúc sư).
Hãng Autodesk cung cấp bộ hiển thị DWF (DWF Viewer) và các hàm giao
diện lập trình ứng dụng soạn thảo DWF (DWF Viewer và DWF Composer APIs).
Các tài li
ệu hướng dẫn đi kèm với hai công cụ này sẽ giúp người dùng tùy biến bộ
hiển thị DWF, bộ soạn thảo DWF bên trong các web site và các ứng dụng của hãng
thứ ba. Các tài liệu này cung cấp chỉ dẫn cho các chức năng như định vị đến một

Chương 2. Các vấn đề tổng quan
21

trang chỉ định, hoặc xem và điều khiển sự xuất hiện của các lớp, hoặc điều khiển
khả năng ẩn, hiện thanh công cụ và các menu ngữ cảnh, cũng như tùy biến các ứng
xử của bộ hiển thị.

Người dùng có thể tải bộ hiển thị DWF (DWF Viewer) và các giao diện lập
trình ứng dụng soạn thảo DWF (DWF Viewer và DWF Composer APIs) từ trang
địa chỉ

(Nguồn:
)

2.1.2.3 Flash (còn gọi là SWF)
Định dạng tập tin Macromedia Flash (SWF) (đọc là “swiff”) được dùng để
truyền tải đồ họa véc-tơ và hoạt ảnh qua mạng Internet. Định dạng tập tin SWF
được thiết kế để trở thành một định dạng truyền tải hiệu quả, chứ không nhắm vào
mục đích trao đổi hình ảnh giữa các bộ soạn thảo đồ họa.
Hiện nay, Flash là định dạng véc-tơ tương tác được s
ử dụng rộng rãi nhất. Nó
đóng vai trò là một plugin Macromedia bên trong trình duyệt. Theo quan điểm của
lĩnh vực bản đồ, đây là chuẩn cập nhật nhất cho việc hiển thị véc-tơ. Flash vẫn chưa
trở thành chuẩn chính thức cho véc-tơ, và trong một thời gian dài tài liệu lập trình
vẫn rất nghèo nàn. Nó là một định dạng nhị phân và độc quyền nên người sử dụng
đòi hỏi phải có mã nguồn mở
. Mặc dù vậy, do định dạng này được tạo ra để đáp
ứng nhu cầu của cộng đồng và giới công nghiệp nên nó đã tăng trưởng rất nhanh.
Trong đầu năm 2000, gần 70% trình duyệt đã hỗ trợ định dạng này mà không cần
phải cài đặt phụ trợ (không cần dùng plugin).
Flash không chỉ có khả năng hiển thị đồ họa véc-tơ. Các đoạn phim và nhạc có
thể được tích hợp ho
ặc phát sinh một cách dễ dàng. Đồ họa của Flash có thể được
xuất ra Macromedia Freehand, Adobe Illustrator hoặc CorelDRAW, đồng thời cũng
có thể được chỉnh sửa bằng trình soạn thảo Macromedia Flash. Có rất nhiều hàm để
tạo hoạt ảnh, tích hợp các hiệu ứng đồ họa đặc biệt. Nhiều ứng dụng đẹp mắt đã

chứng tỏ Flash là một công cụ web linh hoạt, chẳng hạn như cho phép tải d
ữ liệu
lên mạng liên tục (một trang có thể được hiển thị thậm chí trước khi toàn bộ tập tin

Chương 2. Các vấn đề tổng quan
22

được tải về). Hiện nay Flash gặp rất nhiều vấn đề đối với bản đồ khi tích hợp dữ
liệu bên ngoài và khi chỉnh sửa hoặc tạo các chức năng cần thiết riêng của người
dùng. Các giao tiếp đang được phát triển thêm, nhưng chúng không bao giờ trở
thành chuẩn quốc tế bởi vì Flash đang là sở hữu độc quyền của hãng Macromedia.
Xin vui lòng xem phụ lục A mục 2 để biết thêm chi ti
ết về các phần sau đây:
• Các mục tiêu thiết kế dành cho SWF
• Cấu trúc của tập tin Flash
• Tối ưu hóa kích thước tập tin SWF
• Nội dung bên trong một tập tin SWF
2.1.2.4 PGML
Precision Graphics Markup Language (PGML)
PGML (Precision Graphics Markup Language) là ngôn ngữ đánh dấu đồ họa
chính xác. Đây là một tập các đặc tả định dạng véc-tơ độc quyền hai chiều dựa trên
văn bản. Nó được thiết kế để đáp ứ

ng cả hai nhu cầu đồ họa véc-tơ của người dùng
thông thường và nhu cầu về độ chính xác của các họa sĩ. Đặc tả này được hãng
Adobe đưa ra từ nền tảng của của PostScript and PDF. Nó được phát sinh thông qua
sự chuyển đổi không liên quan đến PDF. Nó thỏa mãn các yêu cầu nghiêm ngặt và
cung cấp các chức năng tương tác ở cấp cao.
PGML cũng chứa những tính năng phụ trợ để thỏa mãn nhu cầu của các ứ
ng
dụng Web. Nhu cầu về độ chính xác của các họa sĩ được hiểu là các thiết kế đồ họa
xuất hiện trên hệ thống của người dùng cuối phải có đúng với phông chữ, màu sắc,
trình bày và các mối kết hợp mà họ muốn.
Ảnh dạng PGML chứa một tập hợp gồm một hoặc nhiều đối tượng đồ họa
(các đối tượng đường, đối t
ượng hình học, đối tượng hình ảnh và đối tượng văn
bản). Sự xuất hiện trực quan của một đối tượng khi nó được vẽ sẽ được xác định
từng phần bằng một dãy các tham số. Ví dụ, một đối tượng đường sẽ được tô bằng
một màu xác định, còn một đối tượng văn bản sẽ được vẽ bằng cách sử dụng một

Chương 2. Các vấn đề tổng quan
23

phông xác định. Tập hợp các tham số như vậy được gọi là trạng thái đồ họa. PGML
cung cấp các phương thức để chỉ định các đối tượng, và để xác định các tham số

trong trạng thái đồ họa khi các đối tượng này được vẽ.
Cấu trúc của một tập tin PGML không có nội dung:

2.1.2.5 WebCGM
CGM (Computer Graphics Metafile = Siêu tập tin Đồ họa máy tính) đã trở
thành một chuẩn ISO (ISO/IEC 8632:1999) cho các định nghĩa véc-tơ và đị
nh nghĩa
ảnh véc-tơ/ảnh quét từ năm 1987. CGM được thiết kế để đáp ứng nhu cầu của đồ
họa véc-tơ hai chiều. CGM gây được sự chú ý mạnh trong việc minh họa tài liệu kỹ
thuật và tài liệu điện tử tương tác, trực quan hóa dữ liệu địa lý, và trong những lĩnh
vực ứng dụng khác. Nó còn được sử dụng rộng rãi trong lĩnh vực sản xuất ô-tô, máy
bay và công nghi
ệp quốc phòng.
Bản mô tả CGM là một tập con của chuẩn ISO, và cũng là một tập các đặc tả
hướng đến việc ứng dụng một cách hiệu quả tiêu chuẩn ISO vào việc biểu diễn nội
dung đồ họa hai chiều bên trong tài liệu Web. WebCGM là một bản mô tả cho cách
ứng dụng hiệu quả CGM vào trong các tài liệu điện tử Web. WebCGM là một nỗ
lực hợp tác giữa nghiệp đoàn CGM vớ
i đội ngũ W3C, đồng thời cũng được hỗ trợ
từ dự án European Commission Esprit. Nó đóng vai trò như một sự thống nhất quan
trọng giữa phần lớn người sử dụng và người bổ sung đặc tả cho CGM. Do đó nó
hợp nhất các xu hướng đang rời rạc tại thời điểm đó bằng cách tận dụng CGM trong
các ứng dụng tài liệu Web. Các yêu cầu thích ứng rõ ràng và không nhập nh
ằng của
WebCGM sẽ mở rộng khả năng tương tác của các cài đặt. Do đó, điều này có thể
<?xml version="1.0"?>

<!DOCTYPE pgml SYSTEM "pgml.dtd">
<pgml>

</pgml>

Chương 2. Các vấn đề tổng quan
24

tạo ra những công cụ kiểm định CGM sẵn có, các bộ kiểm tra, và các dịch vụ kiểm
tra chứng thực sản phẩm cho các ứng dụng WebCGM.
WebCGM đã được đăng ký là một kiểu đa phương tiện (“image/cgm”) trên
Internet và World Wide Web từ tháng 12 năm 1995. Kiểu MIME (Multipurpose
Internet Mail Extensions) đúng cho WebCGM là:

Mặc dù WebCGM là một định dạng tập tin nhị phân và không thể định kiểu,
nó vẫn tuân theo các yêu cầu mà W3C đã công bố cho một định dạng đồ h
ọa khả co
ở nhưng nơi mà nó có thể được áp dụng. Tiêu chuẩn thiết kế nội dung đồ họa của
WebCGM là nhắm đến sự cân bằng giữa năng lực hiển thị đồ họa và tính đơn giản,
khả năng bổ sung được các định dạng mới vào WebCGM. Một tập nhỏ nhưng mạnh
gồm các thành phần siêu dữ liệu đã được chuẩn hóa trong WebCGM. Do đó
WebCGM hỗ

trợ các chức năng như: siêu liên kết và định vị tài liệu, cấu trúc hóa và
phân lớp hình ảnh, tìm kiếm và truy vấn trên nội dung hình ảnh WebCGM.
Các bộ hiển thị và soạn thảo cho CGM đều có thể chạy được trên nhiều hệ
nền khác nhau và đang được chỉnh sửa lại cho phù hợp với đặc tả WebCGM.
2.1.2.6 VML
VML (Vector Markup Language) là ngôn ngữ đánh dấu đồ họa. Nó là một
định dạng véc-tơ hai chiều dựa vă
n bản, đồng thời cũng là định dạng độc quyền của
hãng Microsoft.
Nó đã được tích hợp vào Internet Explorer, nhưng từ tháng 9/1998 nó không
còn được Microsoft tập trung phát triển nữa. PGML là khởi đầu của một cú pháp
hấp dẫn, nhưng thiếu khả năng mở rộng. Trước khi SVG ra đời, PGML là một xu
hướng đầy hứa hẹn, nhưng bị giới hạn sử dụng trong một hệ nền duy nhất là
Windows.
VML là một phần áp dụng của XML 1.0 (XML = Extensible Markup
Language = ngôn ngữ đánh dấu có thể mở rộng). Nó định nghĩa một định dạng cho
image/cgm;Version=4;ProfileId=WebCGM

Tìm hiểu svg và ứng dụng

Trích đoạn

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về