使ってみよう! Bing API/SDK

第16回 使ってみよう! Bing Maps AJAX Control──地図をWebページに貼り付け(4)

この記事を読むのに必要な時間:およそ 4 分

はじめに

Bing Maps AJAX Control 4回目の今回はタイルについてです。前回までに地図上に表示できるものとして,プッシュピン,ポリライン,ポリゴンを紹介しました。もうひとつ地図に上に追加できるのが,タイルです。

Bing Mapsの地図は画像をタイル状に並べて構成されています。これを単にタイルと呼んでいます。Bing Maps AJAX Controlを利用するとオリジナルのタイルを重ねて表示でき,いろいろなアプリケーションの作成ができます。

図1は,独自のタイルを使用した例です。昭和49年度の航空写真を重ねて表示しています。

図1 昔の航空写真の表示

図1 昔の航空写真の表示

国土画像情報(カラー空中写真)⁠ 国土交通省

タイルの表示

さっそくタイルを表示するコードを書いてみましょう。オリジナルのタイルを利用するには,Bing Mapsと同様に構成したタイル画像を用意する必要があります。ここではサンプルに用意されているタイル画像を表示します図2)⁠

図2 サンプルのタイル

図2 サンプルのタイル

HTMLを含めたすべてのコードは次のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Sample</title>
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&amp;mkt=ja-jp"></script>
    <script type="text/javascript">
 
        var map = null;
        function GetMap() {
            var options = {
                credentials: "BingMapsKey",
                center: new Microsoft.Maps.Location(48.03, -122.4),
                mapTypeId: Microsoft.Maps.MapTypeId.aerial,
                zoom: 12
            };
            map = new Microsoft.Maps.Map(document.getElementById("map"), options);
 
            // TileSource
            var sourceOptions = {
                uriConstructor: 'http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png'
            };
            var tileSource = new Microsoft.Maps.TileSource(sourceOptions);
 
            // TileLayer
            var layerOptions = {
                mercator: tileSource,
                opacity: 0.9
            };
            var tilelayer = new Microsoft.Maps.TileLayer(layerOptions);
 
            // タイルの追加
            map.entities.push(tilelayer);
        }
 
    </script>
</head>
<body onload="GetMap();">
    <div id='map' style="position: relative; width: 640px; height: 640px"></div>
</body>
</html>

コード中のBingMapsKey部分は,Bing Maps Keyに置き換えてください。

タイルの表示は,Pushpinオブジェクトなどと同じく,Mapsオブジェクトのentitiesコレクションに,TileLayerオブジェクトを追加します。TileLayerオブジェクトの生成には,TileSourceオブジェクトも必要です。それぞれのオブジェクトの生成時に指定するオプションは次の通りです。

TileLayerオプション

名前 説明
opacity 不透明度
0(透明)〜1(不透明)
zIndex ほかの地図上のオブジェクトとの表示順序(数値)
値の大きい方を上に表示
mercator TileSourceオブジェクト

TileSourceオプション

名前 説明
height タイル画像の縦幅
64, 128, 256(規定), 512
uriConstructor タイル画像のURLの書式
URL内の{subdomain}, {quadkey}部分が置換されます(後述)⁠
width タイル画像の横幅
64, 128, 256(規定), 512

著者プロフィール

松江祐輔(まつえゆうすけ)

日本システムウエア株式会社 勤務。現在,ハードウェア設計・検証業務を担当。大学生・大学院生時代はベンチャー企業 有限会社ミレニアムシステムズにプログラマーとして従事。趣味はプログラミング。好きな言語はVisual Basic。Microsoft MVP for Windows Live Platform(Jul 2010 - Jun 2011),Windows Live(Jul 2011 - Jun 2013)。

URL:http://katamari.jp

コメント

コメントの記入