离线地图

lishihuan大约 14 分钟

离线地图

使用 QGIS 配合 天地图插件 和 QTiles 插件 下载地图切片的方式: https://zhuanlan.zhihu.com/p/1930686312383510341open in new window

1. 方案

1.2 可用于离线（无网络）加载本地数据/瓦片的地图 API

OpenLayers
- 离线能力: 强。可加载本地 XYZ 瓦片、GeoJSON、KML、GeoTIFF、WMS/WFS（可指向本地服务）。
- 优点: 功能全、投影支持强、纯前端即可渲染大量矢量/栅格。
- 适用: 通用 2D 地图、专业 GIS 功能、多投影场景。
Leaflet
- 离线能力: 强。可加载本地 XYZ 瓦片、GeoJSON 等。
- 优点: 轻量易用、生态丰富。
- 适用: 轻量 2D 项目、快速集成、移动端友好。
MapLibre GL JS
- 离线能力: 强。加载本地矢量瓦片（MVT）与样式，支持 PMTiles 单文件；也可叠加本地栅格。
- 优点: 矢量渲染清晰、样式可变、体积更小。
- 适用: 需要高质量矢量、可变样式、平滑缩放的 2D 地图。
CesiumJS
- 离线能力: 强。支持本地 3D Tiles、地形（quantized-mesh）、影像（TMS/WMTS）。
- 优点: 三维地球、倾斜摄影、体量大数据的 3D 场景。
- 适用: 三维/地形/倾斜摄影的离线应用。
deck.glopen in new window
- 离线能力: 中等。可离线渲染本地 GeoJSON/二进制数据；底图可用本地瓦片（结合 MapLibre/Leaflet 或自定义）。
- 优点: 大规模可视化、高性能叠加。
- 适用: 数据可视化为主、与其他底图库组合使用。
（谨慎）Mapbox GL JS v1.x
- 离线能力: 技术可行（本地样式+本地 MVT/栅格），但存在许可证限制；不推荐新项目使用。
- 替代: 用 MapLibre GL JS。
（不推荐离线）高德/百度/Google/ArcGIS Online JS
- 多数需在线底图和鉴权，许可证限制明显；纯离线场景不合适。

数据/格式兼容要点

栅格: 本地 XYZ/TMS/WMTS（PNG/JPG/WEBP），OpenLayers/Leaflet/MapLibre/Cesium 都可用。
矢量: 本地 GeoJSON（中小数据量），或 MVT（.pmtiles/.mbtiles/.pbf）+ MapLibre GL JS。
单文件分发: 推荐 PMTiles（MapLibre GL JS + pmtiles 插件），离线友好、无需复杂目录结构。
三维: 本地 3D Tiles、地形、影像用于 CesiumJS。

简要选择建议

2D 快速落地（栅格底图）: Leaflet 或 OpenLayers。
2D 现代矢量（体积小、样式可变）: MapLibre GL JS（配 PMTiles）。
3D/倾斜摄影: CesiumJS。
大数据可视化叠加: deck.glopen in new window + MapLibre/Leaflet。

如果你告诉我数据类型（影像/矢量/三维）、预计数据量与是否需要可变样式，我可以给出更精确的 API 组合与最小示例。

特性	ArcGIS API for JavaScript	Leaflet	Cesium	OpenLayers
地图类型	2D / 3D（强大的空间分析支持）	2D（基础功能，插件扩展）	3D（强大的 3D 地图支持）	2D / 3D（支持简单的 3D）
功能	高级空间分析、数据管理、3D 地图	基础地图展示，插件扩展	3D 地图展示、空间数据处理	空间分析、多图层管理
体积和性能	相对较重，功能强大	轻量级，性能优秀	较大，资源消耗高	中等，灵活性高
离线支持	支持离线地图和离线功能	通过瓦片服务支持离线	支持离线，但需要转换数据	完全支持离线瓦片加载
开源	否（商业许可）	是（完全开源）	是（完全开源）	是（完全开源）
适用场景	需要高精度空间分析、复杂功能	基础地图展示、轻量级应用	需要 3D 地图、大数据展示	需要灵活的空间分析、离线地图

1. 方案

需要解决以下4个问题：

如何下载离线地图瓦片 【水经注】
离线地图瓦片，用什么服务运行 【GeoServer 】
离线部署地图服务 【 Leaflet 或 ArcGIS API、Cesium 】
地图JS如何调用这个地图瓦片服务

1. 瓦片下载工具：水经注

水经注 是一个非常适合在 无网络环境 下下载地图瓦片的工具，特别适用于从 天地图、OpenStreetMap 等在线地图服务下载大范围的瓦片数据。其优点如下：

支持自定义区域下载：你可以指定区域（例如安徽省）和缩放级别，精准下载所需的瓦片数据。
支持多种地图源：不仅支持 天地图，还支持 OpenStreetMap、高德、百度等地图服务。
支持批量下载：可以一次性下载大范围的瓦片，适合离线部署使用。

因此，水经注 是一个非常适合离线部署瓦片的工具，特别是当你需要下载特定区域的地图时，它提供了极大的灵活性和方便。

2. 离线展示：Leaflet 或 ArcGIS API

Leaflet：这是一个轻量级的开源地图库，非常适合用于离线部署的 瓦片地图展示。你可以将下载的瓦片数据通过 WMTS 或 TMS 服务形式部署到本地服务器上（如 GeoServer），然后通过 Leaflet 显示这些瓦片。
- 优点：
  - 完全开源，适合定制化需求。
  - 支持 离线瓦片 渲染，可以直接与本地服务连接。
  - 易于集成和部署，适合前端开发人员使用。
ArcGIS API for JavaScript：如果你需要更多的功能（例如复杂的空间分析、图层管理等），ArcGIS API for JavaScript 是另一个优秀的选择。它也支持离线瓦片的加载和展示。
- 优点：
  - 功能强大，适用于复杂的地理信息展示。
  - 可以与 ArcGIS 系列工具无缝集成。

总结：

瓦片下载：水经注 是最优选择，因为它支持大范围地图数据的下载，并且可以根据需求定制下载区域。
离线展示：Leaflet 是最常用的离线地图展示库，轻量级、易于集成，适合前端开发。而 ArcGIS API for JavaScript 适用于需要更强大功能的开发需求。

因此，你可以使用 水经注 下载所需的地图瓦片数据，然后通过 GeoServer 或其他瓦片服务平台部署这些瓦片，并在前端通过 Leaflet 或 ArcGIS API 展示这些瓦片，形成完整的 离线地图解决方案。

ArcGIS API for JavaScript、Leaflet 和 Cesium 进行对比分析，从而选择最适合你的方案。

1. ArcGIS API for JavaScript

优势：

功能全面：ArcGIS API for JavaScript 提供了强大的地图功能，尤其是在 空间分析、地理信息管理 和 3D 地图展示 等方面有显著优势。你可以轻松集成复杂的地图分析功能、标注、测量工具等。
与 ArcGIS 平台兼容：如果你的项目中有使用 ArcGIS Online 或 ArcGIS Server，则使用 ArcGIS API for JavaScript 会无缝对接这些平台的服务。
丰富的控件和工具：API 提供了很多高级功能，如 动态图层、地理搜索、空间查询 等，适合需要强大功能支持的项目。
支持离线模式：ArcGIS 提供了 离线地图包 和 离线瓦片服务，适合完全没有网络的环境。

缺点：

相对较重：相比于 Leaflet，ArcGIS API for JavaScript 体积较大，加载速度稍慢。对于简单地图展示，可能显得有些过于复杂。
学习曲线：尽管功能强大，但对于初学者或轻量级需求的项目来说，学习曲线较为陡峭。

适用场景：

如果你的项目需要高精度的 空间分析、复杂的 地图工具，或有使用 ArcGIS 服务器的需求，那么 ArcGIS API for JavaScript 是最优的选择。

2. Leaflet

优势：

轻量级：Leaflet 是一个非常轻量级的开源库，非常适合构建快速、简洁的地图应用，适合需要快速加载和响应的场景。
易于使用：对于基础地图显示和简单交互（如标注、图层切换、缩放等），Leaflet 提供了非常直观的 API，适合快速上手。
丰富的插件支持：虽然 Leaflet 本身功能较为基础，但有大量社区支持的插件，可以扩展到 3D 地图、测量工具、热力图等功能。
开源且自由：完全开源，可以自由部署，不受版权限制。

缺点：

功能有限：相比 ArcGIS API for JavaScript，Leaflet 在高级空间分析、图层管理等方面功能较弱。如果你的项目需要大量的 空间分析 或 复杂交互，可能需要通过插件或自定义开发来实现。
不支持 3D 地图：尽管有插件（如 Leaflet.glify）可以提供 3D 功能，但原生不支持 3D 地图渲染和高精度的空间分析。

适用场景：

如果你的项目只需要基础的地图展示（如标注、路径、简单图层等），并且希望使用轻量级且开源的库，Leaflet 是非常适合的选择。

3. Cesium

优势：

强大的 3D 地图支持：如果你的项目涉及 3D 地图 展示（如城市建模、地形展示等），Cesium 是最强大的工具之一，支持高精度的 3D 地球 展示，尤其是在 卫星影像 和 三维数据可视化 上表现突出。
空间数据管理：支持复杂的 空间数据（如 3D Tiles、Terrain 数据、CityGML）的加载和展示。
性能优化：Cesium 在处理大规模数据（如 3D Tiles）时表现非常优秀，适合大数据量的渲染需求。

缺点：

复杂度高：相比 Leaflet，Cesium 的学习曲线较陡，且主要聚焦于 3D 地图 和 大数据处理，如果你只需要简单的 2D 地图，可能会感到功能过于复杂。
资源消耗大：在加载 3D 数据时，Cesium 对硬件的要求较高，不适合资源受限的设备。
离线支持复杂：Cesium 的离线功能相对复杂，需要将数据转为特定格式（如 3D Tiles）并存储到本地，适合需要 离线 3D 地图 的项目。

适用场景：

如果你的项目需要高精度的 3D 地图 或 大规模空间数据可视化，并且对性能有较高要求，Cesium 是最适合的选择。

综合对比与建议

特性	ArcGIS API for JavaScript	Leaflet	Cesium
地图类型	2D / 3D（强大的空间分析支持）	2D（基础功能，插件扩展）	3D（强大的 3D 地图支持）
功能	高级空间分析、数据管理、3D 地图	基础地图展示，插件扩展	3D 地图展示、空间数据处理
体积和性能	相对较重，功能强大	轻量级，性能优秀	较大，资源消耗高
离线支持	支持离线地图和离线功能	通过瓦片服务支持离线	支持离线，但需要转换数据
开源	否（商业许可）	是（完全开源）	是（完全开源）
适用场景	需要高精度空间分析、复杂功能	基础地图展示、轻量级应用	需要 3D 地图、大数据展示

1. 方案

1. 如何下载离线地图瓦片

为了下载离线地图瓦片，你可以使用以下几种工具：

1.1 Mobile Atlas Creator (MOBAC)

功能：MOBAC 是一个开源工具，支持将 Google Maps、OpenStreetMap (OSM)、Bing Maps、天地图等服务 的地图瓦片下载并保存为不同格式的地图数据。
操作步骤：
1. 下载并安装 MOBAC。
2. 配置地图源（如选择 OSM 或天地图）。
3. 选择下载区域和地图缩放级别。
4. 选择输出格式（如 MBTiles 或 PNG/JPG）。
5. 开始下载并保存瓦片数据。
MOBAC 下载链接：https://github.com/maptools/mobile-atlas-creatoropen in new window

1.2 MapTiler

功能：MapTiler 是一个地图瓦片生成工具，它支持将 OSM 和其他开源地图数据格式（如 GeoTIFF）转换为瓦片数据。你也可以选择 天地图瓦片 或 自定义底图。
操作步骤：
1. 下载并安装 MapTiler。
2. 选择底图（如天地图、OSM 等）并选择要下载的区域。
3. 生成瓦片数据（可以选择生成 MBTiles 格式，方便后续加载）。
MapTiler 下载链接：https://www.maptiler.com/open in new window

1.3 TileStache / Tegola

功能：这两个工具也可以用来从 OSM 数据生成瓦片，适合需要更多自定义配置的场景，尤其是当你需要生成自定义样式的瓦片时。
TileStache 和 Tegola 更适合用作离线服务器，后续会在地图服务部署时提到。

2. 离线地图瓦片，用什么服务运行

下载的离线地图瓦片需要用适合的服务进行托管和渲染。常见的服务有：

2.1 Tegola

功能：Tegola 是一个开源的 矢量瓦片 服务器，它支持从 PostGIS 或 MBTiles 数据源中加载并渲染矢量瓦片。Tegola 支持 Web Mercator 投影，可以高效地处理大规模的离线瓦片。
安装与使用：
1. 安装 Tegola（支持 Linux 和 macOS）。
2. 将下载的 MBTiles 瓦片文件或 PostGIS 数据库连接到 Tegola。
3. 配置 config.toml 文件，定义瓦片服务参数。
4. 启动 Tegola 服务，开始提供瓦片服务。
Tegola GitHub：https://github.com/go-spatial/tegolaopen in new window

2.2 TileStache

功能：TileStache 是一个基于 Python 的瓦片服务，支持加载并渲染来自 MBTiles 格式或其他瓦片数据源的地图。
安装与使用：
1. 安装 TileStache 和依赖包（Python 环境）。
2. 配置 config.py 文件来定义瓦片图层和存储位置。
3. 启动 TileStache 服务并通过 HTTP 请求访问瓦片。
TileStache GitHub：https://github.com/TileStache/TileStacheopen in new window

2.3 本地 Web 服务器

如果你只是希望简单地 本地加载瓦片，可以使用 HTTP 服务器 来运行瓦片文件。例如，使用 Python 的 SimpleHTTPServer：
1. 在本地文件夹中存放瓦片数据（如 tiles/{z}/{x}/{y}.png）。
2. 在该目录下运行 python -m http.server（Python 3.x）。
3. 在浏览器中访问 http://localhost:8000 即可查看瓦片。

3. 离线部署地图服务

3.1 使用 Tegola 部署

配置 Tegola 作为离线瓦片服务：
1. 安装 Tegola 后，使用配置文件来指定 MBTiles 数据源或 PostGIS 数据源。
2. 启动 Tegola 服务并监听本地端口（例如 localhost:8080）。
3. 配置客户端（如 Leaflet）来请求这些瓦片。

3.2 使用 TileStache 部署

配置 TileStache 来部署瓦片服务：
1. 安装并配置 TileStache，指定 MBTiles 数据源。
2. 启动 TileStache 服务，监听本地端口。
3. 在客户端请求这些瓦片时使用本地地址（例如 http://localhost:8080）。

3.3 使用本地 HTTP 服务器

本地服务器托管瓦片：
1. 使用如 Python HTTPServer、Nginx 或 Apache HTTP Server 在本地托管瓦片数据。
2. 配置浏览器或地图服务客户端来访问本地服务。

4. 地图JS如何调用这个地图瓦片服务

使用 Leaflet 或 Mapbox GL JS 来调用本地的瓦片服务并显示地图。

4.1 使用 Leaflet 调用本地瓦片服务

在 Leaflet 中加载本地瓦片：

var map = L.map('map').setView([39.90923, 116.397428], 13);

L.tileLayer('http://localhost:8080/tiles/{z}/{x}/{y}.png', {
  attribution: '离线地图'
}).addTo(map);

4.2 使用 Mapbox GL JS 调用本地瓦片服务

在 Mapbox GL JS 中使用本地瓦片：

mapboxgl.accessToken = 'your-mapbox-access-token';

var map = new mapboxgl.Map({
  container: 'map',
  style: {
    version: 8,
    sources: {
      'offline-tiles': {
        type: 'raster',
        tiles: ['http://localhost:8080/tiles/{z}/{x}/{y}.png'],
        tileSize: 256
      }
    },
    layers: [{
      id: 'offline-layer',
      type: 'raster',
      source: 'offline-tiles',
      paint: {
        'raster-opacity': 1
      }
    }]
  },
  center: [116.397428, 39.90923],
  zoom: 13
});

总结：

下载离线瓦片：使用 MOBAC 或 MapTiler 等工具下载瓦片，保存为 MBTiles 格式或图像格式。
运行离线瓦片服务：可以使用 Tegola 或 TileStache 作为瓦片服务，或者简单使用本地 HTTP 服务器。
离线部署地图服务：使用 Tegola、TileStache 或本地服务器来托管瓦片数据。
地图JS调用瓦片服务：使用 Leaflet 或 Mapbox GL JS 来加载本地瓦片服务。

这种方式可以在完全离线的环境下提供地图功能，适用于没有网络连接的设备或场景。

离线地图

# 离线地图

# 1. 方案

# 1.2 可用于离线（无网络）加载本地数据/瓦片的地图 API

# 数据/格式兼容要点

# 简要选择建议

# 1. 方案

# 1. 瓦片下载工具：水经注

# 2. 离线展示：Leaflet 或 ArcGIS API

# ArcGIS API for JavaScript、Leaflet 和 Cesium 进行对比分析，从而选择最适合你的方案。

# 1. ArcGIS API for JavaScript

# 优势：

# 缺点：

# 适用场景：

# 2. Leaflet

# 优势：

# 缺点：

# 适用场景：

# 3. Cesium

# 优势：

# 缺点：

# 适用场景：

# 综合对比与建议

# 推荐方案：

# 1. 方案

# 1. 如何下载离线地图瓦片

# 1.1 Mobile Atlas Creator (MOBAC)

# 1.2 MapTiler

# 1.3 TileStache / Tegola

# 2. 离线地图瓦片，用什么服务运行

# 2.1 Tegola

# 2.2 TileStache

# 2.3 本地 Web 服务器

# 3. 离线部署地图服务

# 3.1 使用 Tegola 部署

# 3.2 使用 TileStache 部署

# 3.3 使用本地 HTTP 服务器

# 4. 地图JS如何调用这个地图瓦片服务

# 4.1 使用 Leaflet 调用本地瓦片服务

# 4.2 使用 Mapbox GL JS 调用本地瓦片服务

# 总结：

# 2. OpenLayers 实现的离线地图

# 2.1 使用GeoServer 发布 WMTS 服务作为底图

离线地图

1. 方案

1.2 可用于离线（无网络）加载本地数据/瓦片的地图 API

数据/格式兼容要点

简要选择建议

1. 方案

1. 瓦片下载工具：水经注

2. 离线展示：Leaflet 或 ArcGIS API

ArcGIS API for JavaScript、Leaflet 和 Cesium 进行对比分析，从而选择最适合你的方案。

1. ArcGIS API for JavaScript

优势：

缺点：

适用场景：

2. Leaflet

优势：

缺点：

适用场景：

3. Cesium

优势：

缺点：

适用场景：

综合对比与建议

推荐方案：

1. 方案

1. 如何下载离线地图瓦片

1.1 Mobile Atlas Creator (MOBAC)

1.2 MapTiler

1.3 TileStache / Tegola

2. 离线地图瓦片，用什么服务运行

2.1 Tegola

2.2 TileStache

2.3 本地 Web 服务器

3. 离线部署地图服务

3.1 使用 Tegola 部署

3.2 使用 TileStache 部署

3.3 使用本地 HTTP 服务器

4. 地图JS如何调用这个地图瓦片服务

4.1 使用 Leaflet 调用本地瓦片服务

4.2 使用 Mapbox GL JS 调用本地瓦片服务

总结：

2. OpenLayers 实现的离线地图

2.1 使用GeoServer 发布 WMTS 服务作为底图