MapLibre GL JS第13课：哈希路由
📌 学习目标
- 掌握哈希路由的实现方法
- 理解相关API的使用
- 能够独立完成类似功能开发
🎯 核心概念
使用哈希路由保持视口状态在URL中。
💻 完整代码
代码示例
constmap=newmaplibregl.Map({container:'map',hash:true,// <- 启用哈希路由style:'https://demotiles.maplibre.org/style.json',center:[0,0],zoom:1,maplibreLogo:true});// 设置定时器在地图覆盖层中更新URL哈希consturlHash=document.getElementById('urlHash');setInterval(()=>{urlHash.textContent=`URL hash:${window.location.hash}`;},100);代码示例
<!DOCTYPEhtml><htmllang="en"><head><title>Hash routing</title><metaproperty="og:description"content="使用哈希路由将视口状态保存在 URL 中。"/><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%;}#urlHash{position:fixed;left:0;top:0;height:30px;background-color:white;display:flex;align-items:center;border-radius:10px;padding:0 10px;margin:10px;border:1px solid #888;}</style></head><body><divid="map"></div><spanid="urlHash"></span><script>constmap=newmaplibregl.Map({container:'map',hash:true,// <- 启用哈希路由style:'https://demotiles.maplibre.org/style.json',center:[0,0],zoom:1,maplibreLogo:true});// 设置定时器在地图覆盖层中更新URL哈希consturlHash=document.getElementById('urlHash');setInterval(()=>{urlHash.textContent=`URL hash:${window.location.hash}`;},100);</script></body></html>🔍 代码解析
1. 初始化地图
使用new maplibregl.Map()创建地图实例，配置基本参数。关键配置项hash: true启用哈希路由功能。
2. 哈希路由原理
当hash设置为true时：
- 地图会自动将当前视口状态（中心点、缩放级别、旋转角度）编码到URL的hash部分
- 用户可以复制URL分享当前地图视图
- 刷新页面时，地图会自动恢复到hash中保存的视图状态
3. URL哈希格式
哈希路由的格式为：#zoom/latitude/longitude/bearing/pitch
⚙️ 参数说明
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| container | string | 是 | 地图容器ID |
| style | string | 是 | 地图样式URL |
| center | [number, number] | 否 | 初始中心点，默认[0, 0] |
| zoom | number | 否 | 初始缩放级别，默认0 |
| hash | boolean/string | 否 | 是否启用哈希路由，默认false |
🎨 效果说明
运行代码后：
- 地图左上角显示当前URL哈希值
- 地图默认显示全球视图（中心点[0,0]，缩放级别1）
- 移动地图、缩放或旋转时，URL会实时更新
- 刷新页面后，地图自动恢复到刷新前的视图状态
- 用户可以复制包含哈希的URL分享给他人
💡 常见问题
Q1: 哈希路由支持哪些参数？
A:哈希路由支持：缩放级别、纬度、经度、方位角（bearing）、俯仰角（pitch）。
Q2: 如何自定义哈希参数？
A:可以将hash设置为字符串（自定义哈希键），或者监听moveend事件手动处理。
Q3: 哈希路由是否影响页面性能？
A:影响很小。哈希路由只在地图视图改变时更新URL，不会触发页面重新加载。
📝 练习任务
- 基础练习：修改初始中心点和缩放级别，观察URL变化
- 进阶挑战：添加按钮跳转到特定坐标（通过修改URL hash）
- 拓展思考：如何实现深层链接，让用户直接跳转到地图上的特定地点？
🌟 最佳实践
- 分享友好: 启用哈希路由让用户可以轻松分享地图视图
- 状态恢复: 确保页面刷新后地图状态正确恢复
- SEO考虑: 哈希路由对传统SEO不友好，如需SEO优化可考虑使用HTML5 History API
- 性能优化: 避免在hashchange事件中执行大量操作
🔗 延伸阅读
Map API文档
Layer API文档
Expression文档
MapLibre GL JS 官方文档
[下一课预告]：将继续学习地图图层的基础知识
本文是MapLibre GL JS实践课程系列的一部分，欢迎关注收藏