显示离线 OSM 映射文件.建议:一个带有 Js.library 的 MB Tiles 文件-前端问题

Showing an offline OSM map file. Suggestion: an MB Tiles file with Js.library(显示离线 OSM 映射文件.建议:一个带有 Js.library 的 MB Tiles 文件)

本文介绍了显示离线 OSM 映射文件.建议:一个带有 Js.library 的 MB Tiles 文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

When online access to the internet is not possible, I would like the (offline) HTML5 app show an OSM map via an OSM file.

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

Can you give an example of how I can show in an offline Html5 app OSM tiles that are loaded from an offline OSM map file like Mapsforge / Geofabrik etc?

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

Example: via the openstreetmap.org I first exported a small part of a map. How can I show this downloaded OSM map in the Html5 offline webapp.

推荐答案

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

How can we show a map using Leaflet? By default Leaflet works with raster images. Normally these tiles are retrieved via the internet.

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

How can we show a map using an offline file? E.g. because no internet connection is possible?

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

Local tiles in an hierarchy structure. For example by using such a script. The disadvantage is that this is not a compact format. It requires some preparational work:

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

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

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

MBTiles file with raster tiles. Such a file can be shown via the Leaflet.TileLayer.MBTiles.js plugin. An example script is shown below.

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

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

Mapbox GL JS offline. In that case you put locally your vector files. See the demo.

mobac.sourceforge.net 正如@JaakL 所建议的那样.

mobac.sourceforge.net as suggested below by @JaakL.

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

Ad option 3: OpenMapTiles.com generates very compact MBTiles file with the Vector format. So, this solution is useful for option 3.

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

Ad option 2: When you have an MBTILES/Raster file, then the following code will work correctly. So, it is not working with the above MBTiles vector file.

获取 TileLayer，包括演示:https://www.npmjs.com/package/Leaflet.TileLayer.MBTiles
获取一个示例 MBTile 文件:例如https://openmaptiles.org/downloads/#city ...然后选择阿姆斯特丹

Get the TileLayer including demo: https://www.npmjs.com/package/Leaflet.TileLayer.MBTiles
Get an example MBTile file: e.g. https://openmaptiles.org/downloads/#city ... and select Amsterdam

在使用 npm 大约 1 分钟安装包后，我运行了演示.演示位于node_modulesLeaflet.TileLayer.MBTilesdemo"文件夹下.工作正常.

After installing in about 1 minute with npm the package I ran the demo. The demo is under the 'node_modulesLeaflet.TileLayer.MBTilesdemo' folder. Works fine.

然后我尝试展示阿姆斯特丹地图.唉，我无法让这个(作为新手)工作.我正在为 POC 调查此问题.

Then I tried to show the Amsterdam map. Alas, I couldn't get this (as a newbie) working. I am investigating this for a POC.

如何更新此来源以显示阿姆斯特丹地图?完成它将给予+50赏金.

How can I update this source to get the Amsterdam map shown? Getting it done will give the +50 bounty.

<!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 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！