使用LeafletJS时如何检测浏览器离线/在线状态？

当然有可行的办法啦！其实不用依赖Leaflet本身的功能，浏览器原生就提供了检测在线/离线状态的能力，还能很顺畅地和Leaflet地图的使用场景结合起来。下面给你分享几个实用的方案：

这是最简便直接的方式，浏览器已经内置了相关能力：

• 实时获取当前状态：直接读取navigator.onLine属性，它会返回布尔值——true代表在线，false代表离线。
• 监听状态切换：给window绑定online和offline事件监听器，就能实时捕获网络状态的变化，还能联动Leaflet做相应处理：

// 页面加载时先检测一次当前状态
console.log('当前网络状态:', navigator.onLine ? '在线' : '离线');

// 监听网络恢复在线的事件
window.addEventListener('online', () => {
  alert('网络已恢复！地图将重新加载瓦片');
  // 刷新所有瓦片图层，恢复地图显示
  myMap.eachLayer(layer => {
    if (layer instanceof L.TileLayer) {
      layer.redraw();
    }
  });
});

// 监听网络断开离线的事件
window.addEventListener('offline', () => {
  // 在地图上添加一个提示控件，告知用户离线状态
  const offlineAlert = L.control({ position: 'topright' });
  offlineAlert.onAdd = () => {
    const div = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
    div.style.backgroundColor = '#fff';
    div.style.padding = '8px';
    div.innerHTML = '⚠️ 当前网络离线，地图瓦片无法加载';
    return div;
  };
  offlineAlert.addTo(myMap);
});

有时候navigator.onLine可能会有小概率误判（比如连接了局域网但没互联网时，部分浏览器会返回true），这时候可以结合Leaflet的瓦片加载失败事件来辅助确认：

// 初始化瓦片图层
const osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(myMap);

// 监听瓦片加载失败事件
osmLayer.on('tileerror', (event) => {
  if (!navigator.onLine) {
    console.log('离线导致瓦片加载失败');
    // 这里可以进一步给用户展示离线提示
  } else {
    // 排除离线因素，可能是瓦片服务器临时故障
    console.log('瓦片服务器加载异常，非网络离线问题');
  }
});

• 不同浏览器对navigator.onLine的实现细节略有差异，结合瓦片加载失败事件能让状态判断更准确。
• 如果你的Leaflet应用还用到了自定义数据源（比如GeoJSON、后端API），也可以在请求这些数据时捕获错误，再结合网络状态做针对性处理。

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