V této ukázce vytvoříme interaktivní mapu, kterou bude možné ovládat pomocí myši (stisknutím levého tlačítka a pohybem myši posouváme s mapou, dvojklikem zvyšujeme detaily, dvojklikem s přidržením klávesy Ctrl snižujeme detaily) a tlačítek v nástrojové liště.
Zdrojový kód vypadá následovně:
example02.hx
import flash.display.Sprite; import flash.display.StageDisplayState; import flash.events.Event; import map.Canvas; import map.LngLat; import map.TileLayer; import map.MapService; import com.Button; import com.ToolBar; class Example02 extends Sprite { var canvas:Canvas; var toolbar:ToolBar; static public function main() { flash.Lib.current.stage.scaleMode = flash.display.StageScaleMode.NO_SCALE; var t:Example02 = new Example02(); flash.Lib.current.stage.addEventListener(Event.RESIZE, t.stageResized); flash.Lib.current.stage.addChildAt(t,0); } function new() { super(); toolbar = new ToolBar(); toolbar.move(0, 0); canvas = new Canvas(); canvas.move(0, 0); stageResized(null); //update toolbar & canvas size canvas.setZoom(3); canvas.setCenter(new LngLat(16.124, 49.124)); canvas.addLayer(new TileLayer(new OpenStreetMapService(), 8, #if TILE_OPT false #else true #end)) canvas.initialize(); canvas.addEventListener(MapEvent.MAP_MOUSEMOVE, mouseMove); initToolbar(); addChild(canvas); addChild(toolbar); } public function stageResized(e:Event) { toolbar.setSize(flash.Lib.current.stage.stageWidth, 30); canvas.setSize(flash.Lib.current.stage.stageWidth, flash.Lib.current.stage.stageHeight-20); } function initToolbar() { var me = this; toolbar.addButton(new MaximizeButton(), "Toggle full screen mode", function(b:CustomButton) { if (flash.Lib.current.stage.displayState == StageDisplayState.FULL_SCREEN) flash.Lib.current.stage.displayState = StageDisplayState.NORMAL; else flash.Lib.current.stage.displayState = StageDisplayState.FULL_SCREEN; }); toolbar.addSeparator(); //zoom out button toolbar.addButton(new ZoomOutButton(), "Zoom Out", function(b:CustomButton) { me.canvas.zoomOut(); }); //zoom level buttons var z = canvas.getMinZoom(); var zmax = canvas.getMaxZoom(); while (z <= zmax) { var zoom = z; toolbar.addButton(new BarButton(0), "Set zoom to " + Std.string(z), function(b:CustomButton) { me.canvas.setZoom(zoom); }, -10 ); z += 1; } //zoom in button toolbar.addButton(new ZoomInButton(), "Zoom In", function(b:CustomButton) { me.canvas.zoomIn(); }); toolbar.addSeparator(30); //pan buttons toolbar.addButton(new UpButton(), "Move up", function(b:CustomButton) { me.pan(1); }); toolbar.addButton(new DownButton(), "Move down", function(b:CustomButton) { me.pan(2); }); toolbar.addButton(new LeftButton(), "Move left", function(b:CustomButton) { me.pan(4); }); toolbar.addButton(new RightButton(), "Move right", function(b:CustomButton) { me.pan(8); }); } function pan(direction:Int) { var lt:LngLat = canvas.getLeftTopCorner(); var br:LngLat = canvas.getRightBottomCorner(); var p:LngLat = canvas.getCenter(); if (direction & 0x3 == 1) p.lat = lt.lat; //up if (direction & 0x3 == 2) p.lat = br.lat; //down if (direction & 0xC == 4) p.lng = lt.lng; //left if (direction & 0xC == 8) p.lng = br.lng; //right canvas.panTo(p); } function mouseMove(e:map.MapEvent) { toolbar.setText("longitude:" + LngLat.fmtCoordinate(e.point.lng) + " latitude:" + LngLat.fmtCoordinate(e.point.lat) + " zoom:" + canvas.getZoom()); } }
Za povšimnutí stojí způsob realizace posuvu v mapě, ten je implementován pomocí metody panTo třídy Canvas, která postupně posune střed mapy na určité souřadnice. Při posunu se nejprve zjistí geogr. souřadnice levého horního a pravého spodního rohu a podle požadovaného směru se určí souřadnice nového středu (např. při posunu vlevo tvoří nový střed zeměpisná délka příslušející levému okraji okna mapy a současná zem. šířka).
Pro překlad platí informace uvedené v Ukázka použití s tím rozdílem, že nyní použijeme výchozí třídu Example02, kterou jsme implementovali v souboru example02.hx. Pro vložení do Html stránky lze využít kód uvedený v předchozím příkladu.
> haxe -swf output.swf -swf-version 9 -main Example02 -swf-header 800:600:25:ffffff -cp haxemaps
Pro pomalejší počítače může být vhodné vypnout plynulou změnu měřítka (třetí parametr konstruktoru třídy TileLayer).
> haxe -swf output2.swf -swf-version 9 -main Example02 -swf-header 800:600:25:ffffff -cp haxemaps -D TILE_OPT
První okna obsahuje mapu s povolenou plynulou změnou měřítka, druhá ukázka má plynulou změnu měřítka zakázánu.