SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
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 mapurl = "http://61.243.1.250:9100/service/api/egis/base/v1/wrts/getTile?"

    let resolutions = [];
    let baiduX,baiduY;

    for (let i = 0; i < 19; i++) {
        resolutions[i] = Math.pow(2, 18 - i);
      }
      let tilegrid = new ol.tilegrid.TileGrid({
        origin: [0, 0],
        resolutions: resolutions
      });
      let baidu_source = new ol.source.TileImage({
        projection:"EPSG:3857",
        tileGrid: tilegrid,
        tileUrlFunction: function(tileCoord) {
          if (!tileCoord)  return "";
          let z = tileCoord[0];
          let x = tileCoord[1];
          let y = tileCoord[2];
          // 对编号xy处理
          //baiduX = (x<0) ? x : 'M'+(-x);
          baiduX = x;
          baiduY = -y;
          return mapurl+"x="+baiduX+"&y="+baiduY+"&level="+z;
        }
      });
      let baidu_layer = new ol.layer.Tile({
        source: baidu_source
      });
    var map = new ol.Map({
      target: 'map',
      layers: [
      baidu_layer
      ],
      view: new ol.View({
        projection: "EPSG:4326",
        center: [106.42, 26.35],
        zoom: 8
      })
    });
    </script>
  </body>
</html>