tm1*_*701 6 javascript html5 openstreetmap leaflet mbtiles
当无法在线访问互联网时,我希望(离线)HTML5应用程序通过OSM文件显示OSM地图.
您能举例说明我如何在离线Html5应用程序中显示OSM图块,这些图块是从Mapsforge/Geofabrik等离线OSM地图文件加载的吗？
示例:通过openstreetmap.org我首先导出了一小部分地图.如何在Html5离线webapp中显示此下载的OSM地图.
是的，可以在 Leaflet 或任何其他映射库中执行此操作。您所要做的就是将 OSM 文件转换为一组图块，然后将图块图层指向本地存储的文件（相对路径）。或者如果可能的话（我不熟悉 OSM 规则），您可以下载适合您所在区域的图块集。
如果您需要将 OSM 文件转换为图块，请尝试使用Maperative及其图块生成器等工具。
您还可以尝试此链接中列出的方法： 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);
请记住，文件路径是相对的，您可能必须确保为自定义图块设置了正确的约束。
我们如何使用Leaflet展示地图？默认情况下，Leaflet 使用光栅图像。通常这些图块是通过互联网检索的。
我们如何使用离线文件显示地图？例如，因为无法连接互联网？
层次结构中的局部图块。例如通过使用这样的脚本。缺点是这不是紧凑的格式。需要做一些准备工作：
L.tileLayer('/map-tiles/{z}/map_{x}_{y}.png', { attribution: '地图数据©???', }).addTo(map);
带有光栅图块的 MBTiles 文件。这样的文件可以通过 Leaflet.TileLayer.MBTiles.js 插件显示。下面显示了一个示例脚本。
VectorGrid是从 MBTiles 文件中读取矢量数据的紧凑候选者。另请参阅本说明。
Mapbox GL JS 离线。在这种情况下，您可以将矢量文件放在本地。请参阅演示。
mobac.sourceforge.net，如下@JaakL 所建议。
广告选项 3：OpenMapTiles.com 生成非常紧凑的 Vector 格式的 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>
| 归档时间： |
|
| 查看次数： |
3548 次 |
| 最近记录： |