Leaflet地图离线

// 创建 Leaflet 地图
var map = L.map('map').setView([51.505, -0.09], 13);

// 创建离线瓦片源
var offlineTileLayer = L.tileLayer('path/to/offline/tiles/{z}/{x}/{y}.png', {
    maxZoom: 18,
    minZoom: 1,
    attribution: 'Offline Map',
    tms: true
});

// 添加离线瓦片源到地图
offlineTileLayer.addTo(map);

// 设置地图的初始视图
map.setView([51.505, -0.09], 13);

window.addEventListener('online', function() {
    // 切换到在线模式
    map.removeLayer(offlineTileLayer);
    map.addLayer(onlineTileLayer);
});

window.addEventListener('offline', function() {
    // 切换到离线模式
    map.removeLayer(onlineTile页面内容如下：

### 4. 处理网络变化

为了确保用户在网络变化时能够正确切换到离线模式或在线模式，可以使用 JavaScript 监听网络状态变化事件：

```javascript
window.addEventListener('online', function() {
    // 切换到在线模式
    map.removeLayer(offlineTileLayer);
    map.addLayer(onlineTileLayer);
});

window.addEventListener('offline', function() {
    // 切换到离线模式
    map.removeLayer(onlineTileLayer);
    map.addLayer(offlineTileLayer);
});

window.addEventListener('online', function() {
    // 切换到在线模式
    map.removeLayer(offlineTileLayer);
    map.addLayer(onlineTileLayer);
    alert('网络已连接');
});

window.addEventListener('offline', function() {
    // 切换到离线模式
    map.removeLayer(onlineTileLayer);
    map.addLayer(offlineTileLayer);
    alert('网络已断开');
});