如何在 Mapbox 中将地图限制为地理区域？答案

【问题标题】：How do I limit map to geographical area in Mapbox?如何在 Mapbox 中将地图限制为地理区域？
【发布时间】：2021-12-17 05:25:25
【问题描述】：

我正在使用 Mapbox GL JS 开发游乐园上的地图，并且只想渲染公园地理边界内的所有内容。我该怎么做？

编辑：澄清一下，this 是我想做的，除了不是国家而是地理区域。

【问题讨论】：

仍然没有解决这个问题。有人知道吗？

标签： javascript mapbox mapbox-gl-js mapbox-studio

【解决方案1】：

在 mapbox 类中，您可以声明 maxbounds。将 maxBounds 设置为游乐园所在的位置。如果您需要更多信息，请告诉我！

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Restrict map panning to an area</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js"></script>
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        // TO MAKE THE MAP APPEAR YOU MUST
        // ADD YOUR ACCESS TOKEN FROM
        // https://account.mapbox.com
        mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    // Set bounds to San Francisco, California.
    const bounds = [
    [-122.66336, 37.492987], // Southwest coordinates
    [-122.250481, 37.871651] // Northeast coordinates
    ];
     
    const map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: [-122.433247, 37.742646], // starting position
    zoom: 12, // starting zoom
    maxBounds: bounds // Set the map's geographical boundaries.
    });
    </script>
</body>

</html>

【讨论】：

还请原谅不好的缩进，我是堆栈溢出的新手
谢谢@AFreeChameleon，但我希望地理区域是多边形，而不是矩形。