TÌM HIỂU SVG VÀ ỨNG DỤNG - 8 potx

Chương 3. Cấu trúc định dạng tập tin SVG
140

• ‘set’: hình thức tốc kí thuận tiện cho ‘animate’, rất hữu ích trong việc
chỉ định các giá trị thuộc tính không phải dạng số cho các thuộc tính,
chẳng hạn như thuộc tính ‘visibility’.
• ‘animateMotion’: dịch chuyển một thành phần dọc theo một đường.
• ‘animateColor’: thay đổi giá trị màu của các thuộc tính đặc biệt theo
thời gian.
Ngoài ra, SVG bổ sung thêm các mở rộng tương thích với SMIL Animation:
• ‘animateTransform’: thay đổi giá trị c
ủa một trong các thuộc tính của
phép biến đổi trong SVG theo thời gian, chẳng hạn như thuộc tính
‘transform’.
• Thuộc tính ‘path’: SVG cho phép bất kỳ tính năng nào của cú pháp dữ
liệu đường của SVG được chỉ định trong thuộc tính ‘path’ của thành
phần ‘animateMotion’ (SMIL Animtion chỉ cho phép một tập con cú
pháp dữ liệu đường trong thuộc tính ‘path’).
• Thành phần ‘mpath’: SVG cho phép một thành phần
‘animateMotion’ chứa một thành phần con ‘mpath’, tham chiếu đến
một thành phần ‘path’
để định nghĩa một đường di chuyển.
• Thuộc tính ‘keyPoint’: SVG bổ sung thuộc tính ‘keyPoint’ cho thành

phần ‘animateMotion’ cung cấp khả năng điều khiển chính xác về tốc
độ của ảnh động trên đường di chuyển.
• Thuộc tính ‘rotate’: SVG bổ sung thuộc tính ‘rotate’ cho thành phần
‘animateMotion’ để điều khiển một đối tượng tự động quay sao cho
trục x (x-axis) cùng hướng (hoặc ngược hướng) với vec-tơ tiếp tuy
ến
của đường di chuyển.








Chương 3. Cấu trúc định dạng tập tin SVG
141

Để tương thích với các khía cạnh khác của ngôn ngữ, SVG dùng tham chiếu
URI thông qua thuộc tính ‘xlink:href’ để xác định các thành phần là đích của hoạt
ảnh.
SMIL Animation yêu cầu “ngôn ngữ chủ” phải định nghĩa đầy đủ ý nghĩa cho
“thời điểm bắt đầu tài liệu” (document start) và “thời điểm kết thúc tài liệu”
(document end). Bởi vì một thành phần ‘svg’ đôi khi là gốc của cây tài liệu XML và
đôi khi cũng là một thành phần của văn ph
ạm XML, nên “thời điểm bắt đầu tài
liệu” của một phân đoạn tài liệu SVG cho trước sẽ được định nghĩa là thời gian
ngay lúc sự kiện ‘SVGLoad’ của thành phần ‘svg’ được kích hoạt. “Thời điểm kết
thúc tài liệu” của phân đoạn tài liệu SVG là thời điểm mà phân đoạn tài liệu giải
phóng và không còn được xử lý bởi tác nhân người dùng. Tuy nhiên, các thành

phần ‘svg’ được lồng trong một tài li
ệu SVG sẽ không tạo thành phân đoạn tài liệu
trong ngữ cảnh này, không định nghĩa một “thời điểm bắt đầu tài liệu” riêng. Tất cả
các giá trị thời gian trong phân đoạn tài liệu SVG lồng được tính toán một cách
tương đối với thời gian tài liệu của thành phần ‘svg’ gốc.
Trong SVG, thuật ngữ thời gian trình diễn (presentation time) chỉ định một vị
trí trên thước đo thời gian tương đối so v
ới “thời điểm bắt đầu tài liệu” của phân
đoạn tài liệu được cho.
3.18.3 Ví dụ ảnh động:
Ví dụ minh họa một tam giác di chuyển dọc theo một đường di chuyển
(motion path).
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="5cm" height="3cm" viewBox="0 0 500 300"
xmlns=" version="1.1"
xmlns:xlink=" >
<desc>Example animMotion01 - demonstrate motion animation
computations</desc>
<rect x="1" y="1" width="498" height="298"
fill="none" stroke="blue" stroke-width="2" />
<! Draw the outline of the motion path in blue, along

Chương 3. Cấu trúc định dạng tập tin SVG
142

with three small circles at the start, middle and
end. >
<path id="path1" d="M100,250 C 100,50 400,50 400,250"
fill="none" stroke="blue" stroke-width="7.06" />
<circle cx="100" cy="250" r="17.64" fill="blue" />
<circle cx="250" cy="100" r="17.64" fill="blue" />
<circle cx="400" cy="250" r="17.64" fill="blue" />
<! Here is a triangle which will be moved about the
motion path.
It is defined with an upright orientation with the
base of
the triangle centered horizontally just above the
origin. >
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
fill="yellow" stroke="red" stroke-width="7.06" >
<! Define the motion path animation >
<animateMotion dur="6s" repeatCount="indefinite"
rotate="auto" >
<mpath xlink:href="#path1"/>
</animateMotion>
</path>
</svg>

Kết quả trên trình duyệt tại thời điểm 0s, 3s, 6s:
3.19 Viết script (kịch bản)
3.19.1 Chỉ định ngôn ngữ viết script

3.19.1.1 Chỉ định ngôn ngữ viết script mặc định
Thuộc tính ‘contentScriptType’ trên thành phần ‘svg’ chỉ định ngôn ngữ viết
script mặc định cho phân đoạn tài liệu cho trước.
• contentScriptType = “content-type”
Hình 3.37. Minh họa thành phần ảnh động animateMotion








Chương 3. Cấu trúc định dạng tập tin SVG
143

Xác định kiểu ngôn ngữ viết script mặc định cho tài liệu cho trước.
Thuộc tính này thiết lập ngôn ngữ viết script được dùng để xử lý các
“chuỗi giá trị trong thuộc tính sự kiện (event attributes)”. Giá trị
content-type chỉ định một kiểu phương tiện (media type). Giá trị mặc
định là “text/ecmascript” (tại thời điểm công bố, “text/ecmascript”
chưa được đăng kí là một loại phương tiện cho ECMAScript ). Giá trị
này sẽ là giá trị mặc
định cho tới khi có một giá trị thay thế khác được
đăng kí.
3.19.1.2 Khai báo cục bộ ngôn ngữ viết script
Chúng ta có thể chỉ định ngôn ngữ đặc tả cho mỗi thành phần ‘script’ riêng
biệt bằng thuộc tính ‘type’ trên thành phần ‘script’.
3.19.2 Thành phần ‘script’
Thành phần ‘script’ tương đương với thành phần ‘script’ trong ngôn ngữ đánh

dấu siêu văn bản HTML. Đây là nơi viết script (bằng ngôn ngữ ECMAScript). Bất
kỳ hàm nào được định nghĩa trong thành phần ‘script’ đều có phạm vi toàn c
ục cho
toàn bộ tài liệu hiện tại. Bằng cách kết hợp ngôn ngữ ECMAScript và SVG DOM,
chúng ta có thể truy cập đến tất cả các thành phần SVG trong tài liệu, như thêm, xóa
các thành phần trong cây tài liệu, chỉnh sửa thuộc tính… để làm cho tài liệu SVG có
thể tương tác với người dùng.
Ví dụ 1
:
Ví dụ sau định nghĩa một hàm circle_click được triệu gọi bởi thuộc tính sự
kiện ‘onclick’ trên thành phần ‘circle’. Khi nhấp chuột lên hình tròn, hình tròn thay
đổi bán kính. Hình bên trái dưới đây là hình ảnh ban đầu. Hình bên phải minh họa
kết quả sau khi nhấp chuột lên hình tròn.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="6cm" height="5cm" viewBox="0 0 600 500"








Chương 3. Cấu trúc định dạng tập tin SVG
144

xmlns=" version="1.1">
<desc>Example script01 - invoke an ECMAScript function

from an onclick event
</desc>
<! ECMAScript to change the radius with each click >
<script type="text/ecmascript"> <![CDATA[
function circle_click(evt) {
var circle = evt.target;
var currentRadius = circle.getAttribute("r");
if (currentRadius == 100)
circle.setAttribute("r", currentRadius*2);
else
circle.setAttribute("r", currentRadius*0.5);
}
]]> </script>
<! Outline the drawing area with a blue line >
<rect x="1" y="1" width="598" height="498" fill="none"
stroke="blue"/>
<! Act on each click event >
<circle onclick="circle_click(evt)" cx="300" cy="225"
r="100"
fill="red"/>
<text x="300" y="480"
font-family="Verdana" font-size="35" text-
anchor="middle">
Click on circle to change its size
</text>
</svg>
Kết quả trước và sau khi nhấp chuột lên hình tròn trên trình duyệt:

Một số thuộc tính của thành phần ‘script’:
• type= “content-type”

Hình 3.38. Minh họa chức năng bắt sự kiện chuột








Chương 3. Cấu trúc định dạng tập tin SVG
145

Chỉ định ngôn ngữ viết script cho thành phần ‘script’ được cho. Giá
trị content-type chỉ định một loại phương tiện.
Script có thể được nhúng vào tài liệu SVG trong thành phần ‘script’ như ví dụ
trên, hoặc cũng có thể nằm trong một tập tin script (*.js) được liên kết vào trong tài
liệu như sau:
Tập tin “createnode.js” chứa đoạn script sau:
function pinta()
{
var circleNode =
svgDocument.createElement("circle");
circleNode.setAttribute("cx", 300*Math.random());
circleNode.setAttribute("cy", 300*Math.random());
circleNode.setAttribute("r", 30);
circleNode.setAttribute("style", "stroke: none; " +
"opacity: 0.3; " +
"fill: rgb(" + 255*Math.random() + ","
+

255*Math.random() + "," +
255*Math.random() + ");");
setTimeout("window.pinta()", 300);/*sau 0.3s gọi
pinta() này một lần*/

document.getElementById("dr").appendChild(circleNode);
}
Nội dung SVG tham chiếu tới tập tin SVG trên thông qua thuộc tính
‘xlink:href’ :
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
" />20010904/DTD/svg10.dtd ">
<svg width="300" height="300" onload="pinta()">
<script type="text/ecmascript"
xlink:href="createnode.js">
</script>
<g id="dr" />
</svg>









Chương 3. Cấu trúc định dạng tập tin SVG
146

Kết quả trên trình duyệt sau một thời gian:
Hình 3.39. Minh họa bộ timer và thuộc tính mờ ‘opaque’
3.19.3 Quản lý sự kiện
Các sự kiện chính là nguyên nhân kích hoạt script.
• Các thuộc tính sự kiện (event attribute) như “onclick” hay “onload”
được gắn vào một thành phần SVG cụ thể, các thuộc tính này chứa
phần script sẽ được thực thi khi các sự kiện xảy ra.
• Bộ lắng nghe sự kiện (event listener), được mô tả trong “Document
Object Events” (sự kiện mô hình đối tượng tài li
ệu – DOM2-EVENTS),
được định nghĩa sẽ được triệu gọi khi một sự kiện (tương ứng với sự
kiện được cho) xảy ra trên đối tượng được cho.
3.19.4 Thuộc tính sự kiện
Các thuộc tính sự kiện có sẵn trên nhiều thành phần SVG.
Sau đây là danh sách các thuộc tính sự kiện trên các thành phần đồ họa và vật
chứa của ngôn ngữ SVG :
• onfocusin








Chương 3. Cấu trúc định dạng tập tin SVG
147

• onfocusout
• onactivate

• onclick
• onmousedown
• onmouseup
• onmouseover
• onmousemove
• onmouseout
• onload
Các thuộc tính sự kiện cấp tài liệu:
• onunload
• onabort
• onerror
• onresize
• onscroll
• onzoom
Các thuộc tính sự kiện ảnh động :
• onbegin
• onend
• onrepeat
• onload








Chương 3. Cấu trúc định dạng tập tin SVG
148

3.19.5 ECMAScript và DOM
Phần này mô tả một số thao tác cơ bản trên cây tài liệu SVG độc lập kết hợp
ECMAScript và DOM.
3.19.5.1 Lấy đối tượng tài liệu

function init(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
}

3.19.5.2 Lấy thành phần gốc

svgRoot = svgDocument.documentElement;

3.19.5.3 Tạo một node trong cây tài liệu
Hàm sau dùng để tạo một thành phần ‘circle’

var svgns = "

function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;

var shape = svgDocument.createElementNS(svgns,
"circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r", 20);
shape.setAttributeNS(null, "fill", "green");

svgDocument.documentElement.appendChild(shape);
}









Chương 3. Cấu trúc định dạng tập tin SVG
149

3.19.5.4 Xóa một thành phần ra khỏi thành phần cha của nó

function RemoveTaget(parentElement,targetElement)
{
parentElement.removeChild(targetElement);
};

3.19.5.5 Thiết lập thuộc tính sự kiện

<rect x="5" y="5" width="40" height="40" fill="red"
onclick="changeColor(evt)"/>

function changeColor(evt) {
var target = evt.target;

target.setAttributeNS(null, "fill", "purple");

}

3.19.5.6 Thiết lập bộ lắng nghe sự kiện

var svgns = "

function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;

var rect = svgDocument.createElementNS(svgns,
"rect");
rect.setAttributeNS(null, "x", 5);
rect.setAttributeNS(null, "y", 5);
rect.setAttributeNS(null, "width", 40);
rect.setAttributeNS(null, "height", 40);
rect.setAttributeNS(null, "fill", "green");

rect.addEventListener("click", changeColor,








Chương 3. Cấu trúc định dạng tập tin SVG
150

false);

svgDocument.documentElement.appendChild(rect);
}

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



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
4.1 Các kĩ thuật và công nghệ
4.2 WMS
Theo đặc tả của tổ chức OGC (Open Geospatial Consortium), WMS (Web
Map Service) là một dịch vụ bản đồ Web . Nó phải có các khả năng sau:
1. Tạo bản đồ (là một ảnh , một chuỗi các thành phần ảnh, hay một tập gói
dữ liệu tính năng địa lý)
2. Đáp ứng được các yêu cầu căn bản đối với nội dung của bản đồ,
3. Có khả năng cung cấp thông tin cho các chương trình khác biết v
ề các
loại bản đồ nó có thể tạo được và loại nào trong số đó có thể được truy
vấn sâu hơn.
Một WMS client là một ứng dụng hay một trình duyệt có thể gửi yêu cầu một
WMS server như sau:
1. Để tạo bản đồ, các tham số URL cần chỉ định trong câu truy vấn : khu
vực cần vẽ, hệ trục tọa độ được dùng, loại thông tin hiển thị, định dạng
trả về, kích thước trả về, kiểu hiển thị, và các tham số khác.
2. Để yêu cầu nội dung bản đồ, các tham số URL cần chỉ rõ bản đồ được
yêu cầu và vị trí được quan tâm trên bản đồ.
3. Đề yêu cầu về khả năng của WMS server, các tham số cần chỉ rõ phải
chứa loại yêu cầu “capabilities”.

Theo đặc tả WMS, một dịch vụ bản đồ web phải cài đặ
t các tác vụ sau:








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
152

1. GetCapabilities (bắt buộc phải có): cung cấp thông tin về khả năng của
WMS cho client.
2. GetMap (yêu cầu): cung cấp bản đồ địa lý phát sinh từ dữ liệu địa lý
theo yêu cầu của client.
3. GetFeatureInfo (tùy chọn): cung cấp thông tin một vị trí địa lý trên bản
đồ mà client yêu cầu.
4.3 WFS
Theo đặc tả của OGC, WMS cho phép một client có thể nạp đè hình ảnh từ
nhiều WMS trên Internet để hiển thị. Trong khi đó, WFS là một dịch vụ tính năng
web cho phép một client có thể truy xuất và cập nhật dữ liệu địa lý được mã hoá
bằng ngôn ngữ đánh dấu thông tin địa lý GML từ nhiều dịch vụ tính năng web
WFS. Để biết thêm về GML xin tham khảo đặc tả GML tại:
/>.

Hình 4.1. Mô hình kiến trúc giao tiếp giữa client và WFS.
Một WFS phải cài đặt các chức năng sau:
1. GetCapabilities : Mỗi WFS phải có khả năng mô tả các khả năng của

mình. Cụ thể, một WFS phải chỉ rõ được loại tính năng nó có thể cung
cấp và các tác vụ được hỗ trợ trên mỗi loại tính năng này.








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
153

2. DescribleFeatureType: Mỗi WFS phải có khả năng mô tả cấu trúc của
mỗi loại tính năng mà nó có thể cung cấp.
3. GetFeature: Mỗi WFS phải có khả năng xử lý các yêu cầu truy xuất các
tính năng có thể kèm theo các ràng buộc được chỉ định trong câu truy
vấn từ phía client.
4. GetGmlObject (tùy chọn): Mỗi WFS có thể xử lý các yêu cầu truy xuất
các thành phần bằng cách lần theo các liên kết (Xlinks) tham chiếu tới
XML IDS của thành phần đó. Một client có th
ể chỉ định có các XLinks
được nhúng lồng trong dữ liệu thành phần nhận được từ WFS hay
không.
5. Transaction: Mỗi WFS có thể xử lý các yêu cầu tác vụ giao dịch. Một
yêu cầu giao dịch có thể có nhiều tác vụ, như các tác vụ tạo, cập nhật,
và xóa trên các tính năng địa lý.
6. LockFeature: Mỗi WFS có thể xử lý các yêu cầu khoá một hay nhiều
thể hiện của mỗi loại tính năng trong suốt quá trình giao dịch. Điề
u này

đảm bảo các giao dịch được thực hiện theo trình tự không gây xung đột,
sai lệch dữ liệu.
Dựa trên các khả năng một WFS có thể cung cấp, ba loại WFS được định
nghĩa như sau:
1. WFS căn bản (Basic WFS) : WFS này là một dịch vụ tính năng chỉ đọc,
được cài đặt các khả năng GetCapabilities, DescribeFeatureType và
GetFeature.
2. XLinkWFS : Ngoài các khả năng của WFS căn bản, loại WFS này còn
hỗ trợ khả năng GetGmlObject.
3.
WFS giao dịch (Transaction WFS) : Ngoài khả năng của một WFS cơ
bản, nó phải cài đặt các tác vụ giao dịch và có thể có khả năng
GetGmlObject và LockFeature.








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
154

4.4 GEOSERVER
Geoserver là một dịch vụ web viết bằng Java được xây dựng dựa trên đặc tả
WFS và WMS do OGC đưa ra. Geoserver là một chương trình mã nguồn mở dưới
giấy phép của GPL 2.0. Nó là sản phẩm được tạo bởi một đội ngũ toàn cầu các tổ
chức và nhà phát triển tự do. Geoserver là một WFS giao dịch. Nó có tất cả các khả
năng GetCapabilities, DescribeFeatures, GetFeatures, Transaction. Hiện tại đã có

Geoserver-1.3. Mỗi phiên bản của Geoserver có hai bộ để cài đặt, một là t
ập tin
.WAR và một là tập tin .EXE. Để có thể chạy được Geoserver cần phải cài bộ
JDK1.4 (java virtualmachine) . Trong phạm vi chương trình ứng chúng em sử dụng
Geosever-1.3.exe.
Có một đặc điểm mới của Geoserver là phát sinh bản đồ SVG nhưng chưa có
định kiểu. Dữ liệu thông tin địa lý được sử dụng cho Geoserver lấy từ ShapeFile,
Oracle Spatial, ArcSDE. Geoserver được xây dựng trên thiết kế phân tầng như sau
sơ đồ sau:



















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
155

Hình 4.2. Sơ đồ phân tầng của GeoServer
4.5 Kiến trúc ứng dụng
Chương trình bản đồ điện tử thành phố và hỗ trợ tìm đường đi được xây dựng
theo kiến trúc client-server. Cho phép người dùng xem bản đồ một cách mềm dẻo
và tiện lợi, cho phép người có thể phóng to thu nhỏ bản đồ, cho phép người dùng
tìm đường đi ngắn nhất và tra cứu thông tin đường đi.












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
156

Hình 4.3. Sơ đồ kiến trúc ứng dụng
4.6 Client-side
Client là nơi dùng để hiển thị, giao tiếp, và tương tác với người dùng. Bằng
các đoạn script, client có thể nhận và xử lý một số tương tác ngay tại client như thao
tác chọn vùng bản đồ quan tâm, chọn điểm đầu, điểm cuối khi tìm đường đi được
tính toán và kiểm tra giá trị trước khi yêu cầu server xử lý sẽ làm thiểu bớt những
xử lý không cần thiết phải làm phiền đến server.
Client là nơ

i hiển thị bản đồ, bản đồ là một nội dung SVG nên cần phải có
chương trình plug-in để hiển thị, đó là SVGViewer.
4.7 Server- side
Server là nơi nhận và xử lý các yêu cầu của client. Các yêu cầu đó là : getMap
(lấy bản đồ) theo một số ràng buộc về vùng bản đồ cần lấy, số tính năng cần lấy…,
và getBestPath (tìm đường đi ngắn nhất)….Server sử dụng dịch vụ của GeoServer
để tạo bản đồ và tra cứu thông tin của đối tượng địa lý. Server không dùng bản đồ
SVG của GeoServer phát sinh vì nội dung SVG được phát sinh còn nghèo nàn về
cách trình diễn và tương tác v
ới người dùng, Server sẽ nhận dữ liệu GML trả về của
Geoserver để tạo bản đồ SVG trả về cho Client. Để tìm đường đi ngắn nhất server
sử dụng dịch vụ tìm đường đi ngắn nhất để phận chia công việc với server tạo bản








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
157

đồ. Điều này sẽ làm cho công việc được sang sẻ và xử lý song song làm giảm được
thời gian đợi cho client. Dịch vụ tìm đường đi dùng dữ liệu topo để tìm đường đi
ngắn nhất vừa nhanh vừa dễ xây dựng.
Môi trường cài đặt server là Visual Studio.Net ngôn ngữ sử dụng là C#.

Client Service tìm đường
Bản đồ ASPX
Geoserver
Server
Reques
t
Map, Path
GMLRequesst
Hình 4.4. Kiến trúc client-server được cài đặt








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
158

4.8 Sơ đồ tương tác chi tiết giữa client và server


























Client Service tìm đường
Bản đồ ASPX
Geoserver 1.3

Server
Yêu cầu một tập tin .svg
Tập tin SVG trả về
GMLRequesst
Yêu cầu tìm đường đi
Kết quả tìm đường
Nhúng vào
SQL SERVER
Tập tin hình học
(shape file)
*.shp
*.dbf
Hình 4.5. Kiến trúc chi tiết client-server được cài đặt
Tập tin MySQL
*.frm
*.myd, *.myi
MySQL
Server 4.1
Adobe SVG
Viewer plugin








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
159

Phần sau đây sẽ mô tả chi tiết kiến trúc trong hình trên.
4.8.1 Mô tả chi tiết client
4.8.1.1 Vấn đề hiển thị nội dung SVG ở phía client
Client được cài đặt trong đề tài này là một trình duyệt. Trình duyệt Web này
được viết bằng trang ngôn ngữ HTML kết hợp với Javascript. Khi mở trang web
của ứng dụng lần đầu tiên trong một phiên làm việc trên máy tính, client sẽ gửi một
yêu cầu đến server để lấy bản đồ .svg. Khi đã nhận được t
ập tin .svg này từ server,
trang Web ở phía client sẽ tự động cập nhật nội dung tập tin .svg này vào trong cửa
sổ trình duyệt. Bộ hiển thị SVG (SVG Viewer) sẽ tự động xây dựng lại phần khung
trong chứa thẻ ‘svg’ cửa sổ trình duyệt.








Hình 4.6 Minh họa yêu cầu hiển thị nội dung ở phía client
4.8.1.2 Vấn đề tương tác với nội dung SVG ở phía client
SVG có một đặc tính là định dạng véc-tơ được thiết kế sao cho các thành phần
bên trong nội dung có thể tương tác trực tiếp với người sử dụng thông qua cây phân
cấp DOM (Document Object Model) (Mô hình đối tượng tài liệu). Phía client sẽ tận
dụng đặc tính này của SVG để đơn giản hóa việc xử lý thao tác. Mỗi thành phần sẽ
giao tiếp với người sử dụng. Khi người s
ử dụng nhấn chuột lên một thành phần
(chẳng hạn như một con đường) thì thành phần đó sẽ tự động phát sinh một sự kiện
và gửi lên nút trên cùng trong cây phân cấp DOM

Client
http://169.254.131.98:port/GetSVG
Câu lệnh yêu cầu tập tin .svg

Server

Tập tin .svg