一、背景与需求分析

在地理信息系统（GIS）开发中，天地图作为国内权威的在线地图服务，广泛应用于各类Web应用。然而，依赖在线API存在两大痛点：一是网络不稳定时地图加载失败，二是可能产生额外的API调用费用。尤其在离线环境（如野外作业、军事应用等）下，在线地图完全不可用。

核心需求：

1. 实现天地图瓦片的本地化存储与离线加载
2. 在Vue.js项目中集成Leaflet地图库
3. 开发动态飞线效果，增强地图可视化能力
4. 确保离线环境下的完整功能

二、技术选型与架构设计

1. 技术栈选择

• Vue.js：作为前端框架，提供响应式数据绑定和组件化开发能力
• Leaflet：轻量级开源地图库，支持插件扩展和自定义图层
• 天地图瓦片：通过离线下载工具获取地图瓦片数据
• L7（可选）：若需更复杂的地理可视化，可集成蚂蚁金服的L7库

2. 系统架构

Vue项目
├─ src/
│  ├─ assets/         # 存储离线瓦片
│  ├─ components/     # 地图组件
│  │  └─ OfflineMap.vue  # 主地图组件
│  ├─ utils/          # 工具函数
│  │  └─ tileLoader.js # 自定义瓦片加载器
└─ public/            # 静态资源

三、天地图离线化实现

1. 瓦片下载与组织

步骤：

1. 使用wget或专业工具（如MapTiler）下载天地图瓦片

   wget --recursive --accept-regex='\d+/\d+/\d+\.png' \
   -P ./tiles/tianditu https://t0.tianditu.gov.cn/vec_w/wmts?...

2. 按XYZ目录结构组织瓦片（如./tiles/tianditu/{z}/{x}/{y}.png）
3. 生成瓦片索引文件（可选）

2. 自定义瓦片层实现

在Leaflet中创建自定义图层类：

// tileLoader.js
class OfflineTileLayer extends L.TileLayer {
  constructor(options) {
    super({
      ...options,
      // 强制使用本地路径
      urlTemplate: '/tiles/tianditu/{z}/{x}/{y}.png'
    });
  }
  createTile(coords, done) {
    const tile = document.createElement('img');
    // 错误处理：回退到空白图层
    tile.onerror = () => {
      tile.src = '/tiles/blank.png';
      done(null, tile);
    };
    L.TileLayer.prototype.createTile.call(this, coords, done);
    return tile;
  }
}

3. Vue组件集成

<!-- OfflineMap.vue -->
<template>
  <div id="map-container"></div>
</template>
<script>
import L from 'leaflet';
import { OfflineTileLayer } from '@/utils/tileLoader';
export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = L.map('map-container').setView([39.9, 116.4], 10);
      // 添加离线瓦片层
      const offlineLayer = new OfflineTileLayer({
        minZoom: 3,
        maxZoom: 18,
        attribution: '天地图离线版'
      }).addTo(map);
      // 添加其他图层...
    }
  }
}
</script>

四、飞线效果实现

1. 基础飞线实现

使用Leaflet的Polyline和动画：

function createFlyLine(map, startCoord, endCoord) {
  const line = L.polyline([startCoord, endCoord], {
    color: '#ff0000',
    weight: 2
  }).addTo(map);
  // 创建动态点
  const dot = L.circleMarker(startCoord, {
    radius: 5,
    fillColor: '#ffff00',
    fillOpacity: 1
  }).addTo(map);
  // 动画逻辑
  let progress = 0;
  const interval = setInterval(() => {
    progress += 0.01;
    if (progress >= 1) {
      clearInterval(interval);
      dot.setLatLng(endCoord);
      return;
    }
    const point = getPointOnLine(line, progress);
    dot.setLatLng(point);
  }, 50);
}
function getPointOnLine(line, t) {
  const coords = line.getLatLngs();
  const n = coords.length - 1;
  const pos = n * t;
  const i = Math.floor(pos);
  const frac = pos - i;
  if (i >= n) return coords[n];
  const p0 = coords[i];
  const p1 = coords[i + 1];
  return [
    p0.lat + (p1.lat - p0.lat) * frac,
    p0.lng + (p1.lng - p0.lng) * frac
  ];
}

2. 高级飞线效果（使用Canvas）

对于大量飞线，建议使用Canvas提升性能：

class FlyLineLayer extends L.Layer {
  onAdd(map) {
    this._map = map;
    this._canvas = L.DomUtil.create('canvas', 'leaflet-zoom-hide');
    const size = map.getSize();
    this._canvas.width = size.x;
    this._canvas.height = size.y;
    map.getPanes().overlayPane.appendChild(this._canvas);
    map.on('moveend', this._redraw, this);
    this._redraw();
  }
  _redraw() {
    const canvas = this._canvas;
    const ctx = canvas.getContext('2d');
    const topLeft = this._map.containerPointToLayerPoint([0, 0]);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 绘制所有飞线
    this._lines.forEach(line => {
      const start = this._map.latLngToContainerPoint(line.start);
      const end = this._map.latLngToContainerPoint(line.end);
      ctx.beginPath();
      ctx.moveTo(start.x - topLeft.x, start.y - topLeft.y);
      ctx.lineTo(end.x - topLeft.x, end.y - topLeft.y);
      ctx.strokeStyle = line.color || '#ff0000';
      ctx.lineWidth = line.width || 2;
      ctx.stroke();
      // 添加动态点...
    });
  }
}

五、性能优化与最佳实践

1. 瓦片缓存策略

• 使用IndexedDB存储瓦片元数据
• 实现LRU缓存算法淘汰不常用瓦片
• 预加载关键区域瓦片

2. 飞线性能优化

• 控制同时显示的飞线数量（建议<100条）
• 使用对象池模式复用动画元素
• 对静态飞线使用简化路径算法

3. 离线资源管理

• 开发资源打包工具，自动生成瓦片清单
• 实现版本控制，便于更新离线资源
• 提供资源完整性校验功能

六、完整示例项目结构

vue-leaflet-offline/
├── public/
│   ├── tiles/          # 离线瓦片目录
│   │   ├── tianditu/   # 天地图瓦片
│   │   └── blank.png    # 错误回退图片
├── src/
│   ├── components/
│   │   └── OfflineMap.vue
│   ├── utils/
│   │   ├── tileLoader.js
│   │   └── flyLine.js
│   ├── App.vue
│   └── main.js
└── vue.config.js        # 配置publicPath指向离线资源

七、常见问题解决方案

1. 瓦片加载404错误

   • 检查URL模板是否正确
   • 确认瓦片目录结构符合XYZ规范
   • 实现错误回退机制

2. 飞线动画卡顿

   • 减少同时动画的飞线数量
   • 使用requestAnimationFrame替代setInterval
   • 简化飞线路径（减少中间点）

3. 跨域问题（开发环境）

   • 配置vue.config.js的devServer：

     module.exports = {
       devServer: {
         proxy: {
           '/tiles': {
             target: 'http://localhost:8080',
             bypass: function(req) {
               if (req.headers.accept.indexOf('html') !== -1) {
                 return '/index.html';
               }
               return false;
             }
           }
         }
       }
     }

八、总结与展望

本文详细阐述了基于Vue.js和Leaflet实现天地图离线访问的核心技术，包括瓦片离线化、自定义图层开发、动态飞线效果实现等关键环节。通过实际案例分析，开发者可以快速构建出既能在离线环境下稳定运行，又具备丰富交互效果的GIS应用。

未来发展方向：

1. 集成WebGL实现更高效的地理可视化
2. 开发跨平台离线地图应用（结合Electron或Capacitor）
3. 探索与三维地图引擎（如Cesium）的混合渲染方案

完整实现代码已上传至GitHub：https://github.com/yourname/vue-leaflet-offline，欢迎交流与改进。