12 February 2008

Marquee Zoom Funktion in der Karte



eine coole Funktion habe ich eben ausprobiert und eingebaut: MARQUEE ZOOM

Cool deswegen, weil die Funktionalität auch innerhalb der Karte einzubauen ist.
(übrigens LIVE zu sehen hier: http://elocation.oracle.com/elocation/ajax/ - und im Buch Pro Oracle Spatial für Oracle Database 11g auf Seite 517 beschrieben)

Man kann in der neuen Version (preview 11g - seit 12.12.07 downloadbar) unterscheiden zwischen 3 Modes:
- Prompt:
Man zeichnet das Rechteck auf der Karte und klickt danach in das Rechteck hinein - und die Karte zoomed hinein. Klickt man ausserhalb des Rechtecks, passiert nichts.
- Continuous:
Man zeichnet das Rechteck und läßt die Maustaste los - und sofort wird gezoomt. Der Marquee Zoom bleibt solange aktiv, bis man die Checkbox wieder ausklickt.
- One time (one_time):
Man zeichnet das Rechteck und läßt die Maustaste los - es wird gezoomt und anschliessend ist das Werkzeug inaktiv.
Zum Einbau in der Karte kombiniere ich zwei (drei) Oracle Maps Funktionen:

"startMarqueeZoom" (Instance method in class MVMapView)
"stopMarqueeZoom()" (Instance method in class MVMapView)
und
"MVMapDecoration"

"MVMapDecoration" ermöglicht dem Entwickler irgendetwas (HTML/Javascript) auf der Karte zu platzieren.
Weitere Erläuterungen im Oracle Maps Tutorial # 19 Map Decoration.
"startMarqueeZoom" und "stopMarqueeZoom()" liefert die Rechteckauswahl mit obigen Funktionalitäten.
Weitere Erläuterungen im Oracle Maps Tutorial # 33 Marquee Zoom.
In den Oracle Maps Tutorials ist halt nur nicht so smart die Funktion in die Karte eingebaut, sondern neben der Karte angeordnet.

Codesnippet:

// Marquee Zoom control/HTML auf der Seite einbauen:

var toolBar =
'<div style="background-color:white; border:2px solid black;">'+
' Rechteck Zoom: '+
'<input id="marqueezoom" type="checkbox" value="marqueezoom" onclick="toggleMarqueeZoom(this)" unchecked/>'+
' Entfernung: '+
"<INPUT id='distarea' title='Measure distance/area' TYPE='checkbox' value='distarea' onclick='measureDistanceArea(true)' unchecked/>"
'</div>'

// Funktion MVMapDecoration zum Platzieren in der Karte hinzufügen:

md = new MVMapDecoration(toolBar, 0, 0) ;
mapview.addMapDecoration(md);
md.setOffset(5, 5) ;

// die Marquee Zoom Control Funtion einbauen:

function toggleMarqueeZoom(checkBox)
{
if(checkBox.checked)
mapview.startMarqueeZoom("prompt");
else
mapview.stopMarqueeZoom() ;
}


Zur Erläuterung der Entfernungs Messungs Funktion komme ich später... (;-)

1 comment:

Patrick Wolf said...

Sehr nett.

Patrick