console
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css">
<style>
html,body,
.map {
height: 100%;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>
<title>WMTS加载</title>
<script src="https://cdn.bootcdn.net/ajax/libs/proj4js/2.7.4/proj4.min.js"></script>
</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
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) {
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:'http://10.52.1.181:9800/slsj-gz_shuik_dian-proxy/Gis/rest/services/slsj.gz_shuik_dian/MapServer/WMTS?ua_token=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJjeXgiLCJjcmVhdGVkIjoxNjUzMjk4NzE0ODM0LCJleHAiOjE3NjcxNzc0ODN9.l59p76jtKp6kiK80VSVDLqIKqj0M4HRFLSI7k9svPJ95BoElX1NBOH3ZgGYPkfMmRbPAetSgtCEvYtdr6wQVrQ',
layer: '1,2',
matrixSet: 'default028mm',
style:'default',
format: "image/png",
wrapX: true
})
})
],
view: new ol.View({
projection: projection,
center: [106.42, 26.35],
zoom: 5
})
});
</script>
</body>
</html>