I wanted to add another map on top of openlayers, so I wrote the code in React, but the png order came out differently. The value of tileCoord in javasciprt is different in react.

import React, { useEffect, useRef } from ‘react’;

import ‘ol/ol.css’;

import Map from ‘ol/Map’;

import View from ‘ol/View’;

import TileLayer from ‘ol/layer/Tile’;

import XYZ from ‘ol/source/XYZ’;

import Overlay from ‘ol/Overlay’;

import TileGrid from ‘ol/tilegrid/TileGrid.js’;

import Projection from ‘ol/proj/Projection.js’;

import proj4 from ‘proj4’;

const MapComponent = () => {

const mapRef = useRef(null);

useEffect(() => {

const resolutions = [4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25];

const extent = [(-30000-524288), (-60000-524288), (494288+524288), (988576+524288)];

proj4.defs(‘EPSG:5181’, ‘+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +units=m +no_defs’);

const defaultZoom = 5;

const projection = new Projection({

code: ‘EPSG:5181’,

extent: extent,

units: ‘m’

});

const tileLayer = new TileLayer({

title: ‘Daum Street Map’,

visible: true,

type: ‘base’,

source: new XYZ({

projection: projection,

tileSize: 256,

maxZoom: resolutions.length – 1,

tileGrid: new TileGrid({

origin: [extent[0], extent[1]],

resolutions: resolutions

}),

tileUrlFunction: function (tileCoord, pixelRatio, projection) {

if (tileCoord == null) return undefined;

var res = this.getTileGrid().getResolutions();

var sVal = res[tileCoord[0]];

var yLength = 988576 – (-60000) + 524288 + 524288;

var yTile = yLength / (sVal * this.getTileGrid().getTileSize());

var tileGap = Math.pow(2, (tileCoord[0] -1));

yTile = yTile – tileGap;

var xTile = tileCoord[1] – tileGap;

return ‘http://map’ + Math.floor( (Math.random() * (4 – 1 + 1)) + 1 ) + ‘.daumcdn.net/map_2d_hd/2111ydg/L’ + (15 – tileCoord[0]) + ‘/’ + (yTile + tileCoord[2]) + ‘/’ + xTile + ‘.png’;

},

})

});

const map = new Map({

layers: [tileLayer],

target: mapRef.current,

view: new View({

projection: projection,

maxResolution: resolutions[0],

center: [(extent[0] + extent[2]) / 2, (extent[1] + extent[3]) / 2.5],

zoom: defaultZoom,

maxZoom: 22

})

});

return () => map.dispose();

}, []);

return <div ref={mapRef} style={{ width: ‘100%’, height: ‘400px’ }} />;

};

export default MapComponent;