使用设置地图的范围 MapLibre

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

以下代码示例演示如何初始化地图控件以将平移限制到特定边界（在本例中为 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 Map 控件上的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 在运行时更改地图边界。