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://10.52.1.38:6080/geoscene/rest/services/%E7%9F%A2%E9%87%8F%E5%BA%95%E5%9B%BE/guizhou_white_1021/MapServer',
                        layer: '0,9,42,50', //id从服务中获取 
                        matrixSet: 'default', 
                        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>