使用以下方式設定地圖的範圍 MapLibre

有時候，您不希望您的用戶能夠在整個世界上平移或縮放。如果您使用的 MapLibre是地圖控制項，您可以使用選項限制地圖控制maxBounds項的範圍或邊界，並使用minZoom和maxZoom選項限制縮放。

下列程式碼範例顯示如何初始化地圖控制項，以限制平移至特定邊界 (在本例中為 Grab 資料來源的範圍)。

注意

這些範例位於自學課程的內容中 JavaScript，並在建立網路應用程式自學課程的上下文中工作。

// 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 地圖控制maxZoom項上的minZoom和選項。

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

提示

MapLibre Map 控件還允許在運行時設置這些選項，而不是在初始化過程中，與get...和set...功能。例如，使用getMaxBounds和setMaxBounds來在執行階段變更對應邊界。