-1

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

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

4

1 回答 1

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>
于 2021-11-02T17:41:51.307 回答