์๋ ํ์ญ๋๊น,
์ ๋ JS์ ์ ๋จ์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ด๋ณด์์ ๋๋ค. ํ๋/์ถ์ ์๋ ๋ฐฉ์์ ๋ณ๊ฒฝํ ์ ์๋ ํญ๋ชฉ์ด ์์ผ๋ฉด ์ถ์ต๋๋ค. ํ๋/์ถ์ ์ tileSize๋ฅผ ๋ณ๊ฒฝํ ์ ์๋ ํด๋์ค ๋๋ ๊ธฐ๋ฅ์ด ์์ต๋๊น?
๊ฐ์ฌํฉ๋๋ค.
์๋ ํ์ธ์ @CallMarl , ๊ทํ์ ๋ฌธ์ ๋ฅผ ์ ์ดํดํ๊ณ ์๋์ง ๋ชจ๋ฅด๊ฒ ์ง๋ง ํ๋/์ถ์ ์ด๋ฒคํธ์์ ์ฒ์์ ์ฌ์ฉ๋ ๊ธฐ๋ณธ ๋ ์ด์ด๋ฅผ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค. ๋ฐ๋ผ์ ์ํ๋ ๋๋ก ๊ตฌ์ฑ๋ ๋ค๋ฅธ ๋ ์ด์ด๋ก ๋ ์ด์ด๋ฅผ ์ ํํ ์ ์์ต๋๋ค.
๋ค์์ด ํ์ํฉ๋๋ค.
import * as L from 'leaflet';
// map config
const mapUrl = 'YOUR_URL';
const baseLayer = L.tileLayer(mapUrl, { maxZoom: 20 });
const newMapUrl = 'YOUR_NEW_URL';
const newBaseLayer = L.tileLayer(newMapUrl, { maxZoom: 20 });
// init map
this.map = L.map('map', {
center: new L.LatLng(48.84195331838587, 2.2852662205696106),
zoom: 18,
layers: [baseLayer]
});
// zoom event
this.map.on('zoomend', () => {
this.map.removeLayer(baseLayer);
this.map.addLayer(newBaseLayer);
});
๋์์ด ๋์ จ๊ธธ ๋ฐ๋๋๋ค.
์๋ ํ์ธ์, Leaflet์ด ์ ์ฉํ๋ค๋ ์์์ ๋ฃ๊ฒ ๋์ด ๊ธฐ์ฉ๋๋ค!
๊ทธ๋ฌ๋ ์ด ๋ฌธ์ ์ถ์ ๊ธฐ๋ ๋ฒ๊ทธ๋ฅผ ๋ณด๊ณ ํ๊ณ ์๋ก์ด ๊ธฐ๋ฅ์ ๋ํด ๋ ผ์ํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. Leaflet ์ฌ์ฉ์ ๋ํ ์ง๋ฌธ์ gis.stackexchange.com ๋๋ stackoverflow ๋ฅผ ์ฌ์ฉํ์ญ์์ค.
์ด๊ฒ์ด ์ ๋จ์ง์ ๋ฒ๊ทธ์ด๊ฑฐ๋ ๊ธฐ๋ฅ ์์ฒญ ์ด๋ผ๊ณ ํ์ ํ๋ ๊ฒฝ์ฐ ๋ฒ๊ทธ ๋ณด๊ณ ์์ฒ๋ผ ๋ณด์ด๋๋ก ๋ฌธ๊ตฌ๋ฅผ ๋ณ๊ฒฝํ์ญ์์ค .
๋น์ ์ ์๋ง maxNativeZoom
BTW๋ฅผ ์ฐพ๊ณ ์์ ๊ฒ์
๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์๋ ํ์ธ์, Leaflet์ด ์ ์ฉํ๋ค๋ ์์์ ๋ฃ๊ฒ ๋์ด ๊ธฐ์ฉ๋๋ค!
๊ทธ๋ฌ๋ ์ด ๋ฌธ์ ์ถ์ ๊ธฐ๋ ๋ฒ๊ทธ๋ฅผ ๋ณด๊ณ ํ๊ณ ์๋ก์ด ๊ธฐ๋ฅ์ ๋ํด ๋ ผ์ํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. Leaflet ์ฌ์ฉ์ ๋ํ ์ง๋ฌธ์ gis.stackexchange.com ๋๋ stackoverflow ๋ฅผ ์ฌ์ฉํ์ญ์์ค.
์ด๊ฒ์ด ์ ๋จ์ง์ ๋ฒ๊ทธ์ด๊ฑฐ๋ ๊ธฐ๋ฅ ์์ฒญ ์ด๋ผ๊ณ ํ์ ํ๋ ๊ฒฝ์ฐ ๋ฒ๊ทธ ๋ณด๊ณ ์์ฒ๋ผ ๋ณด์ด๋๋ก ๋ฌธ๊ตฌ๋ฅผ ๋ณ๊ฒฝํ์ญ์์ค .