タイルレイヤーの作成

広告

まずオーバーレイとして追加される独自のタイルレイヤーを作成します。タイルレイヤーはGTileLayerインターフェースを実装したクラスを利用します。

新しいタイルレイヤーを作成するにはGTileLayerインターフェースを使います。 

GTileLayer(copyrights:GCopyrightCollection, minResolution:Number, maxResolution:Number, 
  options?:GTileLayerOptions) 

プロトタイプとしてインスタンス化すると、コンストラクタ属性は省略できま
す。サブクラス コンストラクタは、call() を使用してこのコンストラクタを
呼び出す必要があります。オプションの options パラメータは、一連の 
GTileLayerOptions を指定します。これは、オブジェクト リテラルとして渡さ
れる必要があります。

1番目には著作権に関する表示を行うためのGCopyrightCollectionクラスのオブジェクトを指定します。2番目の引数はタイルレイヤーの最小ズームレベル、3番目の引数はタイルレイヤーの最大ズームレベルを指定します。 

var copyrights = new GCopyrightCollection();
var tilelayer = new GTileLayer(copyrights, 0, 19);

また作成したオブジェクトには次の3つのメソッドを実装する必要があります。 

getTileUrl
isPng
getCopyright

各プロパティに対して関数リテラルを設定していきます。

getTileUrlメソッド

getTileUrlメソッドは位置とズームレベルが渡されてきた時に、表示する地図画像のURLを返します。 

getTileUrl(tile:GPoint, zoom:Number)

抽象。指定のズーム レベルで GPoint の x と y プロパティで指定されたタイ
ル インデックスのあるマップ タイルの URL を地図に返します。

戻り値：
  String

ここでGPointが表す位置は座標ではなくタイルの位置です。Google Maps APIではズームレベル毎に使用されるタイル数が決まっており2n×2nのタイルで表されます。例えばズームレベル4の場合、全世界を24×24、つまり16×16のタイルに分割されることになります。getTileUrlメソッドに渡されてくるGPointクラスのオブジェクトの値はこのタイルの位置を表しています。

あるズームレベルにおいて指定の座標が属するタイルの位置の計算方法は別のページで確認します。

今回はどのような引数が渡されてきたとしても同じ画像のURLを返すようにようにします。 

var copyrights = new GCopyrightCollection();
var tilelayer = new GTileLayer(copyrights, 0, 19);

tilelayer.getTileUrl = function(tile, zoom) { return "./img/sample.png"; };

なお1枚のタイルは256ピクセル×256ピクセルで作成して下さい。

isPng メソッド

isPngメソッドは使用している画像のフォーマットがPNGかどうかを返します。 

isPng() 

抽象。タイルが PNG 画像形式であるため、透明にできるかどうかを地図に返し
ます。それ以外の場合は GIF と見なされます。

戻り値：
  Boolean

タイル画像としてPNG画像を使用している場合にはtrueを返すようにして下さい。 

var copyrights = new GCopyrightCollection();
var tilelayer = new GTileLayer(copyrights, 0, 19);

tilelayer.getTileUrl = function(tile, zoom) { return "./img/sample.png"; };
tilelayer.isPng = function() { return true; };

getOpacity メソッド

getOpacityメソッドはレイヤーの透明度を返します。 

getOpacity() 

抽象。このタイル レイヤーを表示する透明度を地図に返します。1.0 は不透明
で 0.0 は透明です。

戻り値：
  Number

レイヤー全体の透明度を返します。値は0から1までの数値で0に近づくほど透明となり1に近づくほど不透明となります。 

var copyrights = new GCopyrightCollection();
var tilelayer = new GTileLayer(copyrights, 0, 19);

tilelayer.getTileUrl = function(tile, zoom) { return "./img/sample.png"; };
tilelayer.isPng = function() { return true; };
tilelayer.getOpacity = function() { return 0.5; };

以上で独自のタイルレイヤーが作成されました。

( Written by Tatsuo Ikura )