2 - ol3.3ex 81b - WMTS Capabilities example 2

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

「WMTSCapabilities.xml」

<?xml version="1.0" encoding="UTF-8"?>

<Capabilities
 xmlns="http://www.opengis.net/wmts/1.0"
 xmlns:ows="http://www.opengis.net/ows/1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns:gml="http://www.opengis.net/gml"
 xsi:schemaLocation="http://www.opengis.net/wmts/1.0 http://schemas.opengis.net/wmts/1.0/wmtsGetCapabilities_response.xsd"
 version="1.0.0">

 <ows:ServiceIdentification>
  <ows:Title>Web Map Tile Service - GeoWebCache</ows:Title>
  <ows:ServiceType>OGC WMTS</ows:ServiceType>
  <ows:ServiceTypeVersion>1.0.0</ows:ServiceTypeVersion>
 </ows:ServiceIdentification>

 <ows:ServiceProvider>
  <ows:ProviderName>http://sdi.georchestra.org/geoserver/gwc/service/wmts</ows:ProviderName>
  <ows:ProviderSite xlink:href="http://sdi.georchestra.org/geoserver/gwc/service/wmts"/>
  <ows:ServiceContact>
   <ows:IndividualName>GeoWebCache User</ows:IndividualName>
  </ows:ServiceContact>
 </ows:ServiceProvider>

 <ows:OperationsMetadata>
  <ows:Operation name="GetCapabilities">
   <ows:DCP>
    <ows:HTTP>
     <ows:Get xlink:href="http://sdi.georchestra.org/geoserver/gwc/service/wmts?">
      <ows:Constraint name="GetEncoding">
       <ows:AllowedValues>
        <ows:Value>KVP</ows:Value>
       </ows:AllowedValues>
      </ows:Constraint>
     </ows:Get>
    </ows:HTTP>
   </ows:DCP>
  </ows:Operation>

  <ows:Operation name="GetTile">
   <ows:DCP>
    <ows:HTTP>
     <ows:Get xlink:href="http://sdi.georchestra.org/geoserver/gwc/service/wmts?">
      <ows:Constraint name="GetEncoding">
       <ows:AllowedValues>
        <ows:Value>KVP</ows:Value>
       </ows:AllowedValues>
      </ows:Constraint>
     </ows:Get>
    </ows:HTTP>
   </ows:DCP>
  </ows:Operation>

---

「281-ol3ex.js」

var parser = new ol.format.WMTSCapabilities();
/** ol.format.WMTSCapabilities
 * Format for reading WMTS capabilities data
 * WMTS capabilities データを読み込むためのフォーマット。
 * （ol3 API）
 */

var map;

// $.ajax('data/WMTSCapabilities.xml').then(function(response) {

$.ajax('v3.3.0/examples/data/WMTSCapabilities.xml').then(function(response) {
/** jQuery.ajax()
 * Perform an asynchronous HTTP (Ajax) request.
 * 非同期 HTTP（Ajax）リエストを実行します。
 * （jQuery[http://api.jquery.com/jquery.ajax/]）
 */

/** deferred.then()
 * Add handlers to be called when the Deferred object is 
 * resolved, rejected, or still in progress. 
 * deferred オブジェクトが resolved、rejected か、まだ処理途中
 * （progress）のとき呼び出されるハンドラを追加します。
 * （juery[http://api.jquery.com/deferred.then/]）
 */

 var result = parser.read(response);
 /** read()
  * Read a WMTS capabilities document.
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

 var options = ol.source.WMTS.optionsFromCapabilities(result,
 /** ol.source.WMTS.optionsFromCapabilities
  * Return: WMTS source options object.
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

  {layer: 'layer-7328', matrixSet: 'EPSG:3857'});

 var projection = ol.proj.get('EPSG:3857');
 /** ol.proj.get
  * Fetches a Projection object for the code specified.
  * 指定されたコードのプロジェクション·オブジェクトを取得します。
  * （0l3 API）
  */

 var projectionExtent = projection.getExtent();
 /** getExtent()
  * Get the validity extent for this projection.
  * この投影の有効範囲を取得。（ol3 API）
  */

 map = new ol.Map({
  layers: [
   new ol.layer.Tile({

    source: new ol.source.OSM(),
    /** ol.source.OSM 
     * Layer source for the OpenStreetMap tile server.
     * OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
     */

    opacity: 0.7
   }),
   new ol.layer.Tile({
    opacity: 1,
    extent: projectionExtent,

    source: new ol.source.WMTS(options)
    /** ol.source.WMTS
     * Layer source for tile data from WMTS servers.
     * WMTSサーバからタイルデータのレイヤソース。（ol3 API）
     */

   })
  ],
  target: 'map',
  view: new ol.View({
   center: [19412406.33, -5050500.21],
   zoom: 5
  })
 });
});