MapLibre를 사용하여 맵의 범위 설정하기

사용자가 전 세계 곳곳을 이동하거나 확대/축소하지 못하도록 하고 싶은 경우가 있습니다. MapLibre의 맵 컨트롤을 사용하는 경우 maxBounds 옵션을 사용하여 맵 컨트롤의 범위 또는 경계를 제한하고 minZoom 및 maxZoom 옵션으로 확대/축소를 제한할 수 있습니다.

다음 코드 예시는 특정 경계(이 경우 Grab 데이터 소스의 범위)로 이동을 제한하도록 맵 컨트롤을 초기화하는 방법을 보여줍니다.

// Set bounds to Grab data provider region 
var bounds = [
        [90.0, -21.943045533438166], // Southwest coordinates
        [146.25, 31.952162238024968] // Northeast coordinates
    ];

var mlglMap = new maplibregl.Map(
    {
    container: 'map',
    style: mapName,
    maxBounds: bounds // Sets bounds as max
    transformRequest,
    }
);

마찬가지로 맵의 최소 및 최대 확대/축소 수준을 설정할 수 있습니다. 두 값 모두 0에서 24 사이일 수 있지만 기본값은 최소 확대/축소는 0, 최대 확대/축소는 22입니다(데이터 공급자가 모든 확대/축소 수준에서 데이터를 제공하지 않을 수도 있습니다. 대부분의 맵 라이브러리는 이를 자동으로 처리합니다). 다음 예시에서는 MapLibre Map 컨트롤의 minZoom 및 maxZoom 옵션을 초기화합니다.

// Set the minimum and maximum zoom levels 
var mlglMap = new maplibregl.Map(
    {
    container: 'map',
    style: mapName,
    maxZoom: 12,
    minZoom: 5,
    transformRequest,
    }
);