Google Maps シンボルアニメーション

Google Maps V3ではラスター以外にベクトル画像も扱えます。

で、このベクトル画像をMaps上のポリラインに沿ってアニメーションさせることができます。

地図上に任意のルートを作成し、その上を矢印を乗せて動かしてみましょう。

矢印の方向がルートに沿うので、ベクトルデータだなあ...と実感できます(^^)。

Google Maps シンボルアニメーション V3

取り扱い方

Google Maps シンボルアニメーション　コード

初期画面

①：ポリラインを作成：クリックすれば座標が表示されます

②：経路が非表示なって矢印のアニメーションが描画されます

③：アニメーションがスタートしていない状態ならマーカーを出す/出さない。
アニメーションがスタートしている場合は、編集モードに復帰します。

④：大圏コースを取る/取らない。

地図上をクリックして経路を設定します。

経路編集にチェックが入っている場合。

経路編集にチェックが外れている場合。

アニメーションがスタートしていない状態なら、経路をドラッグすることもできます。

「アニメーション・スタート」をクリック。

矢印が経路に沿って動きます。

経路編集にチェックを入れてみます。

マーカーが現れて、再編集できるようになります。

追加
大圏コース

実地球上での最短距離のコース

地図上で飛行機なんかをアニメーションする場合、大陸間を直線で飛ばすわけにいかないので設定を追加。

ただし、現バージョンでは動的に変更できないので経路を描画する前に設定してください。

大圏コースなしの場合

大圏コースありの場合

GoogleMaps V3のシンボルアニメーション　コード

シンボルはSVG パス表記を使って独自の画像を作れます。

定義済みのシンボルもあります。こんな感じ。

名前	説明	例
`google.maps.SymbolPath.CIRCLE`	円。
`google.maps.SymbolPath.BACKWARD_CLOSED_ARROW`	すべての側面が閉じている後ろ向きの矢印。
`google.maps.SymbolPath.FORWARD_CLOSED_ARROW`	すべての側面が閉じている前向きの矢印。
`google.maps.SymbolPath.BACKWARD_OPEN_ARROW`	1 つの側面が開いている後ろ向きの矢印。
`google.maps.SymbolPath.FORWARD_OPEN_ARROW`	1 つの側面が開いている前向きの矢印。

アニメーションを表示する場合

以下のコードを例にすると、addSymbolanimationとanimateSymbolをセットで使います。

animlineのstrokeOpacityを0にすると経路は非表示になります。

またSymbolを非表示にするには、lineSymbolのpathにnullをセットします。

var symbol = oogle.maps.SymbolPath.FORWARD_CLOSED_ARROW;
var animline;

var coordinatesArray = [];

//coordinatesArrayに経路座標をセット



function addSymbolanimation(symbol,coordinatesArray){
    var lineSymbol = {
        path:symbol,
        scale:4,
        fillColor:"#ff0000",
        fillOpacity:1,
        strokeOpacity:1,
        strokeColor:"#ff0000"
    };

    animline = new google.maps.Polyline({
    	geodesic: true,//trueなら大圏コース、falseなら普通の直線コース
        path: coordinatesArray,
        icons: [{
          icon: lineSymbol,
          offset: '100%'
        }],
        strokeOpacity:1,
        strokeColor:"#ff0000",
        editable:true,
        draggable:true,
        map:googlemap
    });
}


function animateSymbol() {
    var count = 0;
    
    offsetId = window.setInterval(function() {
        count = (count + 1) % 200;
        
        var icons = animline.get('icons');
        icons[0].offset = (count / 2) + '%';
        animline.set('icons', icons);
    }, 20);
    
}

ユーザーが独自のシンボルを定義する場合

ベクターベースのシンボルは、SVG パス表記を使用したパスを使って定義できます。

作り方はいたってシンプルです。

例えば以下のような飛行機の画像を経路に沿ってアニメーションさせるとします。

まず進行させる場合、画像の左上が基準になります。

なので、画像のデータを取る場合は、以下のような画像にしてデータを採取します。

出発点はどこでもいいですが、時計回りに座標を取得していきます。

シンボルは22x22のサイズに収まるのがいいようですが、あまりに小さいとデータ取得が困難ですので、ある程度の大きさの画像を使いシンボル定義の際にscaleで縮小します。

データの並びは、x,y x,y x,y x,y x,y x,y ・・・・・・と言った感じで、ｘ座標,ｙ座標＜半角空白＞を並べていきます。

シンボルのpathに以下のように入れておきます。

path:'M 座標列 z',

画像を傾ける場合は、rotationを使います。0から360までの時計周りの回転角。

rotation:90,

画像を経路の上でアニメーションさせる場合は、anchorを使います。anchorのデフォルトは画像左上(0,0)です。

画像が100x100の大きさの場合、画像の中心をanchorにすれば経路上を動きます。

anchor:new google.maps.Point(50, 50),