UMapでGoogleEarthみたいなレンダリングバー

2008年10月 7日 20:10

ActionScript 3.0の地図ライブラリ・・じゃなくて、コンポーネント、『UMap』。とても便利そうだし、表示させるだけならそんなに難しくないです。ただ、ダウンロードして使えるので、チャレンジしてみました。

これ、もしかしたらこんなタイトル入れていて、もしそういったクラスがあればすごい恥ずかしいんですが、GoogleEarthみたいなレンダリングバーが出来たら、仕事などで実装する場合、ユーザの目線で見たらいい感じなんじゃないかな？と思って。
やっぱり、待ってる間、タイルが出っぱなしだとカッコ悪いような気がして。

コンポーネントをダウンロード

ダウンロードしたら、Adobe Extention Managerで機能を拡張します。
そのあたりは書籍Flash OOP for ActionScript 3.0にも掲載されてました、ご一読をおススメします。

さて、一旦UMapコンポーネントをステージにドラッグして消して（ライブラリに登録して）すぐに表示される。簡単で、申し訳ないくらいです・・
しかも座標はGoogleMapと一緒だし、だからhttp://www.geocoding.jp/で分かるし。

ローディングイベントはMapLoadEventで！

LoaderInfoクラスを使ったProgressEventと同じ感覚です。
event.bytesLoadedの代わりにevent.currentTile
event.bytesTotalの代わりにevent.totalTiles
タイルなんですね！よく出来てる！！と思います。
なので、パーセンテージを調べるにはevent.currentTile/event.totalTilesでいいんですね。

描画がしょぼいけど。

こちらがソースコードになります。

package{
	import com.afcomponents.umap.core.UMap;
	import com.afcomponents.umap.types.LatLng;
	import com.afcomponents.umap.events.*;
	import flash.display.Sprite;
	import flash.display.Shape;
	import flash.events.Event;
	import flash.text.*;

public class MyFlashMap extends Sprite {

var map:UMap=new UMap();
		var renderBar:Shape=new Shape();
		var textF:TextField=new TextField();

public function MyFlashMap():void {
			map.addEventListener(MapLoadEvent.MAP_LOAD_START,mapLoadStart);
			map.addEventListener(MapLoadEvent.MAP_LOAD_PROGRESS,mapLoadProgress);
			map.addEventListener(MapLoadEvent.MAP_LOAD_COMPLETE,mapLoadComplete);
			map.setSize(stage.stageWidth,stage.stageHeight);
			var pos:LatLng=new LatLng(51.500152,-0.126236);
			map.setCenter(pos,3);
			addChild(map);
			renderBarSet();
			addChild(textF);
			textF.autoSize=TextFieldAutoSize.LEFT;
			textF.y=15;
		}
		
		private function mapLoadStart(event:MapLoadEvent):void{
			}
		
		private function mapLoadProgress(event:MapLoadEvent):void{
			var per:Number=event.currentTile/event.totalTiles;
			renderBar.scaleX=per;
			textF.text="MAP RENDERINRG..."+Math.floor(per*100)+"%"
			}
			
		private function mapLoadComplete(event:MapLoadEvent):void{
			textF.text="MAP RENDER COMPLETE";
			}
		
		private function renderBarSet():void{
			var bgBar:Shape=new Shape();
			bgBar.graphics.lineStyle(1,0x333333,0.7);
			bgBar.graphics.drawRect(0,0,200,10);
			addChild(bgBar);
			renderBar.graphics.beginFill(0x333333,0.4);
			renderBar.graphics.drawRect(0,0,200,10);
			renderBar.graphics.endFill();
			renderBar.scaleX=0;
			addChild(renderBar);
			}
	}
}

前の詳細を見る UMapでGoogleEarthみたいなレンダリングバー次の詳細を見る

Flash AS3 学習リスト

デザイナー、秋葉秀樹のブログ