Question

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

您能举例说明我如何在离线Html5应用程序中显示OSM图块，这些图块是从Mapsforge / Geofabrik等离线OSM地图文件加载的吗？

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

Answer 1

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

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

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

L.tileLayer（'/ map-tiles / {z} / map_ {x} _ {y} .png'，{ 归因：'地图数据©???'， }）AddTo就（地图）;
带有栅格图块的MBTiles文件。这样的文件可以通过Leaflet.TileLayer.MBTiles.js插件显示。示例脚本如下所示。
VectorGrid 是从MBTiles文件中读取矢量数据的紧凑型候选者。另请参阅此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 ...并选择阿姆斯特丹

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

显示脱机OSM映射文件。建议：带有Js.library的MB Tiles文件

1 个答案: