問題描述
當無法在線訪問互聯網時，我希望(離線)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 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 文件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！