「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
})
});
});
