Wrong coordinates on MVTLayer

Description

Bellow I have two screenshots and you can see what coordinates I get from MVTLayer (the black one) which are wrong. On the white background are the correct ones from the TileLayer with some code I used in getTileData.

I assume that the issue is somewhere in the calculations happening inside the MVTLayer’s renderSubLayers.

  renderSubLayers(props) {
    const {tile} = props;
    const worldScale = Math.pow(2, tile.z);

    const xScale = WORLD_SIZE / worldScale;
    const yScale = -xScale;

    const xOffset = (WORLD_SIZE * tile.x) / worldScale;
    const yOffset = WORLD_SIZE * (1 - tile.y / worldScale);

    const modelMatrix = new Matrix4().scale([xScale, yScale, 1]);

    props.autoHighlight = false;
    props.modelMatrix = modelMatrix;
    props.coordinateOrigin = [xOffset, yOffset, 0];
    props.coordinateSystem = COORDINATE_SYSTEM.CARTESIAN;
    props.extensions = [...(props.extensions || []), new ClipExtension()];

    return super.renderSubLayers(props);
  }

Repro Steps

Check the object in the onHover/onClick events

Environment

• Framework Version: deck.gl 8.2.5
• Browser Version: Chrome 84.0
• OS: Mac OS X 10.15

[Pessimistress]

Overriding the loadOptions in MVTLayer will not fix your problem, as the default renderSubLayers expect Cartesian coordinates.

In your pickingInfo there should also be a tile object that contains the bounding box of the tile. The feature coordinates are normalized to 0-1 inside this bounding box. You can find the lnglat like this:

const {viewport} = layer.context:
const {bbox} = tile;
const [minX, minY] = viewport.projectFlat([bbox.west, bbox.north]);
const [maxX, maxY] = viewport.projectFlat([bbox.east, bbox.south]);

function cartesianToWGS84(x, y) {
  const x0 = lerp(minX, maxX, x);
  const y0 = lerp(minY, maxY, y);
  return viewport.unprojectFlat([x0, y0]);
}

[geobourazanas]

Thanks so much @Pessimistress for clarifying, that makes so much sense. Cheers.