显示地图导航控件

显示地图导航控件;
<!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%; }
        
        .control-panel {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 4px;
            padding: 10px;
            font-family: 'Arial', sans-serif;
            font-size: 14px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            max-width: 300px;
            z-index: 1;
        }
        
        .control-panel h3 {
            margin: 0 0 10px 0;
            font-size: 16px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
        }
        
        .option-group {
            margin-bottom: 15px;
        }
        
        .option-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        
        select {
            width: 100%;
            padding: 5px;
            border-radius: 3px;
            border: 1px solid #ccc;
        }
        
        .checkbox-group {
            margin-bottom: 5px;
        }
        
        .description {
            margin-top: 15px;
            font-style: italic;
            font-size: 12px;
            color: #666;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div class="control-panel">
    <h3>导航控件选项</h3>
    <div class="option-group">
        <label for="position">位置:</label>
        <select id="position">
            <option value="top-right">右上角（默认）</option>
            <option value="top-left">左上角</option>
            <option value="bottom-right">右下角</option>
            <option value="bottom-left">左下角</option>
        </select>
    </div>
    
    <div class="option-group">
        <label>显示控件:</label>
        <div class="checkbox-group">
            <input type="checkbox" id="show-compass" checked>
            <label for="show-compass">显示指南针</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="show-zoom" checked>
            <label for="show-zoom">显示缩放控件</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="visualize-pitch" checked>
            <label for="visualize-pitch">可视化俯仰角度</label>
        </div>
    </div>
    
    <div class="description">
        NavigationControl 提供了放大、缩小、旋转和俯仰控件。您可以使用选项自定义这些控件的外观和行为。
    </div>
</div>
<script>
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
        center: [0, 0],
        zoom: 1,
        pitch: 30 // 初始俯仰角度
    });

    // 当前控件引用
    let navigationControl = null;
    
    // 当前位置
    let currentPosition = 'top-right';
    
    // 创建并添加导航控件的函数
    function updateNavigationControl() {
        // 如果已存在控件，先移除它
        if (navigationControl) {
            map.removeControl(navigationControl);
        }
        
        // 获取用户设置的选项
        const showCompass = document.getElementById('show-compass').checked;
        const showZoom = document.getElementById('show-zoom').checked;
        const visualizePitch = document.getElementById('visualize-pitch').checked;
        
        // 创建控件选项对象
        const options = {
            showCompass: showCompass,
            showZoomControls: showZoom,
            visualizePitch: visualizePitch
        };
        
        // 创建新控件
        navigationControl = new maplibregl.NavigationControl(options);
        
        // 添加到地图
        map.addControl(navigationControl, currentPosition);
    }
    
    // 位置下拉框变更事件
    document.getElementById('position').addEventListener('change', function() {
        currentPosition = this.value;
        updateNavigationControl();
    });
    
    // 选项复选框变更事件
    document.getElementById('show-compass').addEventListener('change', updateNavigationControl);
    document.getElementById('show-zoom').addEventListener('change', updateNavigationControl);
    document.getElementById('visualize-pitch').addEventListener('change', updateNavigationControl);
    
    // 初始设置
    map.on('load', function() {
        updateNavigationControl();
    });
</script>
</body>
</html>