顯示脫機OSM映射文件。建議：帶有Js.library的MB Tiles文件

當無法在線訪問互聯網時，我希望（離線）HTML5應用通過OSM文件顯示OSM地圖。顯示脫機OSM映射文件。建議：帶有Js.library的MB Tiles文件

你能否舉一個例子說明我可以在離線的Html5應用程序中顯示OSM如何從Mapforge/Geofabrik等離線OSM地圖文件加載的磁貼？

例如：通過openstreetmap.org我首先導出了一小部分地圖。如何在Html5離線Web應用程序中顯示此下載的OSM地圖。

來源

2017-05-02 tjm1706

回答你的問題是「[是]（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>

來源

2017-05-10 21:10:50 tjm1706

我相信你需要在本地提供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);

記住文件路徑是相對的，你可能會必須確保約束條件是正確設置了自定義的瓷磚。

來源

2017-05-06 05:09:42

顯示脫機OSM映射文件。建議：帶有Js.library的MB Tiles文件

回答

相關問題