.2 Danh sách 18 thẻ của HGML

Nhĩm đầu tiên trong bảng trên gồm các thẻ dùng cho các chức năng vẽ cơ bản, cho phép tạo một lượng các ảnh ghép đơn giản mà hiệu quả.

Ví dụ:

ARC

Vẽ một cung cĩ độ rộng, chiều cao và gĩc được chỉ định so với gốc tọa

độ tuyệt đối.

<!ELEMENT ARC - O EMPTY> <!ATTLIST ARC

Đối tượng đồ họa cơ bản Chủ đề ảnh Chỉnh sửa ảnh

ARC ARROW ELLIPSE LINE LINETO LINEREL LINK ORIGIN POLYGON RECTANGLE SETSTYLE TEXT CLIPART THEME COPY FLIP PASTE ROTATE

183

cung, theo sau là độ rộng, độ cao, gĩc bắt đầu và gĩc của cung --

color %COLOR #NGẦM ĐỊNH -- màu sắc của

đường--

style %STYLE #NGẦM ĐỊNH -- kiểu của đường -- psize %PSIZE #NGẦM ĐỊNH -- độ dày của đường

-- >

2. Chủ đề / sử dụng lại hình ảnh sẵn cĩ

HGML cung cấp một số ảnh được vẽ trước để dùng trong nội dung một trang. Các ảnh này dễ sử dụng hơn nhiều với các ảnh phải định nghĩa các đối tượng đồ họa cơ bản.

Ví dụ:

CLIPART

Cho phép lấy một ảnh từ một nơi lưu trữ ngay trong máy tính và hiển thị lên ở các tọa độ xác định.

<!ELEMENT CLIPART - O EMPTY> <!ATTLIST CLIPART

name CDATA #BẮT BUỘC -- tên ảnh--

theme CDATA #NGẦM ĐỊNH -- kiểu của chủ đề--

coords %COORDS #BẮT BUỘC -- tọa độ gĩc trái-trên của ảnh--

width NUMBER #NGẦM ĐỊNH -- độ rộng của ảnh (đơn vị là ảnh điểm

(pixel)) --

height NUMBER #NGẦM ĐỊNH -- độ cao của ảnh (đơn vị là ảnh điểm

(pixel))--

href % URL #NGẦM ĐỊNH -- ảnh này đĩng vai trị là một liên kết-->

184 3. Chỉnh sửa ảnh

HGML cho phép chỉnh sửa ảnh bitmap ngay trên màn hình bằng cách sử dụng các thẻ lệnh COPY, PASTE, FLIP and ROTATE. Những thẻ này được tạo ra nhằm tối ưu hĩa việc tạo các kiểu chính của ảnh. Ví dụ, nếu một ảnh ghép được tạo bằng cách sử dụng một vài đối tượng đồ họa cơ bản thì điều này cũng được yêu cầu ở

những vị trí khác trên màn hình. Do đĩ, nĩ cĩ thể được sao chép đến vị trí mới mà khơng cần phải vẽ lại. Việc sao chép được thực hiện thơng qua bộ nhớ đệm của màn hình. Bộ hiển thị HGML sẽ đảm trách việc này.

Chức năng này cũng giúp tối ưu hĩa việc lưu trữ các ảnh chủ đề. Ví dụ, thay vì phải lưu trữ bốn ký hiệu mũi tên (sang trái, sang phải, lên, xuống), người sử dụng chỉ cần lưu trữ một ảnh đơn trong cơ sở dữ liệu. Sau đĩ dùng các thẻ lệnh ROTATE (phép xoay) và FLIP (di chuyển) để canh chỉnh chúng lại đúng vị trí.

Ví dụ:

COPY

Sao chép một phân đoạn màn hình (dạng hình chữ nhật) vào bộ nhớ đệm.

Ảnh sau khi sao chép hồn tồn giống với ảnh gốc.

<!ELEMENT COPY - O EMPTY> <!ATTLIST COPY

coords %COORDS #REQUIRED -- tọa độ gĩc trái-trên-phải- dưới của phân đoạn màn hình-- >

185

So sánh việc truyền tải đồ họa theo chuẩn HTML với truyền tải đồ họa theo chuẩn HGML

(Nguồn: www.w3.org/TR/NOTE-HGML.htm)

Chú thích: * bao gồm thời gian truyền và hiển thị/ vẽ tồn bộ trang. Tốc độ vẽ là 9600 bps (bits per second).

Ưu điểm của HGML

HGML, khi so sánh với các sử dụng đồ họa nội tuyến trong HTML, cĩ các ưu

điểm chính như sau:

• Tối ưu hĩa hiệu suất cho mạng khơng dây.

• Cửa sổ trình duyệt được xem như là một phơng nền, cho phép phủ các

lớp thành phần hình ảnh và định vị tuyệt đối trên trang (nghĩa là hình ảnh sẽ xuất hiện với “mối quan hệ chặt chẽ giữa các thành phần trong nĩ” khi thể hiện ở bất kỳ kích thước nào; đồng thời ảnh được phép cuộn, nếu cần thiết,

bên trong một cửa sổ trình duyệt tùy ý ).

• Cung cấp các ảnh được định nghĩa sẵn nhằm giúp việc xây dựng trang

được đơn giản.

• Cĩ thể được nhúng vào trong HTML hoặc được sử dụng độc lập.

(Nguồn: www.w3.org/TR/NOTE-HGML.htm)

5. DrawML

Các thành phần trong ngơn ngữ DrawML:

DrawML là một ngơn ngữ đơn giản. Nĩ chỉ định nghĩa năm thành phần.

HTML HGML

Thơng số của tập tin Tập tin HTML - 5KB

Ảnh GIF - 83KB

Tập tin HTML - 2KB Tập tin HGML - 13KB Thời gian truyền tải (qua

186 bằng thành phần này.

• Thành phần ‘shape’: một thành phần tổng quát chứa các thuộc tính của nĩ bằng một lớp Java.

• Thành phần ‘line’: vẽ một đường thẳng giữa hai hoặc nhiều vị trí.

• Thành phần ‘pos’: định nghĩa một vị trí trong một đường thẳng.

• Thành phần ‘lmward’ (viết ngược lại của ‘drawml’): thành phần chuyển đổi ngữ cảnh ngược lại vào các thành phần DTD cha.

Các khái niệm trong DrawML:

Trong DrawML cĩ các khái niệm sau:

• Nhúng

• Chỉnh kích thước tự động

• Định vị trí tự động

• Kết nối tự động

Sau đây là mơ tả chi tiết cho từng khái niệm trên:

• Nhúng

Một ảnh DrawML được nhúng trong tài liệu SGML/XML. Trong DrawML, người dùng cĩ thể chèn các đoạn, các danh sách, hình ảnh, bảng biểu.

• Chỉnh kích thước tự động

DrawML cĩ chức năng tự động chỉnh kích thước ảnh vẽ sao cho vừa khớp với nội dung bên trong nĩ.

Ví dụ:

187

• Định vị trí tự động

Bằng cách đặt các vật thể hình học bên trong các vật thể hình học khác, DrawML cĩ thể sắp thề sắp xếp và gom nhĩm một cách thơng minh. Vật thể hình học cha cĩ thể ẩn và do đĩ được sử dụng cho mục đích duy nhất là gom nhĩm. Theo mặc định, các vật thể hình học được sắp xếp theo chiều ngang.

Ví dụ:

Kích thước ban đầu của hình chữ nhật (ứng với width=100)

Kích thước hình chữ nhật sau được thay đổi tự động (để chứa được đoạn văn bản)

<shape type="rectangle"> <shape type="rectangle"> <lmward>Hello</lmward> </shape>

<shape type="rectangle"> <lmward>World</lmward> </shape>

188

• Kết nối tự động

Các đối tượng trong DrawML cĩ thể kết nối với nhau, chẳng hạn như các đối tượng trong một cây phân cấp sau:

Tất cả các đối tượng trong DrawML đều được biểu diễn bằng Java. Việc sử

dụng sức mạnh của ngơn ngữ lập trình hướng đối tượng như Java mang lại cho nhà phát triển khả năng linh động. Mỗi đối tượng được xem là một thể hiện của một lớp. Việc hiển thị các đối tượng chính là một lời gọi đến phương thức hiển thị của đối

189

Đoạn mã này biểu diễn hình sau:

public void DrawShape() {

Painter.NewPath(); // Clear painter Painter.MoveTo( 0, 10 );

Painter.LineTo( MyW()/2, 0 ); Painter.LineTo( MyW(), 10 ); Painter.ClosePath();

Painter.Stroke(); // Draw roof Painter.NewPath();

Painter.MoveTo( 7, 10 );

Painter.LineTo( MyW() - 7, 10 ); Painter.LineTo( MyW() - 7, MyH() ); Painter.LineTo( 7, MyH() );

Painter.ClosePath();

190

Phụ lục B Kết quả cài đặt

Để chạy được server phát sinh bản đồ cần: cài đặt jdk1.4.2, cài đặt

Geoserver1.3 và thêm dữ liệu bản đồ thành phố vào Geoserver, cài đặt MySQL và thêm dữ liệu đường đi, cài đặt SQL server và thêm dữ liệu tên đường vào vì hiện tại server phát sinh bản đồ SVG dựa vào: tài liệu GML trả về từ Geoserver mà

Geoserver lại sử dụng dữ liệu đường đi từ MySQL server, và kết hợp với dữ liệu tên

đường đi từ SQL server.

Chép tịan bộ chương trình GenerateSVGMap vào Inetpub\wwwroot\ sau đĩ trên trình duyệt gõ câu truy vấn sau vào textbox nhập URL:

http://localhost/GenerateSVGMap/BanDoPhatSinh.aspx?serveraddress=http://l ocalhost:8080/geoserver/wfs?&bbox=16.829529,0,13184.242787,10755.848151&fi lterproperty=&layers=topp:Truongcap3,topp:benhvien3,topp:mapnetwoarc_auto&m axfeatures=&version=&crs=&method=&format=GML2&width=700&height=571.0 7&

191

Hình B1. Bản đồ SVG được phát sinh bởi GenerateSVGMap

Để chạy client cần chép tồn bộ thư mục UngDung_Client vào

Inetpub\wwwroot\ sau đĩ mở tập tinh index.html. Màn hình ứng dụng:

192

Hình B2. Bản đồ SVG được hiển thị trong chương trình client

Muốn phĩng to hay thu nhỏ tạm thởi dùng các khả năng của Adobe SVG Viewer 6.0.

Rê chuột vào các đối tượng để xem chú thích thơng tin chi tiết của đối tượng

193

1. Chung Hiếu Nghĩa, Nguyễn Ngọc Thuận, Luận văn cử nhân tin học - Xây

dựng hệ tra cứu thơng tin bản đồ trên web, 2001.

2. Nhĩm tác giả Elicom, Ngơn ngữ HTML 4 cho World Wide Web, NXB Hà Nội, 2000.

3. Phạm Hữu Khang, Xây dựng và triển khai ứng dụng thương mại điện tử, Tập 2, NXB Thống Kê, 2003.

4. Dương Anh Đức, “Thuật tốn Dijkstra”, Giáo trình Lý thuyết đồ thị, tr.38-42, 2004.

5. Dương Anh Đức và Lê Đình Duy, “Các phép biến đổi trong đồ họa hai chiều”, Bài giảng đồ họa máy tính, tr.63-79, 2002.

6. ESRI Shapefile Technical Description, 1998.

7. http://www.w3.org/TR/2003/REC-SVG11-20030114/ 8. http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113 9. www.kevlindev.com 10. www.learnsvg.com 11. www.w3school.com 12. www.carto.net 13. www.inkscape.org

.1 Luồng cơng việc của VML và HTML

.3 Các thành phần của PDF