HaxeMaps / Ovládání mapy

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ě.

1. Zdrojový kód

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).

2. Překlad a Html kód

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

3. Výsledek

První okna obsahuje mapu s povolenou plynulou změnou měřítka, druhá ukázka má plynulou změnu měřítka zakázánu.

Pro správnou funkci je vyžadován Flash player
   


Deprecated: Function ereg() is deprecated in /home2/web/homes/vasicek/private/notes/web/data/map/examples.php on line 12

Zobrazeno: 1079x Naposledy: 20.3.2024 09:49:32