使用设置地图的范围 MapLibre

有时您不希望您的用户能够在整个世界中平移或缩放。如果您使用 MapLibre的是地图控件，则可以使用选项限制地图控件的范围或边界，并使用minZoom和maxBoundsmaxZoom选项限制缩放。

以下代码示例显示了如何初始化地图控件以将平移限制在特定边界（在本例中为 Grab 数据源的范围）。

注意

这些示例采用 javascript 格式，可在创建 Web 应用程序教程的上下文中使用。

// 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 地图控件上的minZoom和maxZoom选项。

// 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在运行时更改地图边界。