Leaflet: ํ™•๋Œ€/์ถ•์†Œ ์‹œ tileSize ์—…๋ฐ์ดํŠธ

์— ๋งŒ๋“  2020๋…„ 01์›” 09์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: Leaflet/Leaflet

์•ˆ๋…•ํ•˜์‹ญ๋‹ˆ๊นŒ,

์ €๋Š” JS์™€ ์ „๋‹จ์ง€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์ดˆ๋ณด์ž์ž…๋‹ˆ๋‹ค. ํ™•๋Œ€/์ถ•์†Œ ์ž‘๋™ ๋ฐฉ์‹์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋Š” ํ•ญ๋ชฉ์ด ์žˆ์œผ๋ฉด ์‹ถ์Šต๋‹ˆ๋‹ค. ํ™•๋Œ€/์ถ•์†Œ ์‹œ tileSize๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋Š” ํด๋ž˜์Šค ๋˜๋Š” ๊ธฐ๋Šฅ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์•ˆ๋…•ํ•˜์„ธ์š”, Leaflet์ด ์œ ์šฉํ•˜๋‹ค๋Š” ์†Œ์‹์„ ๋“ฃ๊ฒŒ ๋˜์–ด ๊ธฐ์ฉ๋‹ˆ๋‹ค!

๊ทธ๋Ÿฌ๋‚˜ ์ด ๋ฌธ์ œ ์ถ”์ ๊ธฐ๋Š” ๋ฒ„๊ทธ๋ฅผ ๋ณด๊ณ ํ•˜๊ณ  ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์— ๋Œ€ํ•ด ๋…ผ์˜ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. Leaflet ์‚ฌ์šฉ์— ๋Œ€ํ•œ ์งˆ๋ฌธ์€ gis.stackexchange.com ๋˜๋Š” stackoverflow ๋ฅผ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค.

์ด๊ฒƒ์ด ์ „๋‹จ์ง€์˜ ๋ฒ„๊ทธ์ด๊ฑฐ๋‚˜ ๊ธฐ๋Šฅ ์š”์ฒญ ์ด๋ผ๊ณ  ํ™•์‹ ํ•˜๋Š” ๊ฒฝ์šฐ ๋ฒ„๊ทธ ๋ณด๊ณ ์„œ์ฒ˜๋Ÿผ ๋ณด์ด๋„๋ก ๋ฌธ๊ตฌ๋ฅผ ๋ณ€๊ฒฝํ•˜์‹ญ์‹œ์˜ค .

๋ชจ๋“  3 ๋Œ“๊ธ€

์•ˆ๋…•ํ•˜์„ธ์š” @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๋ฅผ ์ฐพ๊ณ  ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰