显示离线 OSM 地图文件。建议：一个 MB 的 Tiles 文件 Js.library

Question

当无法在线访问互联网时，我希望（离线）HTML5 应用程序通过 OSM 文件显示 OSM 地图。

您能否举例说明我如何在离线 Html5 应用程序中显示从离线 OSM 地图文件（如 Mapsforge / Geofabrik 等）加载的 OSM 瓦片？

示例：通过openstreetmap.org 我首先导出了地图的一小部分。如何在 Html5 离线网络应用程序中显示此下载的 OSM 地图。

Answer 1

是的，可以在 Leaflet 或任何其他映射库中执行此操作。您所要做的就是将 OSM 文件转换为一组瓦片，然后将您的瓦片图层指向本地存储的文件（相对路径）。或者，如果可能（我不熟悉 OSM 规则），您可以下载适合您所在地区的瓷砖集。

如果您需要将 OSM 文件转换为图块，请尝试使用像 Maperative and its tile generator 这样的工具。

您也可以尝试此处列出的方法link： http://wiki.openstreetmap.org/wiki/Creating_your_own_tiles.

获得图块后，设置属性目录结构，并将图块层指向它。

这是一个使用 Leaflet 的例子：

// the path may be different depending on how you have the tiles saved.
// you will have to define the options object

new L.tileLayer('/tiles/{z}/{x}/{y}.png', {}).addTo(map);

请记住文件路径是相对的，您可能必须确保为您的自定义图块设置的约束是正确的。

Answer 2

我们如何使用 Leaflet 显示地图？默认情况下，Leaflet 使用光栅图像。通常这些图块是通过互联网检索的。

我们如何使用离线文件显示地图？例如。因为无法连接互联网？

层次结构中的局部图块。例如通过使用这样的脚本。缺点是这不是一种紧凑的格式。它需要一些准备工作：

L.tileLayer('/map-tiles/{z}/map_{x}_{y}.png', { 归因：'Map data © ???', }).addTo(地图);
带有栅格切片的 MBTiles 文件。这样的文件可以通过 Leaflet.TileLayer.MBTiles.js 插件显示。示例脚本如下所示。
VectorGrid is a compact candidate for reading the vector data from the MBTiles file. See also this intruction.
Mapbox GL JS 离线。在那种情况下，您将矢量文件放在本地。参见demo。
mobac.sourceforge.net 如下@JaakL 所建议。

广告选项 3：OpenMapTiles.com 生成非常紧凑的 Vector 格式的 MBTiles 文件。因此，此解决方案对选项 3 很有用。

广告选项 2：当您有一个 MBTILES/Raster 文件时，以下代码将正常工作。因此，它不适用于上述 MBTiles 矢量文件。

获取包含演示的 TileLayer：https://www.npmjs.com/package/Leaflet.TileLayer.MBTiles
获取示例 MBTile 文件：例如https://openmaptiles.org/downloads/#city ... 和 select 阿姆斯特丹

在使用 npm 安装包后大约 1 分钟后，我运行演示。演示在 'node_modules\Leaflet.TileLayer.MBTiles\demo' 文件夹下。工作正常。

然后我试着展示阿姆斯特丹地图。 las，我无法让这个（作为新手）工作。我正在为此进行 POC 调查。

如何更新此源以显示阿姆斯特丹地图？ 完成它会得到 +50 赏金。

<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/leaflet@1.0.0/dist/leaflet.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/leaflet@1.0.0/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/sql.js@0.3.2/js/sql.js"></script>
<script src="../Leaflet.TileLayer.MBTiles.js"></script>
  <meta charset="utf-8">
  <title>Leaflet.TileLayer.MBTiles demo</title>
  <style>
    #map {
      width:600px;
      height:400px;
    }
  </style>
</head>
<body>
  <div id='map'></div>
  <script>
    var map = new L.Map('map');
    map.setView(new L.LatLng(52.361367, 4.923083), 18);
    var mb = L.tileLayer.mbTiles('./amsterdam_netherlands.mbtiles', {
        minZoom: 16,
        maxZoom: 20
    }).addTo(map);
    mb.on('databaseloaded', function(ev) {
        console.info('MBTiles DB loaded', ev);
    });
    mb.on('databaseerror', function(ev) {
        console.info('MBTiles DB error', ev);
    });
  </script>
</body>
</html>

显示离线 OSM 地图文件。建议：一个 MB 的 Tiles 文件 Js.library

Showing an offline OSM map file. Suggestion: an MB Tiles file with Js.library

javascript

html

leaflet

openstreetmap

mbtiles