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

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

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

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

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

是的,可以在 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);

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

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

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

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

    L.tileLayer('/map-tiles/{z}/map_{x}_{y}.png', { 归因:'Map data © ???', }).addTo(地图);

  2. 带有栅格切片的 MBTiles 文件。这样的文件可以通过 Leaflet.TileLayer.MBTiles.js 插件显示。示例脚本如下所示。

  3. VectorGrid is a compact candidate for reading the vector data from the MBTiles file. See also this intruction.

  4. Mapbox GL JS 离线。在那种情况下,您将矢量文件放在本地。参见demo

  5. mobac.sourceforge.net 如下@JaakL 所建议。

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

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

在使用 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>