Estoy mostrando las coordenadas de dónde está el mouse en la pantalla, solo parece que las coordenadas están centradas de manera que el eje x es negativo y el eje y es positivo (0, 0 está en la parte inferior derecha del mapa) . Preferiblemente, tendría los ejes x e y positivos (0, 0 está en la parte inferior izquierda de la pantalla), pero no puedo descifrar qué controla esto.

Aquí está mi código (para el componente en un contenedor de función de reacción):

 const MapWrapper : React.FC<IMapWrapper> = () => { const [map, setMap] = useState<Map>(); const mapElement = useRef<HTMLDivElement>(null); const mapRef = useRef<Map>(); mapRef.current = map; const mousePositionElement = useRef<HTMLDivElement>(null); const mousePositionControl = new MousePosition({ coordinateFormat: createStringXY(4), target: mousePositionElement.current?.id || undefined, className: 'custom-mouse-position', }) useEffect(() => { const map = new Map({ controls: defaultControls().extend([mousePositionControl]), target: mapElement.current || undefined, layers: [ new TileLayer({ source: new XYZ({ url: ".../{z}/{x}/{y}.jpg", minZoom: 8, maxZoom: 16, }) }), ], view: new View({ center: [0, 0], zoom: 12.5, maxZoom: 16, minZoom: 8, }), }); setMap(map); }, []); return ( <> <div style={{height:'100vh',width:'100%', "background": "black"}} ref={mapElement} className="map-container"> </div> <div id="mouse-position" ref={mousePositionElement} /> </> ); }

Entonces, por defecto, está usando la proyección EPSG: 3857, también probé EPSG: 4326 y una proj4 personalizada, pero no estoy seguro de que esté relacionado con eso, parece cambiar la escala pero no la dirección.

Algo importante a tener en cuenta es que para los mosaicos de mapa que estoy usando, tuve que cambiar el estándar {z}/{y}/{x} a {z}/{x}/{y}. ¿No estás seguro de si esto podría tener un efecto?

¡Cualquier idea será de gran ayuda!