Einstellen von Ausdehnungen für eine Map mit MapLibre

Es gibt Situationen, in denen Sie nicht möchten, dass Ihre Benutzer die gesamte Welt schwenken oder zoomen können. Wenn Sie MapLibre das Kartensteuerelement verwenden, können Sie die Grenzen des Kartensteuerelements mit der maxBounds Option einschränken und den Zoom mit minZoom den Optionen und einschränken. maxZoom

Das folgende Codebeispiel zeigt, wie das Map-Steuerelement initialisiert wird, um das Schwenken auf eine bestimmte Grenze (in diesem Fall die Grenzen der Grab-Datenquelle) zu beschränken.

Anmerkung

Diese Beispiele sind im Tutorial enthalten JavaScript und funktionieren im Kontext des Tutorials. Erstellen Sie eine Web-App für die Nutzung von Amazon Location Service

// 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,
    }
);

Ebenso können Sie eine minimale und maximale Zoomstufe für die Karte festlegen. Die Werte für beide können zwischen 0 und 24 liegen, obwohl die Standardwerte 0 für den minimalen Zoom und 22 für den maximalen Zoom sind (Datenanbieter stellen möglicherweise nicht Daten in allen Zoomstufen bereit). Die meisten Kartenbibliotheken handhaben dies automatisch). Im folgenden Beispiel werden die maxZoom Optionen minZoom und im Map-Steuerelement initialisiert. MapLibre

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

Tipp

Das MapLibre Map-Steuerelement ermöglicht es auch, diese Optionen zur Laufzeit und nicht während der Initialisierung mit get... und-Funktionen festzulegen. set... Verwenden Sie beispielsweise getMaxBounds und, setMaxBounds um die Kartengrenzen zur Laufzeit zu ändern.