显示离线OSM映射文件.建议:带有Js.library的MB Tiles文件 [英] Showing an offline OSM map file. Suggestion: an MB Tiles file with Js.library
问题描述
当无法在线访问Internet时，我希望(离线)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脱机网络应用程序中显示此下载的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'，{ 归因:地图数据© ???'， }).addTo(map);
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生成具有Vector格式的非常紧凑的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/光栅文件时，以下代码将正常运行.因此，它不能与上面的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 ...并选择Amsterdam
- 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_modules \ Leaflet.TileLayer.MBTiles \ demo"文件夹下.工作正常.
After installing in about 1 minute with npm the package I ran the demo. The demo is under the 'node_modules\Leaflet.TileLayer.MBTiles\demo' folder. Works fine.
然后我尝试显示阿姆斯特丹地图. las，我(作为新手)无法正常工作.我正在为此调查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文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
