2 - ol3ex 27b - TileJSON example 2

「tilejson.js（227-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。

Mapbox（https://www.mapbox.com/）は、Mapbox-OpenStreetMap Wiki（http://wiki.openstreetmap.org/wiki/MapBox）に、

*****
Mapbox (mapbox.com) offers commercial mapping services. Many of them use OpenStreetMap data and involve large open-source efforts.
Mapbox（mapbox.com）は、商用マッピングサービスを提供しています。それらの多くは、OpenStreetMapのデータを使用し、大きなオープンソースの効果を伴っています。
*****

とあります。地図を作成して使用するには、ID を登録します。詳しくは Mapbox のホームページを参照してください。今回は、「TileJSON example」通りに試してみます。TileJSONについては、「Web services（https://www.mapbox.com/developers/api/）」の「TileJSON（https://www.mapbox.com/developers/api/maps/#tilejson）」を参照してください。

var map = new ol.Map({
 layers: [
  new ol.layer.Tile({
  /** ol.layer.Tile 
   * For layer sources that provide pre-rendered, tiled 
   * images in grids that are organized by zoom levels for 
   * specific resolutions. 
   * プリレンダリング（事前描画）を提供するレイヤソースのための、
   * 特定の解像度でのズームレベルによって編成されているグリッドの
   * タイルイメージ。（ol3 API）
   */
   source: new ol.source.TileJSON({
   /** ol.source.TileJSON 
    * Layer source for tile data in TileJSON format.
    * TileJSON フォーマットのタイルデータのためのレイヤソース。
    *（ol3 API）
    */

    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp',
    crossOrigin: 'anonymous'
   /** crossOrigin
    * The crossOrigin attribute for loaded images. Note 
    * that you must provide a crossOrigin value if you 
    * are using the WebGL renderer or if you want to 
    * access pixel data with the Canvas renderer. See 
    * https://developer.mozilla.org/en-US/docs/Web/HTML/
    * CORS_enabled_image for more detail.
    * ロードされたイメージの crossOrigin属性。WebGLのレンダ
    * ラーを使用している場合、または、キャンバスレンダラでピ
    * クセルデータにアクセスする場合、crossOrigin 値を提供な
    * ければならないことに注意してください。詳細は 
    * https://developer.mozilla.org/en-US/docs/Web/HTML/
    * CORS_enabled_image を参照してください。（ol3 API）
    */
   })
  })
 ],

 renderer: exampleNS.getRendererFromQueryString(),
 //'example-behavior.js' により URL にある renderer を返します。
 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});