使用内边距偏移消失点
使用内边距偏移地图的消失点;
<!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%; }
.side-panel {
position: absolute;
left: 0;
top: 0;
width: 25%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
padding: 10px;
box-sizing: border-box;
overflow-y: auto;
font-family: 'Arial', sans-serif;
z-index: 1;
}
.side-panel h2 {
margin-top: 0;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
font-size: 18px;
}
.control-group {
margin-bottom: 20px;
}
.control-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.slider-container {
display: flex;
align-items: center;
}
.slider {
flex-grow: 1;
margin-right: 10px;
}
.value {
width: 40px;
text-align: right;
}
.checkbox-group {
margin-top: 5px;
}
.button-row {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
button {
padding: 8px 12px;
border: none;
border-radius: 4px;
background-color: #4285F4;
color: white;
cursor: pointer;
font-weight: bold;
}
button:hover {
background-color: #3367D6;
}
.info-text {
margin-top: 20px;
font-size: 14px;
line-height: 1.5;
color: #555;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="side-panel">
<h2>内边距偏移设置</h2>
<div class="control-group">
<label for="left-padding">左边内边距</label>
<div class="slider-container">
<input type="range" id="left-padding" class="slider" min="0" max="500" value="320">
<span id="left-value" class="value">320</span>
</div>
</div>
<div class="control-group">
<label for="right-padding">右边内边距</label>
<div class="slider-container">
<input type="range" id="right-padding" class="slider" min="0" max="500" value="0">
<span id="right-value" class="value">0</span>
</div>
</div>
<div class="control-group">
<label for="top-padding">上边内边距</label>
<div class="slider-container">
<input type="range" id="top-padding" class="slider" min="0" max="500" value="0">
<span id="top-value" class="value">0</span>
</div>
</div>
<div class="control-group">
<label for="bottom-padding">下边内边距</label>
<div class="slider-container">
<input type="range" id="bottom-padding" class="slider" min="0" max="500" value="0">
<span id="bottom-value" class="value">0</span>
</div>
</div>
<div class="control-group">
<label>视角设置</label>
<div class="slider-container">
<label for="pitch">俯仰角度:</label>
<input type="range" id="pitch" class="slider" min="0" max="85" value="60">
<span id="pitch-value" class="value">60</span>
</div>
<div class="checkbox-group">
<input type="checkbox" id="show-helper" checked>
<label for="show-helper">显示内边距助手</label>
</div>
</div>
<div class="button-row">
<button id="reset-button">重置</button>
<button id="toggle-panel">隐藏面板</button>
</div>
<div class="info-text">
内边距可以用来偏移3D视图中的消失点，让您能够将感兴趣的区域保持在视图中心。
试着调整内边距和俯仰角度，观察地图的变化。
</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: [-74.5, 40],
zoom: 13,
pitch: 60,
padding: { left: 320, top: 0, right: 0, bottom: 0 }
});
// 导航控件
map.addControl(new maplibregl.NavigationControl());
// 获取DOM元素
const leftPadding = document.getElementById('left-padding');
const rightPadding = document.getElementById('right-padding');
const topPadding = document.getElementById('top-padding');
const bottomPadding = document.getElementById('bottom-padding');
const leftValue = document.getElementById('left-value');
const rightValue = document.getElementById('right-value');
const topValue = document.getElementById('top-value');
const bottomValue = document.getElementById('bottom-value');
const pitchSlider = document.getElementById('pitch');
const pitchValue = document.getElementById('pitch-value');
const showHelper = document.getElementById('show-helper');
const resetButton = document.getElementById('reset-button');
const togglePanel = document.getElementById('toggle-panel');
// 更新内边距的函数
function updatePadding() {
const padding = {
left: parseInt(leftPadding.value),
right: parseInt(rightPadding.value),
top: parseInt(topPadding.value),
bottom: parseInt(bottomPadding.value)
};
map.setPadding(padding);
// 更新显示的值
leftValue.textContent = padding.left;
rightValue.textContent = padding.right;
topValue.textContent = padding.top;
bottomValue.textContent = padding.bottom;
// 如果开启了助手，绘制内边距指示器
if (showHelper.checked) {
drawPaddingHelper(padding);
} else {
removePaddingHelper();
}
}
// 更新俯仰角度
function updatePitch() {
const pitch = parseInt(pitchSlider.value);
map.setPitch(pitch);
pitchValue.textContent = pitch;
}
// 监听滑块变化事件
leftPadding.addEventListener('input', updatePadding);
rightPadding.addEventListener('input', updatePadding);
topPadding.addEventListener('input', updatePadding);
bottomPadding.addEventListener('input', updatePadding);
pitchSlider.addEventListener('input', updatePitch);
// 助手复选框事件
showHelper.addEventListener('change', function() {
if (this.checked) {
drawPaddingHelper({
left: parseInt(leftPadding.value),
right: parseInt(rightPadding.value),
top: parseInt(topPadding.value),
bottom: parseInt(bottomPadding.value)
});
} else {
removePaddingHelper();
}
});
// 重置按钮
resetButton.addEventListener('click', function() {
leftPadding.value = 320;
rightPadding.value = 0;
topPadding.value = 0;
bottomPadding.value = 0;
pitchSlider.value = 60;
updatePadding();
updatePitch();
});
// 切换面板按钮
togglePanel.addEventListener('click', function() {
const panel = document.querySelector('.side-panel');
if (panel.style.transform === 'translateX(-100%)') {
panel.style.transform = 'translateX(0)';
this.textContent = '隐藏面板';
// 更新内边距以考虑面板宽度
leftPadding.value = 320;
updatePadding();
} else {
panel.style.transform = 'translateX(-100%)';
this.textContent = '显示面板';
// 移除左侧内边距
leftPadding.value = 0;
updatePadding();
}
});
// 绘制内边距助手
function drawPaddingHelper(padding) {
// 移除旧的助手（如果存在）
removePaddingHelper();
// 获取地图容器尺寸
const mapContainer = map.getContainer();
const width = mapContainer.offsetWidth;
const height = mapContainer.offsetHeight;
// 创建内边距指示器元素
const helper = document.createElement('div');
helper.id = 'padding-helper';
helper.style.position = 'absolute';
helper.style.top = '0';
helper.style.left = '0';
helper.style.width = '100%';
helper.style.height = '100%';
helper.style.pointerEvents = 'none';
helper.style.zIndex = '10';
// 创建四个内边距区域
if (padding.left > 0) {
const leftArea = document.createElement('div');
leftArea.style.position = 'absolute';
leftArea.style.left = '0';
leftArea.style.top = '0';
leftArea.style.width = `${padding.left}px`;
leftArea.style.height = '100%';
leftArea.style.background = 'rgba(255, 0, 0, 0.1)';
leftArea.style.borderRight = '1px dashed rgba(255, 0, 0, 0.5)';
helper.appendChild(leftArea);
}
if (padding.right > 0) {
const rightArea = document.createElement('div');
rightArea.style.position = 'absolute';
rightArea.style.right = '0';
rightArea.style.top = '0';
rightArea.style.width = `${padding.right}px`;
rightArea.style.height = '100%';
rightArea.style.background = 'rgba(0, 255, 0, 0.1)';
rightArea.style.borderLeft = '1px dashed rgba(0, 255, 0, 0.5)';
helper.appendChild(rightArea);
}
if (padding.top > 0) {
const topArea = document.createElement('div');
topArea.style.position = 'absolute';
topArea.style.left = '0';
topArea.style.top = '0';
topArea.style.width = '100%';
topArea.style.height = `${padding.top}px`;
topArea.style.background = 'rgba(0, 0, 255, 0.1)';
topArea.style.borderBottom = '1px dashed rgba(0, 0, 255, 0.5)';
helper.appendChild(topArea);
}
if (padding.bottom > 0) {
const bottomArea = document.createElement('div');
bottomArea.style.position = 'absolute';
bottomArea.style.left = '0';
bottomArea.style.bottom = '0';
bottomArea.style.width = '100%';
bottomArea.style.height = `${padding.bottom}px`;
bottomArea.style.background = 'rgba(255, 255, 0, 0.1)';
bottomArea.style.borderTop = '1px dashed rgba(255, 255, 0, 0.5)';
helper.appendChild(bottomArea);
}
// 添加到地图容器
mapContainer.appendChild(helper);
}
// 移除内边距助手
function removePaddingHelper() {
const helper = document.getElementById('padding-helper');
if (helper) {
helper.remove();
}
}
// 地图加载完成后初始化
map.on('load', function() {
updatePadding();
// 添加3D建筑图层
map.addLayer({
'id': '3d-buildings',
'source': 'composite',
'source-layer': 'building',
'filter': ['==', 'extrude', 'true'],
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color': '#aaa',
'fill-extrusion-height': ['get', 'height'],
'fill-extrusion-base': ['get', 'min_height'],
'fill-extrusion-opacity': 0.6
}
});
});
</script>
</body>
</html>