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

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.10Thành phần ‘image’: ………………………………………………………………………….. 74

3.11Cá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.12Hệ 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.15Thà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.16Thành phần ‘text’…………………………………………………………………………….. 122

3.16.1 Giới thiệu ………………………………………………………………………………… 122

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.17Vẽ 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.18Khả 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.19Viế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

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