38 - 外部サービスを利用する 2 - Microsoft 地図 Bing Map

38-2 Microsoft 地図　Bing Map
Bing Map は、Bing Map API により、無料のウェッブサイトに表示できる無料のサービスです。商用ウェッブサイトで使用するときは、有償ライセンスが必要です。詳しくは「Bing Maps Licensing Options」（http://www.microsoft.com/maps/Licensing/licensing.aspx）ページをみてください。「Help Me Decide」で

「Who will be using this application?」
 -> Consumers (for the general public)
「What is your application type?」
 -> My application is a Public Website for Education or Non-Profit organizations.
「Next steps to license」
 -> Bing Maps account

と進んでアカウントを取得します。
社内（組織内）だけで使用する場合などは、問い合わせてください。

OpenLayers の Development Examples の「Bing Example（http://openlayers.org/dev/examples/bing.html）」と「OpenLayers Spherical Mercator Example（http://openlayers.org/dev/examples/spherical-mercator.html）」（両方とも example フォルダにもありました。）を参考に Bing Map を陸前高田市の地図に重ねてみます。
OpenLayers 「Spherical Mercator（http://docs.openlayers.org/library/spherical_mercator.html）」も参考にしました。

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

a 上記サイトを右クリックしてソースを表示します。
b 次のように内容の一部をコピーして、「ol018-nippon_bmi_takata_pgis.html」に貼り付け、修正します。

---

<style type="text/css">
/*
 .olControlAttribution { 
  bottom: 0px;
  left: 2px;
  right: inherit;
  width: 400px;
 }
*/
/* マウスポジションを上部に設置 */
 .olControlMousePosition {
  top: 0px;
 }
</style>

---

var epsg2452 = new OpenLayers.Projection("EPSG:2452");
var epsg900913 = new OpenLayers.Projection("EPSG:900913");
//var bounds =  new OpenLayers.Bounds(55900,-118000,77500,-98100);
var bounds =  new OpenLayers.Bounds(50000,-118000,77500,-98100);
var epsg900913bounds = bounds.transform(epsg2452, epsg900913);

// create Bing layers
// API key for http://openlayers.org. Please get your own at
// http://bingmapsportal.com/ and use that instead.
var apiKey = "At8z******"; //追加

---

  layers: [
// ここから追加（Google Map レイヤは削除）
   new OpenLayers.Layer.Bing({
    key: apiKey,
    type: "Road",
    wrapDateLine: true
   },{
   isBaselayer: false
  }),

   new OpenLayers.Layer.Bing({
    key: apiKey,
    type: "Aerial",
    wrapDateLine: true
   },{
    isBaselayer: false
  }),

   new OpenLayers.Layer.Bing({
    key: apiKey,
    type: "AerialWithLabels",
    wrapDateLine: true
   },{
    isBaselayer: false
  }),
// ここまで

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

   new OpenLayers.Layer.WMS( "Iwate Kuiki WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
    layers: 'npn:iwate_kuiki',
    transparent: true,
    format: 'image/png'
    },{
     isBaselayer: false
   }),

---