Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Custom layer - WMTS
Explore in the sandbox
Share
View live sample
Download as a zip file
Description
At version 2.4 of the ArcGIS API for JavaScript a new class WMTSLayer was added to the API. This sample shows how to create a custom layer using Web Map Tile Service (WMTS) as an example.
- A new custom layer is created that extends from the TiledMapServiceLayer to draw the WMTS tiles.
- Next a constructor for the layer is defined. In addition to the spatial reference and extents, it defines the tileInfo object.
- TileInfo contains information about the cache tile dimensions and scales.
- The getTileUrl method generates a tile URL from the level, row and col arguments.
Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>OpenGeo WMTS Service</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.26/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.26/"></script>
<script>
require([
"dojo/_base/declare",
"esri/map",
"esri/layers/WMTSLayer",
"esri/layers/TiledMapServiceLayer",
"esri/geometry/Extent",
"esri/SpatialReference",
"esri/layers/TileInfo",
"dojo/domReady!"
], function (declare, Map, WMTSLayer, TiledMapServiceLayer, Extent, SpatialReference, TileInfo){
// Create ogc.WMTSLayer custom layer
var CustomWMTSLayer = declare([TiledMapServiceLayer], {
declaredClass: "ogc.WMTSLayer",
constructor: function (){
this.copyright = '<a href="http://v2.suite.opengeo.org/geoserver/gwc/service/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities">WMTS</a> served by <a href="http://opengeo.org/">OpenGeo</a>';
this.version = "1.0.0";
this.identifier = "usa:states";
this.imageFormat = "image/png";
this.tileMatrixSet = "EPSG:900913";
this.spatialReference = new SpatialReference({wkid: 3857});
this.initialExtent = new Extent(-20037508.342789, -20037508.342789, 20037508.342789, 20037508.342789, this.spatialReference);
this.fullExtent = new Extent(-20037508.342789, -20037508.342789, 20037508.342789, 20037508.342789, this.spatialReference);
//
this.tileInfo = new TileInfo({
"dpi": "90.71428571427429",
"format": "image/png",
"compressionQuality": 0,
"spatialReference": {
"wkid": "3857"
},
"rows": 256,
"cols": 256,
"origin": {
"x": -20037508.34,
"y": 20037508.34
},
// Scales in DPI 96
"lods": [
{
"level": 0,
"scale": 591657527.591555,
"resolution": 156543.033928
}, {
"level": 1,
"scale": 295828763.795777,
"resolution": 78271.5169639999
}, {
"level": 2,
"scale": 147914381.897889,
"resolution": 39135.7584820001
}, {
"level": 3,
"scale": 73957190.948944,
"resolution": 19567.8792409999
}, {
"level": 4,
"scale": 36978595.474472,
"resolution": 9783.93962049996
}, {
"level": 5,
"scale": 18489297.737236,
"resolution": 4891.96981024998
}, {
"level": 6,
"scale": 9244648.868618,
"resolution": 2445.98490512499
}, {
"level": 7,
"scale": 4622324.434309,
"resolution": 1222.99245256249
}, {
"level": 8,
"scale": 2311162.217155,
"resolution": 611.49622628138
}, {
"level": 9,
"scale": 1155581.108577,
"resolution": 305.748113140558
}, {
"level": 10,
"scale": 577790.554289,
"resolution": 152.874056570411
}, {
"level": 11,
"scale": 288895.277144,
"resolution": 76.4370282850732
}, {
"level": 12,
"scale": 144447.638572,
"resolution": 38.2185141425366
}, {
"level": 13,
"scale": 72223.819286,
"resolution": 19.1092570712683
}, {
"level": 14,
"scale": 36111.909643,
"resolution": 9.55462853563415
}, {
"level": 15,
"scale": 18055.954822,
"resolution": 4.77731426794937
}, {
"level": 16,
"scale": 9027.977411,
"resolution": 2.38865713397468
}, {
"level": 17,
"scale": 4513.988705,
"resolution": 1.19432856685505
}, {
"level": 18,
"scale": 2256.994353,
"resolution": 0.597164283559817
}, {
"level": 19,
"scale": 1128.497176,
"resolution": 0.298582141647617
}
]
});
this.loaded = true;
this.onLoad(this);
},
getTileUrl: function (level, row, col){
var urlTemplate = "http://v2.suite.opengeo.org/geoserver/gwc/service/wmts" +
"?SERVICE=WMTS&VERSION=" + this.version +
"&REQUEST=GetTile" +
"&LAYER=" + this.identifier +
"&STYLE=_null" +
"&FORMAT=" + this.imageFormat +
"&TILEMATRIXSET=" + this.tileMatrixSet +
"&TILEMATRIX=" + this.tileMatrixSet + ":" +
level + "&TILEROW=" + row + "&TILECOL=" + col;
return urlTemplate;
}
});
var map = new Map("map", {
basemap: "streets",
center: [-96.77, 36.91],
zoom: 4
});
// add WMTS layer http://v2.suite.opengeo.org/geoserver/gwc/service/wmts
var customWMTSLayer = new CustomWMTSLayer();
map.addLayer(customWMTSLayer);
});
</script>
</head>
<body class="claro">
<div id="map"></div>
</body>
</html>