SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
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: "http://58.42.237.175:9800/ext/2019xiaygyx-proxy/arcgis/rest/services/Map/GZDOM20190201/MapServer/wmts?ua_token=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJyb290IiwiY3JlYXRlZCI6MTY1NDA3MTY3MTA1MiwiZXhwIjoxNjU1NzI3NTQyNzE2fQ.A81EWn3CeHFgm7uocJyHi9GSLftlRqPkVKZ60sSq3ZmN5Uwntabjm1KvcJSQ9M4X2NdxnWF92sAYtkKQlATpXw",
            layer: "Map_GZDOM20190201",
            style: "default",
            format: "image/jpgpng",
            matrixSet:"default",
            tileGrid: new ol.tilegrid.WMTS({
                origin: [-180, 90],// 从服务说明中获取
                resolutions: resolutions,
                matrixIds: matrixIds,
            }),
            wrapX: true
            })
                }),
            ],
            view: new ol.View({
                projection: "EPSG:4326",
                center: [106.635, 26.635],
                zoom: 5,
            })
        });
	</script>
</body>

</html>