一、离线地图技术背景与需求分析

1.1 离线地图的应用场景

在弱网环境（如野外作业、偏远地区）、数据安全敏感场景（如军事、政务）或成本控制需求下，离线地图成为关键技术方案。天地图作为国家地理信息公共服务平台，其离线版本可避免依赖网络请求，同时保留矢量地图、卫星影像等核心功能。

1.2 天地图离线化的技术挑战

天地图默认依赖在线API加载瓦片，离线化需解决三大问题：

瓦片数据存储：需提前下载指定区域的地图瓦片（如PNG/JPG格式）；
坐标系适配：天地图使用GCJ-02坐标系，需与项目坐标系统一；
API模拟：替换在线API的瓦片请求逻辑为本地文件读取。

二、离线地图瓦片生成与预处理

2.1 瓦片下载工具选择

推荐使用以下工具生成离线瓦片包：

GDAL工具链：通过gdal2tiles.py将GeoTIFF或Shapefile转换为瓦片金字塔（支持XYZ目录结构）；
MapTiler：可视化工具，支持导出MBTiles或文件夹格式的瓦片包；
天地图官方工具：部分版本提供离线数据导出功能（需申请权限）。

示例命令（GDAL生成瓦片）：

gdal2tiles.py -z 0-18 input.tif output_dir --profile=mercator

生成目录结构如下：

output_dir/
  ├── 0/  # 缩放级别0
  │   └── 0_0.png
  ├── 1/  # 缩放级别1
  │   └── 0_0.png
  │   └── 1_0.png
  └── ...

2.2 瓦片数据优化

压缩：使用PNGQuant或WebP格式减少存储空间；
分区域存储：按行政区划或经纬度范围分割瓦片，避免单一文件过大；
元数据管理：记录瓦片范围、坐标系、版本等信息（JSON格式）。

三、Vue2项目集成天地图离线组件

3.1 基础环境准备

安装依赖：

npm install leaflet @vue/composition-api

封装离线地图组件：
创建OfflineMap.vue，核心逻辑包括：
- 初始化Leaflet地图容器；
- 覆盖天地图默认瓦片URL为本地路径；
- 添加控件（缩放、比例尺等）。

代码示例：

<template>
  <div id="map-container" style="height: 500px;"></div>
</template>
<script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
export default {
  mounted() {
    // 初始化地图
    const map = L.map('map-container').setView([34.0522, -118.2437], 10);
    // 自定义瓦片层（替换为本地路径）
    const offlineLayer = L.tileLayer('/tiles/{z}/{x}/{y}.png', {
      minZoom: 0,
      maxZoom: 18,
      attribution: '天地图离线版'
    }).addTo(map);
    // 添加标记
    L.marker([34.0522, -118.2437]).addTo(map);
  }
};
</script>

3.2 天地图API适配

天地图在线API通过T.Map类加载瓦片，离线化需重写其核心方法：

拦截瓦片请求：通过Proxy或函数覆盖拦截getTileUrl；
路径映射：将在线URL（如http://t0.tianditu.gov.cn/...）转换为本地路径。

适配代码：

// 模拟天地图API
class OfflineTianditu {
  constructor(options) {
    this.options = options;
  }
  getTileUrl(level, row, col) {
    // 本地瓦片路径规则
    return `/tianditu/vec_c/${level}/${col}/${row}.png`;
  }
}
// 在Vue中使用
const offlineTianMap = new OfflineTianditu();
const tileUrl = offlineTianMap.getTileUrl(10, 100, 200);

四、性能优化与高级功能

4.1 瓦片预加载策略

按视野加载：监听地图moveend事件，动态加载当前视野范围内的瓦片；
缓存机制：使用IndexedDB存储已加载的瓦片，避免重复请求。

预加载实现：

map.on('moveend', () => {
  const bounds = map.getBounds();
  const zoom = map.getZoom();
  // 计算视野范围内的瓦片坐标并加载
});

4.2 离线搜索与标注

地理编码：预先构建地名与坐标的索引文件（如SQLite数据库）；
矢量标注：通过GeoJSON格式存储点、线、面数据，使用Leaflet的L.geoJSON加载。

示例：加载GeoJSON标注：

const geoJsonData = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [-118.2437, 34.0522]
      }
    }
  ]
};
L.geoJSON(geoJsonData).addTo(map);

五、部署与测试

5.1 静态资源打包

Vue CLI配置：将瓦片目录放入public文件夹，确保打包时被复制；
Nginx配置：修改nginx.conf，设置瓦片目录的静态资源访问权限。

Nginx示例：

location /tiles/ {
  alias /path/to/your/tiles/;
  expires 30d;  # 缓存控制
}

5.2 跨设备测试

PC端：验证大范围瓦片加载性能；
移动端：测试触摸事件与内存占用；
离线模式：断开网络后检查地图功能是否正常。

六、总结与扩展

Vue2集成天地图离线地图的核心在于瓦片数据管理与API适配。通过预生成瓦片、封装Vue组件、优化加载策略，可实现高效稳定的离线地图服务。未来可扩展方向包括：

结合PWA技术实现更彻底的离线化；
集成WebGL渲染提升大数据量下的性能；
支持动态更新瓦片数据（如差分更新）。

完整项目代码与瓦片生成工具已上传至GitHub，供开发者参考与二次开发。

Vue2集成天地图离线方案：从基础配置到完整实现