console 命令行工具 X clear
console
<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://58.42.10.96:1733/openlayers/v6.13.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 600px;
        width: 100%;
      }
    </style>
    <script src="http://58.42.10.96:1733/openlayers/v6.13.0/build/ol.js"></script>
    <title>加载一张地图</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">

        // 计算各个缩放级别的分辨率
        const maxZoom = 21; // 从服务说明中获取
        const minResolution = 1.404675774790422; // 从服务说明中获取
        // 计算
        const resolutions = [];
        const matrixIds = [];

        for (let z = 0; z < maxZoom; ++z) {
            resolutions[z] = minResolution / Math.pow(2, z);
            matrixIds[z] = z;
        }

        var imgBaseUrl = 'http://t{0-7}.tianditu.gov.cn/img_c/wmts?tk=346777643b2058b9bebfc3e8afe9b32d'
        // 服务中的图层ID // 从服务说明中获取
        // 根据突渲染逻辑顺序，需要翻转一下
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.WMTS({
                        url:  imgBaseUrl,
                        layer: 'img',
                        version: '1.0.0',
                        style: "default",
                        matrixSet: "c",
                        format: "tiles",
                        wrapX: false,
                        tileGrid: new ol.tilegrid.WMTS({
                            extent: [-180, -90, 180, 90],
                            origin: [-180, 90],// 从服务说明中获取
                            resolutions: resolutions,
                            matrixIds: matrixIds,
                        }),
                        projection: 'EPSG:4326'
                    })
                })
            ],
            view: new ol.View({
            projection: 'EPSG:4326',
            center: [106, 27],
            zoom: 7
            })
        });
    </script>
  </body>
</html>