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>
        html,body{
            height:100%;
            padding: 0;
            margin: 0;
        }

        .map {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .btns{
            position: fixed;
            top: 10px;
            right: 20px;
            background: skyblue;
            padding: 20px;
        }
    </style>
    <script src="http://58.42.10.96:1733/openlayers/v6.13.0/build/ol.js"></script>
    
    <!-- 引入坐标转换库 -->
    <script src="//cdn.bootcdn.net/ajax/libs/proj4js/2.7.4/proj4.min.js"></script>
    <title>加载一张地图</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div class="btns">
        <input type="checkbox" name="layer" onclick="checkboxOnclick(this)"> <label for="layer">管控单元图层</label>
    </div>
    <script type="text/javascript">

        // 定义坐标系, 这里定义之后后续代码中的坐标系代码 4490 才会有效
        proj4.defs("EPSG:4490","+proj=longlat +ellps=GRS80 +no_defs");
        ol.proj.proj4.register(proj4);

        // 大气环境图的切片参数
        // 计算各个缩放级别的分辨率
        const maxZoom2 = 21; // 从服务说明中获取
        const minResolution2 = 1.4062528387159217; // 从服务说明中获取
        // 计算
        const resolutions2 = new Array(maxZoom2);
        const matrixIds2 = new Array(maxZoom2);
        for (let z = 0; z < maxZoom2; ++z) {
            resolutions2[z] = minResolution2 / Math.pow(2, z);
            matrixIds2[z] = z;
        }


        // 管控单元的切片参数
        const maxZoom = 23;
        const minResolution = 0.703125;
        // 计算
        const resolutions = new Array(maxZoom);
        const matrixIds = new Array(maxZoom);
        for (let z = 0; z < maxZoom; ++z) {
            resolutions[z] = minResolution / 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://59.215.206.200:9800/atoms-proxy/Gis/rest/services/atoms/MapServer/WMTS?ua_token=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJsdWNodW4iLCJjcmVhdGVkIjoxNjc5NDc4NDcwNzk3LCJleHAiOjE3NDMzNTA0MDB9.-b9cNsST9x-eU4WFPl0TuCye5m5L4dGzYguQYUNbpsIdTOtFrE_yZCE2lvYY2Fk8Xcqgt5A5Hhr8HFQW2spQkQ',
                        layer: '2,3,4,5,6',
                        style: 'default',
                        format: 'image/png',
                        matrixSet: 'default028mm',
                        tileGrid: new ol.tilegrid.WMTS({
                            origin: [-180, 90],// 从服务说明中获取
                            resolutions: resolutions2,
                            matrixIds: matrixIds2,
                        }),
                        wrapX: true
                    })
                })
            ],
            view: new ol.View({
            projection: 'EPSG:4490',
            center: [106, 27],
            zoom: 8
            })
        });

        const ideUnitLayer = new ol.layer.Tile({
            source: new ol.source.WMTS({
                url:'http://59.215.206.200:9800/ext/intercontrol2-proxy/ysbdserver/rest/services/%E4%B8%89%E7%BA%BF%E4%B8%80%E5%8D%95/048%E7%AE%80%E5%8C%96%E7%AE%A1%E6%8E%A7%E5%8D%95%E5%85%83/MapServer/WMTS?ua_token=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJsdWNodW4iLCJjcmVhdGVkIjoxNjc5NDc4NDcwNzk3LCJleHAiOjE3NDMzNTA0MDB9.-b9cNsST9x-eU4WFPl0TuCye5m5L4dGzYguQYUNbpsIdTOtFrE_yZCE2lvYY2Fk8Xcqgt5A5Hhr8HFQW2spQkQ',
                layer: '0',
                style: 'default',
                format: 'image/png',
                matrixSet: 'default',
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-180, 90],// 从服务说明中获取
                    resolutions: resolutions,
                    matrixIds: matrixIds,
                }),
                wrapX: true
            })
        })

        function checkboxOnclick(checkbox){
            if ( checkbox.checked){
                map.addLayer(ideUnitLayer)
            } else {
                map.removeLayer(ideUnitLayer)
            }
        }
    </script>
  </body>
</html>