切换交互功能
启用和禁用地图交互控制;
<!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;
right: 10px;
z-index: 100;
background-color: white;
border-radius: 3px;
padding: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
font-family: 'Arial', sans-serif;
max-width: 300px;
}
.control-panel h3 {
margin: 0 0 10px 0;
font-size: 16px;
font-weight: 600;
border-bottom: 1px solid #ddd;
padding-bottom: 8px;
}
.toggle-group {
margin-bottom: 15px;
}
.toggle-group h4 {
margin: 5px 0;
font-size: 14px;
font-weight: normal;
}
label {
display: flex;
align-items: center;
margin-bottom: 3px;
cursor: pointer;
font-size: 13px;
}
input[type="checkbox"] {
margin-right: 8px;
}
.info-text {
font-size: 12px;
color: #666;
margin-top: 15px;
line-height: 1.5;
}
.active-status {
font-size: 12px;
font-weight: bold;
margin-top: 5px;
padding: 5px;
border-radius: 3px;
color: white;
text-align: center;
background-color: #3887be;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="control-panel">
<h3>地图交互控制</h3>
<div class="toggle-group">
<h4>基本导航</h4>
<label>
<input type="checkbox" id="toggle-drag" checked>
平移（鼠标拖拽）
</label>
<label>
<input type="checkbox" id="toggle-scroll-zoom" checked>
滚轮缩放
</label>
<label>
<input type="checkbox" id="toggle-double-click" checked>
双击缩放
</label>
<label>
<input type="checkbox" id="toggle-touch-zoom" checked>
触摸缩放
</label>
</div>
<div class="toggle-group">
<h4>高级导航</h4>
<label>
<input type="checkbox" id="toggle-box-zoom" checked>
框选缩放
</label>
<label>
<input type="checkbox" id="toggle-rotation" checked>
旋转（右键拖拽）
</label>
<label>
<input type="checkbox" id="toggle-keyboard" checked>
键盘控制
</label>
<label>
<input type="checkbox" id="toggle-touch-pitch" checked>
触摸倾斜
</label>
</div>
<div class="active-status" id="status-message">所有交互功能已启用</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
});
map.addControl(new maplibregl.NavigationControl());
// 获取复选框元素
const dragCheckbox = document.getElementById('toggle-drag');
const scrollZoomCheckbox = document.getElementById('toggle-scroll-zoom');
const doubleClickCheckbox = document.getElementById('toggle-double-click');
const touchZoomCheckbox = document.getElementById('toggle-touch-zoom');
const boxZoomCheckbox = document.getElementById('toggle-box-zoom');
const rotationCheckbox = document.getElementById('toggle-rotation');
const keyboardCheckbox = document.getElementById('toggle-keyboard');
const touchPitchCheckbox = document.getElementById('toggle-touch-pitch');
// 获取状态信息元素
const statusMessage = document.getElementById('status-message');
// 更新状态信息
function updateStatusMessage() {
let enabledCount = 0;
let totalCount = 0;
const checkboxes = [
dragCheckbox, scrollZoomCheckbox, doubleClickCheckbox,
touchZoomCheckbox, boxZoomCheckbox, rotationCheckbox,
keyboardCheckbox, touchPitchCheckbox
];
totalCount = checkboxes.length;
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
enabledCount++;
}
});
if (enabledCount === 0) {
statusMessage.textContent = '所有交互功能已禁用';
statusMessage.style.backgroundColor = '#e74c3c';
} else if (enabledCount === totalCount) {
statusMessage.textContent = '所有交互功能已启用';
statusMessage.style.backgroundColor = '#3887be';
} else {
statusMessage.textContent = `已启用 ${enabledCount}/${totalCount} 个交互功能`;
statusMessage.style.backgroundColor = '#f39c12';
}
}
// 平移控制
dragCheckbox.addEventListener('change', (e) => {
map.dragPan.enable();
if (!e.target.checked) {
map.dragPan.disable();
}
updateStatusMessage();
});
// 滚轮缩放控制
scrollZoomCheckbox.addEventListener('change', (e) => {
map.scrollZoom.enable();
if (!e.target.checked) {
map.scrollZoom.disable();
}
updateStatusMessage();
});
// 双击缩放控制
doubleClickCheckbox.addEventListener('change', (e) => {
map.doubleClickZoom.enable();
if (!e.target.checked) {
map.doubleClickZoom.disable();
}
updateStatusMessage();
});
// 触摸缩放控制
touchZoomCheckbox.addEventListener('change', (e) => {
map.touchZoomRotate.enable();
if (!e.target.checked) {
map.touchZoomRotate.disable();
}
updateStatusMessage();
});
// 框选缩放控制
boxZoomCheckbox.addEventListener('change', (e) => {
map.boxZoom.enable();
if (!e.target.checked) {
map.boxZoom.disable();
}
updateStatusMessage();
});
// 旋转控制
rotationCheckbox.addEventListener('change', (e) => {
map.dragRotate.enable();
if (!e.target.checked) {
map.dragRotate.disable();
}
updateStatusMessage();
});
// 键盘控制
keyboardCheckbox.addEventListener('change', (e) => {
map.keyboard.enable();
if (!e.target.checked) {
map.keyboard.disable();
}
updateStatusMessage();
});
// 触摸倾斜控制
touchPitchCheckbox.addEventListener('change', (e) => {
map.touchPitch.enable();
if (!e.target.checked) {
map.touchPitch.disable();
}
updateStatusMessage();
});
// 地图加载完成后添加一个示例标记
map.on('load', () => {
// 在中心点添加一个标记
new maplibregl.Marker({
color: '#3887be'
})
.setLngLat([0, 0])
.setPopup(new maplibregl.Popup().setHTML("<h3>中心点</h3><p>尝试切换不同的交互模式来体验地图的操作变化。</p>"))
.addTo(map);
// 初始化状态显示
updateStatusMessage();
});
</script>
</body>
</html>