Custom tile map not displayed correctly

Question

I am using a XYZ layer to display the custom tile map generated from gdal2tiles, I have set a tile grid like below:

  //width =1065, height =950
  this.extent = [0.0, -this.imgHeight, this.imgWidth, 0];
     this.view = new View({
        projection: viewProjection, //EPSG:3857
        center: getCenter(viewProjection.getExtent()),
        maxResolution: 8.0,
        resolution: 4,
        extent: viewProjection.getExtent(),
    });
    this.projection = new Projection({
        extent: this.extent,
        code: "EPSG:12341234",
        units: "m",
    });
  
  const tileGrid = new TileGrid({
        resolutions: [8, 4, 2, 1],
        origin: [0, 0],
        tileSize: 256,
        extent: this.projection.getExtent(),
        minZoom: 1,
    });
 this.tileSource = new XYZ({
        url: "assets/tile_map/{z}/{x}/{-y}.png",
        tileGrid,
        maxZoom: 4,
        tileSize: 256,
        maxResolution: 8,
        projection: this.projection,
    });

and the tilemap source:

<?xml version="1.0" encoding="utf-8"?>
<TileMap version="1.0.0" tilemapservice="http://tms.osgeo.org/1.0.0">
  <Title>zhonglv_office.png</Title>
  <Abstract></Abstract>
  <SRS></SRS>
  <BoundingBox minx="0.00000000000000" miny="-950.00000000000000" maxx="1065.00000000000000" maxy="0.00000000000000"/>
  <Origin x="0.00000000000000" y="-950.00000000000000"/>
  <TileFormat width="256" height="256" mime-type="image/png" extension="png"/>
  <TileSets profile="raster">
    <TileSet href="0" units-per-pixel="8.00000000000000" order="0"/>
    <TileSet href="1" units-per-pixel="4.00000000000000" order="1"/>
    <TileSet href="2" units-per-pixel="2.00000000000000" order="2"/>
    <TileSet href="3" units-per-pixel="1.00000000000000" order="3"/>
  </TileSets>
</TileMap>

The js code generated by gdal2tiles:

var map;
          var mapBounds = new OpenLayers.Bounds( 0.0, -950.0, 1065.0, 0.0);
          var mapMinZoom = 0;
          var mapMaxZoom = 3;
          var emptyTileURL = "http://www.maptiler.org/img/none.png";
          OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;

          function init(){
              var options = {
                  div: "map",
                  controls: [],
                  maxExtent: new OpenLayers.Bounds(0.0, -950.0, 1065.0, 0.0),
                  maxResolution: 8.000000,
                  numZoomLevels: 4
              };
              map = new OpenLayers.Map(options);

              var layer = new OpenLayers.Layer.TMS("TMS Layer", "",
              {
                  serviceVersion: '.',
                  layername: '.',
                  alpha: true,
                  type: 'png',
                  getURL: getURL
              });

              map.addLayer(layer);
              map.zoomToExtent(mapBounds);
    
              map.addControls([new OpenLayers.Control.PanZoomBar(),
                               new OpenLayers.Control.Navigation(),
                               new OpenLayers.Control.MousePosition(),
                               new OpenLayers.Control.ArgParser(),
                               new OpenLayers.Control.Attribution()]);
          }
    
          function getURL(bounds) {
              bounds = this.adjustBounds(bounds);
              var res = this.getServerResolution();
 
              var x = Math.round((bounds.left - this.tileOrigin.lon) / (res * this.tileSize.w));
              var y = Math.round((bounds.bottom - this.tileOrigin.lat) / (res * this.tileSize.h));
             
              var z = this.getServerZoom();
              var path = this.serviceVersion + "/" + this.layername + "/" + z + "/" + x + "/" + y + "." + this.type;
              var url = this.url;
              if (OpenLayers.Util.isArray(url)) {
                  url = this.selectUrl(path, url);
              }
              if (mapBounds.intersectsBounds(bounds) && (z >= mapMinZoom) && (z <= mapMaxZoom)) {
                  return url + path;
              } else {
                  return emptyTileURL;
              }
          }

Wrong output I need to add 256 to the top i.e.[0,-704] to get the closest result

Wrong output (Using same projection for view and source with origin=[0,950], extent=[0,0,width,height], url=/z/x/y.png; tried origin=[0,-950], no tiles displayed on the map)

Expected output

Answer 1

It seems tile x 0, y 0 at any zoom level is at the bottom left (i.e. TMS). As you have a custom tile grid the simplest solution would be to set the tilegrid origin at the bottom left and use a tileUrlFunction replacing

 url: "assets/tile_map/{z}/{x}/{-y}.png",

with

 tileUrlFunction: function(coordinate) {
   return 'assets/tile_map/' + coordinate[0] + '/' +
     coordinate[1] + '/' + (-coordinate[2] - 1) + '.png';
 }