openlayers自定义投影瓦片

环境

后端输出 阿伯斯投影下的瓦片地图
路径：http://localhost:5000/tiles/file/z/x/y.png

前端：
需要重定义投影

方法

      //定义投影
      proj4.defs(
        'EPSG:102028',
        '+proj=aea +lat_1=27 +lat_2=45 +lat_0=35 +lon_0=105 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=mm +no_defs'
      );
      register(proj4);

      //创建投影
      var projection = new Projection({
        code: 'EPSG:102028',
        units: 'm',
        axisOrientation: 'neu',
        global: true
      });

      //区域范围
      let projectionExtent = [-2800000, -4000000, 3600000, 2200000]

      // debugger 调试
      let width = getWidth(projectionExtent);
      let resolutions = []
      let matrixIds = [];
      // 可以在元数据中找到 获取分辨率
        for(var i=0; i<=18; i++){
            resolutions[i] = (3.3482142857142862 * Math.pow(10, 7)/2**i)*0.0254/40
            matrixIds[i] = [i];
        }

        //定义瓦片
        var tilegrid = new TileGrid({
          origin: [-2800000,2200000],  // WMTS Origin在左上角，origin位置不能变；
          resolutions: resolutions,
          extent: projectionExtent,
          tileSize: [256, 256],
          matrixIds: matrixIds   
        });

        //获取zxy
        let mapXYZ = new XYZ({
            tileGrid: tilegrid,
            projection: projection,
             tileUrlFunction: function (coordinate) {
              var z = coordinate[0];
              var x = coordinate[1];
              var y = coordinate[2] 
              return 'http://192.168.1.142:5000/tiles/file/'+z+'/'+x+'/'+y+'.png'
            },
          })
          
        let map = new Map({
            target: 'map',
            layers: [
                new TileLayer({
                    source: mapXYZ
                }),
                new VectorLayer({
              source:point,
              style:pointstyle
            }) ,
                new TileLayer({
                      //瓦片网格数据源
                      source: new TileDebug({
                          //投影
                          projection: projection,
                          //获取瓦片网格信息
                          tileGrid:mapXYZ.getTileGrid()
                      })
                  })
            ],
            view: new View({
                projection: projection,
                center: [-435657.632335853, 2182.559711964801],
                zoom: 3,
                multiWorld:true,
                maxZoom:8,
                
                // extent:projectionExtentc
            })
        });

注意事项

分辨率要和后端一致
投影要定义2次
layers中和view都需要定义