openlayers发布百度地图

 瓦片数据使用http-server发布

init(){  
//2 // 自定义分辨率和瓦片坐标系
      var resolutions = [];
      var maxZoom = 18;
      // 计算百度使用的分辨率
      for (var i = 0; i <= maxZoom; i++) {
        resolutions[i] = Math.pow(2, maxZoom - i);
      }
      var tilegrid = new TileGrid({
        origin: [0, 0],
        resolutions: resolutions    // 设置分辨率
      });

      // 创建百度地图的数据源
      var baiduSource = new TileImage({
        projection: 'EPSG:3857',
        tileGrid: tilegrid,
        wrapX: false,
        tileUrlFunction: function (tileCoord, pixelRatio, proj) {

          console.log("zb:", z, x, y);
          var z = tileCoord[0];
          var x = tileCoord[1];
          var y = tileCoord[2];

          // 百度瓦片服务url将负数使用M前缀来标识
          if (x < 0) {
            x = -x;
          }
          if (y < 0) {
            y = -y;
          }

          return "http://127.0.0.1:8081/roadmap/" + z + "/" + x + "/" + y + ".png";
        }
      });
      // // 百度地图层
      var baiduMapLayer2 = new TileLayer({
        source: baiduSource
      });



      // 创建地图
      var map = new Map({
        layers: [
          baiduMapLayer2
        ],
        view: new View({
          center: transform([121.06, 31.27], 'EPSG:4326', 'EPSG:3857'),
          //extent: [53, 4, 73 ,135],
          projection: 'EPSG:3857',  // EPSG:4326格式的经纬度
          zoom: 12,
          minZoom: 11,
          maxZoom: 14
        }),
        target: "map",
      });
      console.log("map", map)
}