1.2.1 Tenký klient

Při použití tenkého klienta je práce uživatele značně omezená. Obvykle je možné pouze každé kliknutí uživatele zaslat ke zpracování mapovému serveru. S výhodou lze takto řešit pořizování bodové reprezentace geoprvků.

Pokud máme zájem pořizovat liniové či polygonové objekty,pak se taková činnost jeví jako značně zdlouhavá a z uživatelského hlediska nepříjemná. Jistým zlepšením může být využití skriptů na straně klienta (např. JavaScript), kdy jsou body kliknutí ukládány do paměti klientského počítače a ke zpracování zaslány hromadně.

Problém nastává s vizualizací již pořízené části linie (polygonu). Jistým řešením (avšak závislým na platformě) může být využití jazyka VML (Vector Markup Language).

Popis

Obrázek 1-3: Využití CSS pro vizualizaci bodů kliknutí (není nutná spolupráce se serverem).

Využití CSS pro vizualizaci bodů kliknutí (není nutná spolupráce se serverem)

Následující HTML, CSS a JavaScript kód představuje řešení prezentované na předchozím obrázku. Souřadnice kliknutí (v pixelech) se zapisují do textové plochy a mohou tak být snadno odeslány ke zpracování na stranu serveru.

<html>
<head>
<style>
body {
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
}
krizek {
cursor: crosshair;
}
</style>
<script language=javascript>
var count=0; //identifikace počtu kliknutí
//funkce vytvoří v místě kliknutí bod
//jeho souřadnice zapíše do textové plochy
function makePoint() {
//získání souřadnic kliknutí
XCrnt = window.event.clientX;
YCrnt = window.event.clientY;

 
//vytvoření značky HR
objCreatePoint = document.createElement("hr");

//nastavení parametrů stylu značky HR
//absolutní pozice objektu
objCreatePoint.style.position = "absolute";
//barva červená
objCreatePoint.style.backgroundColor = "red";
//šířka a výška 6 pixelů
objCreatePoint.style.width = "6px";
objCreatePoint.style.height = "6px";
//souřadnice levého horní rohu (z místa kliknutí)
//umístění bodu pro vizualizaci
objCreatePoint.style.left = XCrnt;
objCreatePoint.style.top = YCrnt;
//konec nastavení parametrů stylu

//přidání značky HR do těla dokumentu
document.body.appendChild(objCreatePoint);

 
//zápis souřadnic do textové plochy
//získání textové plochy
var objSeznam = document.getElementById("seznam");
//získání obsahu textové plochy
var pom = objSeznam.value;
count = count + 1; //zvýšení počtu kliknutí
if(count != 1) {
//přidání souřadnic k existujícímu textu
&#pom = pom + ", " + XCrnt + ", " + YCrnt;
} else {
//zapsání souřadnic prvního bodu
pom = XCrnt + ", " + YCrnt;
}
//zapsání souřadnic do textové plochy
objSeznam.value = pom;
//konec zápis souřadnic do textové plochy
}

 
</script>
</head>
<body>
<CENTER>
<!-- Obrázek pro umísťování bodů, po kliknutí na obrázek se spustí funkce makePoint -->
<P><input type=image src=mapa.gif class=krizek onClick="javascript:makePoint();"><P>
<!-- Textová plocha pro zápis souřadnic bodů -->
<P><textarespan name=body id=seznam ROWS=10 COLS=50></textarea></P>
</CENTER>
</body>
</html>

Kód pro umisťování bodů na bázi CSS

 

PRŮVODCE STUDIEM 2

 

V případě problémů s přepisováním (kopírováním) kódu najdete výše uvedený kód na CD v adresáři rozsirene pod názvem pointsCSS.htm.

Zdroje na CD

 

Obrázek 1-4: Využití VML pro vizualizaci linie při pořizování dat (není nutná spolupráce se serverem).

Využití VML pro vizualizaci linie při pořizování dat (není nutná spolupráce se serverem)

Následující HTML, CSS, VML a JavaScript kód představuje řešení prezentované na předchozím obrázku. Souřadnice kliknutí (v pixelech) se zapisují do textové plochy a mohou tak být snadno odeslány ke zpracování na stranu serveru. Body kliknutí vytváří linie, které se vizuálně spojují do jedné polylinie.

<html xmlns:v>
<head>
<style>
v\:* {
behavior: url(#default#VML);
}
body {
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
}
.krizek {
cursor: crosshair;
}
</style>
<script language=javascript>
var XPrev; //X souřadnice bodu předchozího kliknutí
var YPrev; //Y souřadnice bodu předchozího kliknutí
var count=0; //identifikace počtu kliknutí
var objCreateLine; //jednoduchá linie (dva body)

 
//funkce vytvoří mezi bodem předchozího kliknutí a aktuálního kliknutí linii
//jeho souřadnice zapíše do textové plochy
function setPoint() {
//získání souřadnic kliknutí
XCrnt = window.event.clientX;
YCrnt = window.event.clientY;

//získání textové plochy
var objSeznam = document.getElementById("seznam");

count = count + 1; //zvýšení počtu kliknutí
if(count != 1) {

//vytvoření značky VML linie
objCreateLine = document.createElement("v:line")
//nastavení prvního bodu VML linie
objCreateLine.from = XPrev + ',' + YPrev;
//nastavení posledního bodu VML linie
objCreateLine.to = XCrnt + ',' + YCrnt;
//nastavení barvy pro vykreslení linie - červená
objCreateLine.strokecolor="red";
//nastavení tloušťky pro vykreslení linie - 2 body
objCreateLine.strokeweight="2pt";
//přidání značky do značky div identifikovaní jako divLine
divLine.appendChild(objCreateLine);

//získání obsahu textové plochy
var pom = objSeznam.value;
pom = pom + ", " + XCrnt + ", " + YCrnt;
//přidání souřadnic bodu do textové plochy
objSeznam.value = pom;
} else {
//zapsání souřadnic prvního bodu do textové plochy
objSeznam.value = XCrnt + ", " + YCrnt;
}
//zaznamenání souřadnic kliknutí pro další použití
XPrev = XCrnt;
YPrev = YCrnt;
}
</script>
</head>

 
<body>
<!-- Nadřazená značka pro vytvářené linie -->
<div id="divLine"></div>
<CENTER>
<!-- Obrázek pro umísťování bodů, po kliknutí na obrázek se spustí funkce makePoint -->
<P><input type=image src=mapa.gif onClick="javascript:setPoint();" class=krizek><P>
<!-- Textová plocha pro zápis souřadnic bodů -->
<P><textarespan name=body id=seznam ROWS=10 COLS=50></textarea></P>
</CENTER>
</body>
</html>

 

 

PRŮVODCE STUDIEM 3

 

V případě problémů s přepisováním (kopírováním) kódu najdete výše uvedený kód na CD v adresáři rozsirene pod názvem polylineVML.htm.

Zdroje na CD

 

SAMOSTATNÝ ÚKOL 1

 

Navrhněte datovou strukturu v relační databázi pro uložení údajů o geometrii liniových prvků a způsob pořizování linie s využitím tenkého klienta, klikáním do mapy. Využijte znalosti z modulu cvičení, kde se pořizovaly bodové prvky.

Svůj návrh prezentujte v diskusi v on-line výukovém systému.

Pořízení linie s využitím tenkého klienta