[WEB][GIS] 電子国土 Ver.4 試験版をGoogle Maps APIで表示してみる - ここのことはなかったことにするかも

はじめに

電子国土 http://portal.cyberjapan.jp/ で、Web Mercator (Google Mercator)としばしば呼ばれる投影法を採用した256*256の正方形タイル地図画像を配信する予定で、現在試験公開されています。

クライアントはOpenLayersベースですが、Google Maps APIでも使えるだろうと思ったので、勢いでやってみました。

ご注意

現時点では電子国土Ver.4は試験公開です
私的使用と公開とは雲泥の差があるので本当に公開するんだったら電子国土の利用規約を遵守してください
「わざわざGoogle Mapsに出して意味があるのか?」とかは考えたら負けということでよろしくです

コード

<!DOCTYPE html>
<html>
<head>
<title>電子国土サンプル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
//
function CyberJapanMapType() {
}
CyberJapanMapType.prototype.tileSize = new google.maps.Size(256,256);
CyberJapanMapType.prototype.minZoom = 5;
CyberJapanMapType.prototype.maxZoom = 17;
CyberJapanMapType.prototype.name = "電子国土";
CyberJapanMapType.prototype.alt = "電子国土";
CyberJapanMapType.prototype.getTile = function(tile, zoom, ownerDocument) {
  var tx = tile.x + "";
  var ty = tile.y + "";
  var txp = 7 - tx.length;
  var typ = 7 - ty.length;
  if( txp > 0 ) {
    tx = "0000000".substr(0,txp) + tx;
  }
  if( typ > 0 ) {
    ty = "0000000".substr(0,typ) + ty;
  }
  var arr_dataset = [
    null,null,null,null,null,"JAIS","JAIS","JAIS","JAIS","BAFD1000K","BAFD1000K","BAFD1000K","BAFD200K","BAFD200K","BAFD200K","DJBMM","DJBMM","DJBMM"
  ];
  var img = ownerDocument.createElement("img");
  img.style.width = this.tileSize.width + "px";
  img.style.height = this.tileSize.height + "px";
  if( arr_dataset[zoom] ) {
    var src = "http://cyberjapandata.gsi.go.jp/sqras/all/" +
      arr_dataset[zoom] + "/latest/" + zoom + "/";
    // インデクス
    for( var n = 0; n < 6; n++ ) {
      src = src + tx.charAt(n) + ty.charAt(n) + "/";
    }
    src = src + tx + ty + ".png";
    img.src = src;
  }
  return img;
};

// 初期化
var map;
var cjNode;

function init() {
  var options = {
    zoom: 5,
    center: new google.maps.LatLng(37.76,138.81),
    mapTypeControlOptions: {
      mapTypeIds: ["cyberjapan", google.maps.MapTypeId.ROADMAP]
    }
  };
  map = new google.maps.Map(document.getElementById("map"), options);
  map.mapTypes.set("cyberjapan", new CyberJapanMapType());
  map.setMapTypeId("cyberjapan");

  // 電子国土アイコンを右下に表示するようにする
  cjNode = document.createElement("div");
  cjNode.innerHTML = "<a href=\"http://portal.cyberjapan.jp/\"><img src=\"http://cyberjapan.jp/images/icon01.gif\" width=\"32\" height=\"32\" alt=\"電子国土\"></a>";
  map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(cjNode);

  // 電子国土マップを表示するときだけ電子国土アイコンを表示する
  // イベントハンドラ
  var changeCjNode = function() {
    cjNode.style.display =  map.getMapTypeId() == "cyberjapan" ? "inline" : "none";
  };
  google.maps.event.addListener(map, 'maptypeid_changed', changeCjNode);
  // いっかい実行しておく
  changeCjNode();
}

google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
  <div id="map"></div>
</body>
</html>

アイコンについて

当初 id:vec2ras さんの記事 id:vec2ras:20120731 の情報を流用して http://portal.cyberjapan.jp/favicon.ico を使っていましたが、icoからgifに変えました。…どっちがいいんでしょ?

結果

ここでは証拠写真等は出しませんが、すんなり表示できました。

ちょっとURLがイヤ

TMS (Tile Map Service) の場合、.../{レイヤ}/{Z}/{X}/{Y}.{EXT} となりますが、../{レイヤ}/??/??/??/??/??/??/{X}{Y}.{EXT} となっています。また {X},{Y}は7桁固定で左から0を埋めてます。このためTMSから見たら変則的。

1フォルダに収めるファイル数を最大100にして、ファイルをすばやく出せるようにしたんだろうと思いますが、TMSにあわせた薄いラッパを用意してくれたらうれしいと思いました。これは他人事だから好き勝手言えるんですけどね。ただ、バッファオーバランを防げれば、あとはそう難しくないのではないか、と思ったり。