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;
먹고래 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.