Flexで地図表示
先日海外版Yahooで地図を表示させてみましたが、海外版のためどうしても日本の地図の詳細が弱い。
ってことで、今度はUMAPっというものを使ってみました。
UMAP(AS3.0)
http://www.afcomponents.com/components/umap_as3/
ActionScript3.0で動作するっとのことですので、Flexで動かしてみました。
http://moeten.info/flex/20080404_gmapTest/bin-release/main.html
やりかた
コンポーネントをサイトからダウンロード(会員登録が必要)
http://www.afcomponents.com/components/umap_as3/
You must agree to End User License Agreement in order to proceed.
ページ右部分に表示されるチェックボタンをチェックして、会員登録すればOKです。
設定
ダウンロードして得られるSWCファイルをFlexプロジェクトのlibフォルダへコピーでOK
あとはチュートリアルを見ながらやると簡単です(ただし英語・・・
http://www.afcomponents.com/tutorials/umap_as3/?sort=most_recent&page=1
非常にわかりやすく簡単に設置できますので、読んでおく価値は十分にあります。
マイサンプル
アイコンを設置してウィンドウを表示。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import com.afcomponents.umap.events.OverlayEvent; import com.afcomponents.umap.display.InfoWindow; import com.afcomponents.umap.core.UMap; import com.afcomponents.umap.styles.MarkerStyle; import com.afcomponents.umap.styles.GeometryStyle; import com.afcomponents.umap.display.markermanager.MarkerManager; import com.afcomponents.umap.display.markermanager.ExpandedGroupPattern; import com.afcomponents.umap.types.LatLng; import com.afcomponents.umap.overlays.Marker; import com.afcomponents.umap.overlays.Layer; import com.afcomponents.umap.overlays.Polyline; import com.afcomponents.umap.styles.GeometryStyle; import com.afcomponents.umap.events.OverlayEvent; //初期化関数 private function init():void{ //地図の作成 var umap:UMap = new UMap(); //東京を中心に表示 umap.setCenter( new LatLng( 35.68627 ,139.69487 ) , 14 ); umap.setSize(900, 900); myUI.addChild( umap ); //マーカーの設定 var markMan:MarkerManager = new MarkerManager(); markMan.expandedGroupRadius = 50; markMan.groupRadius = 50; markMan.markerActualSize = 10; markMan.markerZoomScale = 0.9; markMan.fading = true; markMan.autoClose = true; markMan.animation = true; //マーカーの設置 var style:MarkerStyle = new MarkerStyle( { fill:GeometryStyle.RGB , fillRGB:0xFF0000 } ); var tokyo:Marker = new Marker( { position:new LatLng( 35.68627 ,139.69487 ) , index:"T" , name:"東京", autoInfo:false } , style ); var japan:Layer = new Layer(); japan.addOverlay( tokyo ); umap.addManager( markMan ); umap.addOverlay( japan ); markMan.addLayer( japan ); //マーカークリック時イベント tokyo.addEventListener(OverlayEvent.CLICK, handleOver); function handleOver(event:Event=null):void { event.target.openInfoWindow({title: event.target.name +"だよ", autoCloseInfo: true}); } //ラインを引く(お遊び var style2:GeometryStyle = new GeometryStyle(); style2.stroke = GeometryStyle.RGB; style2.strokeRGB = 0xFF0000; style2.strokeAlpha = .5; style2.strokeThickness = 10; param = new Object(); param.points = new Array(); param.points.push(new LatLng(35.68627 ,139.69487)); param.points.push(new LatLng(35.68927 ,139.69977)); param.name = "新宿駅から"; var myLine:Polyline = new Polyline(param, style2); umap.addOverlay(myLine); //ウィンドウの設定(お遊び var param:Object = new Object(); param.title = "UMAPのテストだよ"; param.content = "コンテンツだよ"; param.position = new LatLng( 35.68927 ,139.69987 ); var myWindow:InfoWindow = new InfoWindow(param); umap.addOverlay(myWindow); myWindow.open(); } ]]> </mx:Script> <mx:UIComponent id="myUI" width="100%" height="100%"/> </mx:Application>