设置俯仰角和方位角
设置地图的俯仰角和方位角;
<!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%; }
.map-overlay {
position: absolute;
top: 10px;
left: 10px;
background: #fff;
border-radius: 4px;
padding: 15px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
font-family: Arial, sans-serif;
z-index: 1;
max-width: 260px;
}
h3 {
margin: 0 0 10px 0;
font-size: 18px;
font-weight: 600;
border-bottom: 1px solid #ddd;
padding-bottom: 8px;
}
.map-overlay .input-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
font-size: 14px;
}
.range-labels {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #777;
margin-bottom: 5px;
}
input[type=range] {
width: 100%;
height: 8px;
-webkit-appearance: none;
background: #f1f1f1;
outline: none;
border-radius: 5px;
margin-bottom: 5px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
background: #3887be;
cursor: pointer;
border-radius: 50%;
border: none;
}
input[type=range]::-moz-range-thumb {
width: 18px;
height: 18px;
background: #3887be;
cursor: pointer;
border-radius: 50%;
border: none;
}
.value-display {
font-size: 14px;
font-weight: 600;
color: #3887be;
text-align: center;
margin-top: 5px;
}
.controls {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 15px;
}
button {
background: #3887be;
color: white;
border: none;
padding: 8px 12px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
flex-grow: 1;
text-align: center;
font-size: 13px;
}
button:hover {
background: #2d6a94;
}
.info-text {
font-size: 12px;
color: #777;
margin-top: 15px;
line-height: 1.4;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="map-overlay">
<h3>地图视角控制</h3>
<div class="input-group">
<label>俯仰角 (Pitch)</label>
<div class="range-labels">
<span>0°</span>
<span>30°</span>
<span>60°</span>
</div>
<input id="pitch" type="range" min="0" max="60" step="1" value="0">
<div id="pitch-value" class="value-display">0°</div>
</div>
<div class="input-group">
<label>方位角 (Bearing)</label>
<div class="range-labels">
<span>-180°</span>
<span>0°</span>
<span>180°</span>
</div>
<input id="bearing" type="range" min="-180" max="180" step="1" value="0">
<div id="bearing-value" class="value-display">0°</div>
</div>
<div class="controls">
<button id="reset">重置视角</button>
<button id="rotate">自动旋转</button>
<button id="fly-to">飞行到目标</button>
</div>
<div class="info-text">
调整滑块以改变地图的俯仰角度和方位角。俯仰角决定地图的倾斜程度，而方位角则控制地图的旋转方向。
</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: 2,
pitch: 0,
bearing: 0
});
// 添加导航控件
map.addControl(new maplibregl.NavigationControl());
// 获取输入元素
const pitchSlider = document.getElementById('pitch');
const bearingSlider = document.getElementById('bearing');
const pitchValue = document.getElementById('pitch-value');
const bearingValue = document.getElementById('bearing-value');
const resetButton = document.getElementById('reset');
const rotateButton = document.getElementById('rotate');
const flyToButton = document.getElementById('fly-to');
// 添加滑块事件监听器
pitchSlider.addEventListener('input', () => {
const pitch = parseInt(pitchSlider.value, 10);
pitchValue.textContent = `${pitch}°`;
map.setPitch(pitch);
});
bearingSlider.addEventListener('input', () => {
const bearing = parseInt(bearingSlider.value, 10);
bearingValue.textContent = `${bearing}°`;
map.setBearing(bearing);
});
// 重置按钮
resetButton.addEventListener('click', () => {
map.easeTo({
pitch: 0,
bearing: 0,
duration: 1000
});
// 重置滑块和显示值
pitchSlider.value = 0;
bearingSlider.value = 0;
pitchValue.textContent = '0°';
bearingValue.textContent = '0°';
});
// 自动旋转变量
let rotationInterval;
let isRotating = false;
// 自动旋转按钮
rotateButton.addEventListener('click', () => {
if (isRotating) {
clearInterval(rotationInterval);
rotateButton.textContent = '自动旋转';
isRotating = false;
} else {
// 每50毫秒旋转0.5度
rotationInterval = setInterval(() => {
const currentBearing = map.getBearing();
const newBearing = (currentBearing + 0.5) % 360;
map.setBearing(newBearing);
bearingSlider.value = newBearing > 180 ? newBearing - 360 : newBearing;
bearingValue.textContent = `${Math.round(bearingSlider.value)}°`;
}, 50);
rotateButton.textContent = '停止旋转';
isRotating = true;
}
});
// 飞行到按钮
flyToButton.addEventListener('click', () => {
// 预设的有趣位置列表
const locations = [
{ center: [116.4074, 39.9042], zoom: 12, pitch: 50, bearing: 45, name: '北京' },
{ center: [-73.9866, 40.7306], zoom: 15, pitch: 60, bearing: -30, name: '纽约' },
{ center: [2.3522, 48.8566], zoom: 14, pitch: 45, bearing: 120, name: '巴黎' },
{ center: [37.6173, 55.7558], zoom: 13, pitch: 55, bearing: 90, name: '莫斯科' },
{ center: [139.6917, 35.6895], zoom: 14, pitch: 40, bearing: 150, name: '东京' }
];
// 随机选择一个位置
const randomLocation = locations[Math.floor(Math.random() * locations.length)];
// 飞行到随机位置
map.flyTo({
center: randomLocation.center,
zoom: randomLocation.zoom,
pitch: randomLocation.pitch,
bearing: randomLocation.bearing,
duration: 3000
});
// 更新滑块和显示值
setTimeout(() => {
pitchSlider.value = randomLocation.pitch;
bearingSlider.value = randomLocation.bearing > 180 ? randomLocation.bearing - 360 : randomLocation.bearing;
pitchValue.textContent = `${randomLocation.pitch}°`;
bearingValue.textContent = `${randomLocation.bearing > 180 ? randomLocation.bearing - 360 : randomLocation.bearing}°`;
}, 3000);
// 通知用户
alert(`正在飞行到 ${randomLocation.name}！`);
});
// 地图移动时更新滑块
map.on('move', () => {
// 只有在非滑块操作时才更新滑块
if (!isDraggingSlider) {
const currentPitch = Math.round(map.getPitch());
const currentBearing = Math.round(map.getBearing());
pitchSlider.value = currentPitch;
bearingSlider.value = currentBearing > 180 ? currentBearing - 360 : currentBearing;
pitchValue.textContent = `${currentPitch}°`;
bearingValue.textContent = `${currentBearing > 180 ? currentBearing - 360 : currentBearing}°`;
}
});
// 跟踪滑块是否正在被拖动
let isDraggingSlider = false;
pitchSlider.addEventListener('mousedown', () => {
isDraggingSlider = true;
});
bearingSlider.addEventListener('mousedown', () => {
isDraggingSlider = true;
});
document.addEventListener('mouseup', () => {
isDraggingSlider = false;
});
</script>
</body>
</html>