Custom rendering by pixel?

[tangzijun]

I want to render a 20-pixel-wide rectangle using a custom layer.

I'm using the following JavaScript function to map pixels to WebGL coordinates, but this method doesn't work when using a globe projection. I'd like to know if there's a correct way to do this.

function toWebGlSizeByPixel(map: maplibregl.Map, pixelSize: number) {
  const bounds = map.getBounds();

  const leftBottomLngLat = bounds.getSouthWest();
  const rightTopLngLat = bounds.getNorthEast();

  const leftBottomPixel = map.project(leftBottomLngLat);
  const rightTopPixel = map.project(rightTopLngLat);

  const leftBottomNormalize = maplibregl.MercatorCoordinate.fromLngLat(leftBottomLngLat);
  const rightTopNormalize = maplibregl.MercatorCoordinate.fromLngLat(rightTopLngLat);

  const bl = pixelSize / (rightTopPixel.x - leftBottomPixel.x);
  const sizeNormalize = bl * (rightTopNormalize.x - leftBottomNormalize.x);

  return sizeNormalize;
}

Planar projection：

Spherical projection：

[HarelM]

Have you looked at the triangle globe example?
https://maplibre.org/maplibre-gl-js/docs/examples/add-a-simple-custom-layer-on-a-globe/

[tangzijun]

Have you looked at the triangle globe example? https://maplibre.org/maplibre-gl-js/docs/examples/add-a-simple-custom-layer-on-a-globe/

Yes, I've seen that the triangle will follow the scale when zooming, but this is not what I need. What I need is that the zoom changes but the drawn graphics always remain fixed pixels.

The following is normal：

The following is normal：

The following is wrong. When I am at the North Pole or the South Pole, there will still be calculation errors. So I think my current code is immature. I need a mature calculation method. I don't know how to do it.

This is my current code：

export function toWebGlSizeByPixel(map: IMap, pixelSize: number) {
  const center = map.getCenter();

  const leftLngLat = new maplibregl.LngLat(center.lng - 1, center.lat);
  const rightLngLat = new maplibregl.LngLat(center.lng + 1, center.lat);

  const leftPixel = map.project(leftLngLat);
  const rightPixel = map.project(rightLngLat);

  const leftNormalize = maplibregl.MercatorCoordinate.fromLngLat(leftLngLat);
  const rightNormalize = maplibregl.MercatorCoordinate.fromLngLat(rightLngLat);

  const bl = pixelSize / (rightPixel.x - leftPixel.x);
  const sizeNormalize = bl * (rightNormalize.x - leftNormalize.x);

  return sizeNormalize / 2;
}