38 - 外部サービスを利用する 5 - 地理院タイル

38-5 地理院タイル（東日本大震災被災地震災直後オルソ画像、災害復興計画基図）
「地理院タイルを用いた開発（http://portal.cyberjapan.jp/help/development.html）」に「地理院タイル仕様」と「地理院タイル一覧」がります。このうちの「東日本大震災被災地震災直後オルソ画像（2011年3月～2011年4月撮影）」と「災害復興計画基図」を使ってみます。「OpenLayers Basic ESRI Map Cache Example（xyz-esri.html）」を参考に 地理院タイルを陸前高田市の地図に重ねてみます。
OpenLayers 「Spherical Mercator（http://docs.openlayers.org/library/spherical_mercator.html）」も参考にしました。

38-1 Google Map で使用した「ol018-nippon_bmi_takata_pgis.html」を続けて使います。
（他の地図サービスを試すときはコピーして使ってください。）

a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。

b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「xyz-esri.html」をクリックして選択し、「OK」ボタンをクリックします。







c 次のように「xyz-esri.html」の内容の一部をコピーして「ol018-nippon_bmi_takata_pgis.html」に貼り付け、修正します。
d 上記サイトを表示します。
e 次のように内容の一部をコピーして、「ol018-nippon_bmi_takata_pgis.html」に貼り付け、修正します。

---

<style type="text/css">
/*
 .olControlAttribution { 
  bottom: 0px;
  left: 2px;
  right: inherit;
  width: 400px;
 }
*/
/* マウスポジションを上部に設置 */
 .olControlMousePosition {
  top: 0px;
 }
 .olImageLoadError { 
/* when OL encounters a 404, don't display the pink image */
  display: none !important;
 }
</style>

---

 layers: [
// ここから追加（Google Map レイヤは削除）
  new OpenLayers.Layer.XYZ("震災直後オルソ画像", 
  "http://cyberjapandata.gsi.go.jp/xyz/toho1/${z}/${x}/${y}.jpg",
  {
   sphericalMercator: true,
   attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>"
  },{
   isBaselayer: false
 }),

 new OpenLayers.Layer.XYZ("災害復興計画基図", 
  "http://cyberjapandata.gsi.go.jp/xyz/fukkokizu/${z}/${x}/${y}.png",
  {
   sphericalMercator: true,
   attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>"
  },{
   isBaselayer: false
 }),
// ここまで

/*
 new OpenLayers.Layer.WMS( "R.Takata Height WMS",
  "http://192.168.1.200:8080/geoserver/wms",
  {
   layers: 'npn:rikuzentakata5m-epsg2452'
  },{
   isBaselayer: true
 }),
*/

---

参考 HTML
ol018tile-nippon_bmi_takata_pgis.html