Mapbox/MapLibre如何使用自定义哈希在URL中展示自定义参数？

要在URL哈希中同时包含地图视角参数和图层切换状态，你需要放弃默认的hash: true配置，手动接管哈希的生成、更新与解析逻辑，具体实现如下：

1. 初始化地图（不启用默认哈希） #

// 初始化地图，不使用默认hash选项
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [-74.5, 40],
  zoom: 9,
  bearing: 0,
  pitch: 0
});

// 存储当前激活的图层ID（根据你的业务逻辑调整）
let activeLayer = 'streets';

2. 编写哈希生成与更新函数 #

这个函数会把地图视角参数和当前图层状态组合成URL哈希字符串：

// 获取当前需要存入哈希的所有参数
function getHashParams() {
  const center = map.getCenter();
  return {
    lat: center.lat.toFixed(6), // 控制纬度精度，减少哈希频繁变化
    lon: center.lng.toFixed(6),
    zoom: map.getZoom().toFixed(2),
    bearing: map.getBearing().toFixed(1),
    pitch: map.getPitch().toFixed(1),
    layer: activeLayer
  };
}

// 更新URL哈希
function updateHash() {
  const params = getHashParams();
  // 转成URL查询字符串格式
  const hashStr = Object.entries(params)
    .map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`)
    .join('&');
  window.location.hash = hashStr;
}

3. 绑定事件触发哈希更新 #

监听地图视角变化和图层切换事件，触发哈希更新：

// 地图视角变化时更新哈希
map.on('moveend', updateHash);
map.on('zoomend', updateHash);
map.on('rotateend', updateHash);
map.on('pitchend', updateHash);

// 图层切换事件（示例：假设你的切换菜单使用data-layer-id存储图层ID）
document.querySelector('.layer-switcher').addEventListener('click', (e) => {
  const layerId = e.target.dataset.layerId;
  if (!layerId) return;

  // 这里添加你的图层切换逻辑（比如显示/隐藏对应图层）
  // 示例：map.setLayoutProperty(layerId, 'visibility', 'visible');
  // ...

  // 更新激活图层状态并同步哈希
  activeLayer = layerId;
  updateHash();
});

4. 页面加载时从哈希恢复状态 #

页面初始化时解析哈希参数，恢复地图视角和图层状态：

function restoreStateFromHash() {
  if (!window.location.hash) return;

  // 解析哈希中的参数
  const hashParams = new URLSearchParams(window.location.hash.slice(1));
  
  // 恢复地图视角
  const lat = parseFloat(hashParams.get('lat'));
  const lon = parseFloat(hashParams.get('lon'));
  const zoom = parseFloat(hashParams.get('zoom'));
  const bearing = parseFloat(hashParams.get('bearing')) || 0;
  const pitch = parseFloat(hashParams.get('pitch')) || 0;

  if (lat && lon && zoom) {
    map.jumpTo({
      center: [lon, lat],
      zoom: zoom,
      bearing: bearing,
      pitch: pitch
    });
  }

  // 恢复图层状态
  const savedLayer = hashParams.get('layer');
  if (savedLayer) {
    // 这里添加恢复图层状态的逻辑
    // 示例：map.setLayoutProperty(savedLayer, 'visibility', 'visible');
    activeLayer = savedLayer;
  }
}

// 地图加载完成后执行状态恢复
map.on('load', restoreStateFromHash);

关键注意事项 #

• 控制参数精度：对经纬度、缩放等级等参数设置固定小数位，避免因为地图微小移动导致哈希频繁变化。
• 参数编码：使用encodeURIComponent处理参数，避免特殊字符破坏哈希格式。
• 自定义图层逻辑：根据你实际的图层切换机制（比如多图层互斥、多图层共存）调整activeLayer的存储与恢复逻辑。

内容的提问来源于stack exchange，提问作者Robbert