6

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

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

示例：通过 openstreetmap.org，我首先导出了一小部分地图。如何在 Html5 离线 webapp 中显示这个下载的 OSM 地图。

4

2 回答 2

3

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

我们如何使用离线文件显示地图？例如，因为没有互联网连接是可能的？

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

    L.tileLayer('/map-tiles/{z}/map_{x}_{y}.png', { attribution: '地图数据 © ???', }).addTo(map);

  2. 带有光栅图块的 MBTiles 文件。这样的文件可以通过 Leaflet.TileLayer.MBTiles.js 插件显示。下面显示了一个示例脚本。

  3. VectorGrid是从 MBTiles 文件中读取矢量数据的紧凑候选。另请参阅此说明。

  4. Mapbox GL JS 离线。在这种情况下，您将矢量文件放在本地。请参阅演示。

  5. @JaakL 下面建议的 mobac.sourceforge.net。

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

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

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

然后我试图展示阿姆斯特丹地图。唉，我无法让这个（作为新手）工作。我正在为 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>
于 2017-05-10T21:10:50.907 回答
3

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

如果您需要将 OSM 文件转换为切片，请尝试使用Maperative及其切片生成器之类的工具。

您还可以尝试此链接中列出的方法： 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);

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

于 2017-05-06T05:09:42.223 回答