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

问题描述：

当无法在线访问互联网时，我希望（离线）HTML5应用通过OSM文件显示OSM地图。显示脱机OSM映射文件。建议：带有Js.library的MB Tiles文件

你能否举一个例子说明我可以在离线的Html5应用程序中显示OSM如何从Mapforge/Geofabrik等离线OSM地图文件加载的磁贴？

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

回答你的问题是 “[是]（http://www.strcat.de/questions-with-yes-or-no-answers.html）”。请更具体一些;你有什么尝试？你考虑过哪些解决方案？ – IvanSanchez

我找不到一个好的解决方案。我希望有一个标准的解决方案是可能的，比如在Mapforge文件中使用leafletjs。你有工作解决方案吗？ – tjm1706

答

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

如何使用脱机文件显示地图？例如。因为没有互联网连接是可能的？

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

L.tileLayer（ '/地图图像块/ {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生成非常紧凑的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/[email protected]/dist/leaflet.css" rel="stylesheet" type="text/css" /> 
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script> 
<script src="https://unpkg.com/[email protected]/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>

我相信你需要在本地提供mbtiles文件。看看：https：//github.com/chelm/mbtiles-server –

然后我包括的代码段应该可以正常工作。 –

我认为Leaflet.TileLayer.MBTiles插件需要栅格图块，而OpenMapTiles网站为您提供矢量图块。 – ghybs

答

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

如果您需要将OSM文件转换为磁贴，请尝试一种工具，如Maperative及其tile generator。

您还可以尝试此链接列出的方法： http://wiki.openstreetmap.org/wiki/Creating_your_own_tiles。

一旦你有你的瓷砖，设置属性目录结构，并指向你的瓷砖层。

下面是使用单张一个例子：

// 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);

记住文件路径是相对的，你可能会必须确保约束条件是正确设置了自定义的瓷砖。

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

相关推荐