MapLibre GL JS第8课：禁用滚动缩放

📌 学习目标

掌握禁用滚动缩放的实现方法
理解相关API的使用
能够独立完成类似功能开发

🎯 核心概念

禁用滚动缩放功能。

💻 完整代码

代码示例

js 复制代码

const map = new maplibregl.Map({
    container: 'map', // 容器ID
    style: 'https://demotiles.maplibre.org/style.json', // 样式URL
    center: [-122.65, 45.52], // 初始位置
    zoom: 3 // 初始缩放级别
});

// 禁用滚动缩放地图
map.scrollZoom.disable();

代码示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Disable scroll zoom</title>
    <meta property="og:description" content="防止滚动缩放地图。" />
    <meta property="og:created" content="2023-06-27" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const map = new maplibregl.Map({
        container: 'map', // 地图容器id
        style: 'https://demotiles.maplibre.org/style.json', // 样式URL
        center: [-122.65, 45.52], // 初始位置
        zoom: 3 // 初始缩放级别
    });

    // 禁用滚动缩放地图
    map.scrollZoom.disable();
</script>
</body>
</html>

🔍 代码解析

1. 初始化地图

使用 new maplibregl.Map() 创建地图实例，需要配置容器、样式、中心点和缩放级别。

2. 关键配置项

container: 地图容器的DOM元素ID
style: 地图样式URL，可以使用MapLibre官方demo样式或自定义样式
center: 地图初始中心点 $经度, 纬度$
zoom: 初始缩放级别

⚙️ 参数说明

参数	类型	必填	说明
container	string	是	地图容器ID
style	string	是	地图样式URL
center	$number, number$	否	初始中心点，默认 $0, 0$
zoom	number	否	初始缩放级别，默认0

🎨 效果说明

运行代码后，将在页面上显示一个交互式地图。用户可以通过鼠标拖拽移动地图，滚轮缩放被禁用 ，右键旋转视角。

💡 常见问题

Q1: 地图不显示怎么办？

A: 检查以下几点：

确认已正确引入MapLibre GL JS的CSS和JS文件
确认容器元素存在且有明确的高度
检查浏览器控制台是否有错误信息

Q2: 如何更换地图样式？

A: 修改 style 参数为其他样式URL，例如：

javascript 复制代码

style: 'https://demotiles.maplibre.org/style.json'

📝 练习任务

基础练习：尝试修改地图的中心点和缩放级别，观察效果
进阶挑战：添加地图控件（缩放控件、罗盘等）
拓展思考：如何实现地图的自动旋转效果？

🌟 最佳实践

始终设置容器高度: 地图容器必须有明确的高度，否则地图不会显示
使用CDN引入: 生产环境建议使用稳定的CDN链接
错误处理: 添加try-catch处理可能的初始化错误
响应式设计 : 监听窗口大小变化，调用 map.resize()

🔗 延伸阅读

Map API文档
Layer API文档
Expression文档
MapLibre GL JS 官方文档
$下一课预告$ ：将继续学习地图图层的基础知识

本文是MapLibre GL JS实践课程系列的一部分，欢迎关注收藏