MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2016.08.25

Googleマップで過去の航空写真を見る

img

みなさん、こんにちは。

国土地理院が提供するタイル地図とGoogleマップの連携方法を説明します。

今回は、Googleマップに国土地理院が公開している航空写真を設定して表示してみます。

 

国土地理院が公開しているタイル地図の一覧は、下記サイトで確認できます。

http://maps.gsi.go.jp/development/ichiran.html

 

様々なタイル地図が公開されていますね。今回は以下の航空写真を参照できるようにしてみました。

1. 写真(2007~)

2. 空中写真(1961~1964年)

3. 空中写真(1945~1950年)

4. 国土画像情報(第一期:1974~1978年撮影)

5. 国土画像情報(第二期:1979~1983年撮影)

6. 国土画像情報(第三期:1984~1986年撮影)

7. 国土画像情報(第四期:1988~1990年撮影)

 

早速デモサイトをご覧ください。左上に地図を切り替えるメニューがあるので、クリックすると一覧が表示されます。デフォルトで表示される「航空写真」は、Googleマップ標準のものです。

なお、ズームレベルによっては写真が無い場合がありますので、ご了承ください。

Full Screen

 

詳しいコーディング方法です。
タイル画像の表示には、「google.maps.ImageMapType」 を使用します。

// 国土地理院タイル画像の情報
var _chiriinMapList = [
  {name: '空中写真(1945-1950)', key: 'USA10', url: 'http://cyberjapandata.gsi.go.jp/xyz/ort_USA10/', type: 'png'},
  {name: '空中写真(1961-1964)', key: 'old10', url: 'http://cyberjapandata.gsi.go.jp/xyz/ort_old10/', type: 'png'},
  {name: '空中写真(1974-1978)', key: 'gazo1', url: 'http://cyberjapandata.gsi.go.jp/xyz/gazo1/', type: 'jpg'},
  {name: '空中写真(1979-1983)', key: 'gazo2', url: 'http://cyberjapandata.gsi.go.jp/xyz/gazo2/', type: 'jpg'},
  {name: '空中写真(1984-1986)', key: 'gazo3', url: 'http://cyberjapandata.gsi.go.jp/xyz/gazo3/', type: 'jpg'},
  {name: '空中写真(1988-1990)', key: 'gazo4', url: 'http://cyberjapandata.gsi.go.jp/xyz/gazo4/', type: 'jpg'},
  {name: '空中写真(2007-)',     key: 'ort',   url: 'http://cyberjapandata.gsi.go.jp/xyz/ort/',   type: 'jpg'}
];

// 地図の初期化
var initMap = function() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(35.66, 139.74),
    zoom : 16,
    streetViewControl: true, // ストリートビュー有効
    scaleControl: true, // スケールバー表示
    mapTypeId: google.maps.MapTypeId.SATELLITE // Google標準の航空写真
  });

  // MayTypeを保持する配列定義
  var mapTypeIds = new Array();
  
  //Google の航空写真を先頭に追加
  mapTypeIds.push(google.maps.MapTypeId.SATELLITE);

  // タイル画像のリストでループ
  $.each(_chiriinMapList, function(i, chiriinMap) {
    // ImageMapType を生成
    var chiriinMapType = new google.maps.ImageMapType({
      getTileUrl: function(coord, zoom) {
        // タイル画像取得用URLを生成
        return chiriinMap.url
               + zoom + '/' 
               + coord.x + '/' 
               + coord.y + '.' + chiriinMap.type;
      },
      tileSize: new google.maps.Size(256, 256),
      maxZoom: 17,
      minZoom: 10,
      name: chiriinMap.name
    });

    // MapType に追加
    map.mapTypes.set(chiriinMap.key, chiriinMapType);

    // MayTypeを保持する配列に追加
    mapTypeIds.push(chiriinMap.key);
  });

  // Map オプションの設定
  map.setOptions({
    mapTypeControlOptions: {
      mapTypeIds: mapTypeIds, // MapType の配列
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU // ドロップダウン
    }
  });
};

 

 

いかがでしたか?
詳しいプログラムのソースは、Full Screen をクリック後、ソースを表示して確認してみてください。
こうやって古い年代順に見てみると、日本発展の歴史が見えるかもしれませんね!

 

 

マルティスープでは、Google Maps はもちろんのこと、様々な地図サービスを活用したソリューションを提供しています。

弊社コーポレートサイトにも様々な事例を紹介していますので、是非ご覧ください。

 

https://www.multisoup.co.jp

 

【関連記事】こんな記事も読まれています

2016.06.22

山梨県立富士山世界遺産センター公式アプリ「ふじめぐり」

みなさん こんにちは!

本日(6/22)、山梨県立富士山世界遺産センターが開館しました!

今回は富士山世界遺産センターと「・・・

続きを読む

2017.01.12

Roads API を使って道路へスナップする

みなさん、こんにちは!

 

今回は、Google Maps API のウェブサービスのひとつ「

続きを読む

2017.06.24

ジオメトリライブラリを使って距離や面積を算出する

みなさん、こんにちは。
Google Maps JavaScript API を使用して2点間の距離やエリアの面積を計算する方法をご存知ですか・・・

続きを読む

 - Google Maps APIs, Google Maps JavaScript API, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)