FlexでGoogleMapsを表示してみる

5404 ワード
flash ActionScript Flex GoogleMaps ActionScript テキストリンク

Flexで地図を表示するためのライブラリModest Mapsを使って、試しにGoogleMapsのタイルを読み込んでみました。
Modest Mapsのソース及びSWCはこちらでダウンロードできます。
https://github.com/migurski/modestmaps-as3

※GoogleMapsのタイル画像に直接アクセスするのは規約違反になりますので、本サンプルを実際のプロジェクトで使うのはやめておきましょう。

1)ModestMapsを使ってOpenStreetMapを表示するサンプルがADCに公開されています。
http://www.adobe.com/devnet/flex/articles/interactive_maps.html
http://www.flexmappers.com/mymodestmap/
非常に分かりやすいサンプルなので、今回はこれをダウンロードしてきて地図タイルをGoogleに切り替えてみます。

2)以下のように、GoogleMapsのタイルを取得するためのクラスを作ります。

GoogleMapsProvider.as
package com.modestmaps.mapproviders
{ 
    import com.modestmaps.core.Coordinate;

    public class GoogleMapsProvider
        extends AbstractMapProvider
        implements IMapProvider
    {
        public function GoogleMapsProvider(minZoom:int=MIN_ZOOM, maxZoom:int=MAX_ZOOM)
        {
            super(minZoom, maxZoom);
        }

        public function toString() : String
        {
            return "GOOGLE_MAPS";
        }

        public function getTileUrls(coord:Coordinate):Array
        {
            var sourceCoord:Coordinate = sourceCoordinate(coord);
            return [ 'http://mt0.google.com/vt/lyrs=m@127&x='+(sourceCoord.column)+'&y='+(sourceCoord.row)+'&z='+(sourceCoord.zoom) ];
        }

    }
}

3)メイン画面にて、OpenStreetMapProviderを使っている箇所を先程のGoogleMapsProviderに差し替えます。

main.mxml
_map = new TweenMap(mappanel.width, mappanel.height, true, new GoogleMapsProvider());

たったこれだけでFlash上でGoogleMapsを表示できました。