2 - ol3-beta.5ex 1c - Tiled WMS example 3

「wms-tiled.js（201-ol3ex.js）」は、地図を表示するのに必要な javascript です。

var layers = [
 new ol.layer.Tile({ // タイルレイヤを定義
  source: new ol.source.MapQuest({layer: 'sat'}) // MapQuest Open Aerial
 })

 new ol.layer.Tile({
  source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({
   url: 'http://demo.opengeo.org/geoserver/wms', // 参照1
   params: {'LAYERS': 'topp:states', 'TILED': true},
   extent: [-13884991, 2870341, -7455066, 6338219],
   serverType: 'geoserver'
  }))
 })
];

var map = new ol.Map({
 layers: layers,
 target: 'map',
 view: new ol.View2D({
  center: [-10997148, 4569099],
  zoom: 4
 })
});

参照1: OpenGeo Suite Library（http://suite.opengeo.org/opengeo-docs/geowebcache/index.html）の左ペインの「GeoWebCache
User Manual Contents」の「WMS - Web Map Service」リンクをクリックすると簡単な説明があります。

http://demo.opengeo.org/geoserver/ows?service=WMS&request=GetCapabilities&version=1.1.0

で情報が取得できます。「topp:states」に、「<SRS>EPSG:4326</SRS>」とあります。
OpenLayers 3 では、基本の座標系が EPSG:3857 です。
ol.sourse.Tile.WMS の extent や ol.View2D の center を EPSG:3857 の数値で表記すると自動的に変換します。

では、「topp:states」に換えて国土数値情報の東京都の行政区域（「npn:tokyo_kuiki」）を表示してみます。
データの設定に関しては、2013年11月にあるブログを参照してください。

「201-ol3ex.js」を次のように修正します。

var layers = [
 new ol.layer.Tile({
  source: new ol.source.MapQuest({layer: 'sat'})
 }),

 new ol.layer.Tile({
  source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({

/*
 *  url: 'http://demo.opengeo.org/geoserver/wms',
 *  params: {'LAYERS': 'topp:states', 'TILED': true},
 *  extent: [-13884991, 2870341, -7455066, 6338219],
 */

   url: 'http://localhost:8080/geoserver/wms?',
   params: {'LAYERS': 'npn:tokyo_kuiki', 'TILED': true},
   extent: [15456711, 4218373, 15584728, 4297181],
// EPSG:4326の座標[138.85, 35.4, 140, 35.975]を（Proj4jsで）変換 
   serverType: 'geoserver'
  }))
 })
];

var map = new ol.Map({
 layers: layers,
 target: 'map',
 view: new ol.View2D({
/*
 * center: [-10997148, 4569099],
 * zoom: 4
 */
  center: [15520720, 4257706],
  zoom: 10
 })
});