MapLibre GL JS第1课：显示地图
第1课：显示地图
📌 学习目标
- 掌握显示地图的实现方法
- 理解相关API的使用
- 能够独立完成类似功能开发
🎯 核心概念
在HTML元素中初始化MapLibre GL JS地图。
💻 完整代码
代码示例
constmap=newmaplibregl.Map({container:'map',// 容器IDstyle:'https://demotiles.maplibre.org/style.json',// 样式URLcenter:[0,0],// 初始位置 [经度, 纬度]zoom:1,// 初始缩放级别maplibreLogo:true});代码示例
<!DOCTYPEhtml><htmllang="en"><head><title>Display a map</title><metaproperty="og:description"content="使用 MapLibre GL JS 在 HTML 元素中初始化地图"/><metaproperty="og:created"content="2025-06-25"/><metacharset='utf-8'><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel='stylesheet'href='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css'/><scriptsrc='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><divid="map"></div><script>constmap=newmaplibregl.Map({container:'map',// 地图容器idstyle:'https://demotiles.maplibre.org/style.json',// 样式文件位置center:[0,0],// 中心点位置zoom:1,// 缩放maplibreLogo:true});</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，例如：
style:'https://demotiles.maplibre.org/style.json'📝 练习任务
- 基础练习：尝试修改地图的中心点和缩放级别，观察效果
- 进阶挑战：添加地图控件（缩放控件、罗盘等）
- 拓展思考：如何实现地图的自动旋转效果？
🌟 最佳实践
- 始终设置容器高度: 地图容器必须有明确的高度，否则地图不会显示
- 使用CDN引入: 生产环境建议使用稳定的CDN链接
- 错误处理: 添加try-catch处理可能的初始化错误
- 响应式设计: 监听窗口大小变化，调用
map.resize()
🔗 延伸阅读
Map API文档
Layer API文档
Expression文档
MapLibre GL JS 官方文档
[下一课预告]：将继续学习地图图层的基础知识
本文是MapLibre GL JS实践课程系列的一部分，欢迎关注收藏