This example shows client-side raster reprojection between various projections. This is the same as the OpenLayers one but here, it uses the proj4rs library instead of the proj4js one.
proj4 OpenLayers
import Map from 'ol/Map.js'; import TileGrid from 'ol/tilegrid/TileGrid.js'; import TileLayer from 'ol/layer/WebGLTile.js'; import View from 'ol/View.js'; import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS.js'; import WMTSCapabilities from 'ol/format/WMTSCapabilities.js'; import proj4 from 'proj4'; import {OSM, TileImage, TileWMS} from 'ol/source.js'; import {createXYZ} from 'ol/tilegrid.js'; import {getCenter, getWidth} from 'ol/extent.js'; import {get as getProjection, transformExtent} from 'ol/proj.js'; import {register} from 'ol/proj/proj4.js'; ...
proj4rs
import Map from 'ol/Map.js'; import TileGrid from 'ol/tilegrid/TileGrid.js'; import TileLayer from 'ol/layer/WebGLTile.js'; import View from 'ol/View.js'; import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS.js'; import WMTSCapabilities from 'ol/format/WMTSCapabilities.js'; import {proj4} from 'proj4rs/proj4.js'; import {OSM, TileImage, TileWMS} from 'ol/source.js'; import {createXYZ} from 'ol/tilegrid.js'; import {getCenter, getWidth} from 'ol/extent.js'; import {get as getProjection, transformExtent} from 'ol/proj.js'; import {register} from 'ol/proj/proj4.js'; ...