将地图适配到边界框

将地图视图适配到指定的地理边界;
<!DOCTYPE html>
<html lang="en">
<head>
    <title>将地图适配到边界框</title>
    <meta property="og:description" content="将地图视图适配到指定的地理边界" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<style>
    .map-overlay {
        font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
        position: absolute;
        width: 200px;
        top: 0;
        left: 0;
        padding: 10px;
    }

    .map-overlay .map-overlay-inner {
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .map-overlay-inner fieldset {
        border: none;
        padding: 0;
        margin: 0 0 10px;
    }

    .map-overlay-inner fieldset:last-child {
        margin: 0;
    }

    .map-overlay-inner select {
        width: 100%;
    }

    .map-overlay-inner p {
        margin: 0;
    }
</style>

<div id="map"></div>

<div class="map-overlay top">
    <div class="map-overlay-inner">
        <fieldset>
            <label>选择城市</label>
            <select id="city" name="city">
                <option value="tokyo">东京</option>
                <option value="singapore">新加坡</option>
                <option value="beijing">北京</option>
                <option value="berlin">柏林</option>
                <option value="san-francisco">旧金山</option>
                <option value="oslo">奥斯陆</option>
                <option value="melbourne">墨尔本</option>
                <option value="la">洛杉矶</option>
                <option value="toronto">多伦多</option>
                <option value="mumbai">孟买</option>
            </select>
        </fieldset>
        <fieldset>
            <label>选择缩放类型</label>
            <select id="zoom-type" name="zoom-type">
                <option value="fit">适配 (fitBounds)</option>
                <option value="ease">平移 (easeTo)</option>
                <option value="jump">跳转 (jumpTo)</option>
                <option value="fly">飞行 (flyTo)</option>
            </select>
        </fieldset>
    </div>
</div>

<script>
    const cities = {
        'tokyo': {
            name: '东京',
            bbox: [139.60, 35.53, 140.11, 35.82]
        },
        'singapore': {
            name: '新加坡',
            bbox: [103.77, 1.33, 103.83, 1.35]
        },
        'beijing': {
            name: '北京',
            bbox: [116.40, 39.91, 116.41, 39.92]
        },
        'berlin': {
            name: '柏林',
            bbox: [13.37, 52.50, 13.40, 52.52]
        },
        'san-francisco': {
            name: '旧金山',
            bbox: [-122.45, 37.74, -122.41, 37.76]
        },
        'oslo': {
            name: '奥斯陆',
            bbox: [10.74, 59.91, 10.77, 59.92]
        },
        'melbourne': {
            name: '墨尔本',
            bbox: [144.97, -37.83, 145.03, -37.79]
        },
        'la': {
            name: '洛杉矶',
            bbox: [-118.24, 34.06, -118.23, 34.07]
        },
        'toronto': {
            name: '多伦多',
            bbox: [-79.39, 43.66, -79.37, 43.67]
        },
        'mumbai': {
            name: '孟买',
            bbox: [72.86, 19.11, 72.89, 19.12]
        }
    };

    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
        center: [120, 30],
        zoom: 2
    });

    document.getElementById('city').addEventListener('change', (event) => {
        const cityId = event.target.value;
        const selectedCity = cities[cityId];
        const bounds = selectedCity.bbox;

        const llb = new maplibregl.LngLatBounds([bounds[0], bounds[1]], [bounds[2], bounds[3]]);

        const zoomType = document.getElementById('zoom-type').value;
        
        switch (zoomType) {
            case 'fit':
                map.fitBounds(llb, { padding: 100 });
                break;
            case 'ease':
                map.easeTo({
                    center: llb.getCenter(),
                    zoom: 12
                });
                break;
            case 'jump':
                map.jumpTo({
                    center: llb.getCenter(),
                    zoom: 12
                });
                break;
            case 'fly':
                map.flyTo({
                    center: llb.getCenter(),
                    zoom: 12
                });
                break;
        }
    });

    document.getElementById('zoom-type').addEventListener('change', () => {
        // 当更改缩放类型时触发城市选择事件以重新应用选择
        const event = new Event('change');
        document.getElementById('city').dispatchEvent(event);
    });
</script>
</body>
</html>