console
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.css" type="text/css">
<style>
html,body,
.map {
height: 100%;
width: 100%;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.js"></script>
<title>WMTS加载</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
//通过坐标系 计算各个缩放级别的分辨率
var projection = ol.proj.get('EPSG:4326'); // 坐标系
var projectionExtent = projection.getExtent(); // 坐标系四至
var tileWidth = 256 // 瓦片宽度，一般都是256
var projectionWidth = ol.extent.getWidth(projectionExtent) / tileWidth; // 坐标系的宽度
var resolutions = new Array(18); // 分辨率组
var matrixIds = new Array(18); // 缩放级别组
var maxZoom = 21
for (var z = 0; z < maxZoom; ++z) {
//分辨率和matrixIds数组
resolutions[z] = projectionWidth / Math.pow(2, z);
matrixIds[z] = z;
}
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.WMTS({
url:'https://20.0.1.59:8058/kailide_blue_1103-proxy/Gis/rest/services/kailide_blue_1103/MapServer/WMTS?ua_token=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ6aG91YmFuIiwiY3JlYXRlZCI6MTYyOTM2MjM2MDEzMSwiZXhwIjoxNjY0NDY3MjAwfQ.bDt_NZYjCmCyabUvyoBWiA2l8ojYFysbBa8WdUNspn3gP01MclnFrnRJDIygCSWao5w3lBNTEEM3hp9se3gXZg&',
layer: '1,5,17,36,46,51', //id从服务中获取
matrixSet: 'default028mm',
style:'default',
format: "image/png",
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),// 从服务说明中获取
resolutions: resolutions,
matrixIds: matrixIds,
}),
wrapX: true
})
})
],
view: new ol.View({
projection: projection,
center: [106.42, 26.35],
zoom: 5
})
});
</script>
</body>
</html>