Показывает оффлайн OSM карты. Предложение: файл плиток MB с Js.библиотека

когда онлайн-доступ к интернету невозможен, я хотел бы, чтобы приложение HTML5 (offline) показывало карту OSM через файл OSM.

можете ли вы привести пример того, как я могу показать в автономном Html5 App OSM плитки, которые загружаются из автономного файла карты OSM, как Mapsforge / Geofabrik и т.д.?

пример: через openstreetmap.org сначала я экспортировал небольшую часть карты. Как я могу показать эту загруженную карту OSM в HTML5 offline webapp.

6
html5 javascript leaflet mbtiles openstreetmap

2 ответов

Как мы можем показать карту с помощью листовки? По умолчанию листовка работает с растровыми изображениями. Обычно эти плитки извлекаются через интернет.

Как мы можем показать карту, используя автономный файл? Е. Г. потому что нет подключение к интернету не возможно?

  1. локальные плитки в структуре иерархии. Например, используя такой скрипт. Недостатком является то, что это не компактный формат. Это требует некоторой подготовительной работы:

    L. tileLayer ('/map-tiles/{z} / map_{x}_{y}.ПНГ', { атрибуция: данные карты © ???', }).addTo (карта);

  2. MBTiles файл с растровыми плитками. Такой файл можно показать через листовку.TileLayer.Mbtiles в.плагин JS. Пример сценария показан ниже.

  3. VectorGrid является компактным кандидатом для чтения векторных данных из файла MBTiles. См. Также этот инструкцию.

  4. Mapbox GL JS offline. В этом случае вы помещаете локально свои векторные файлы. Вижу демо.

  5. mobac.sourceforge.net как предложено ниже @JaakL.

вариант объявления 3: OpenMapTiles.com генерирует очень компактный файл MBTiles с векторным форматом. Таким образом, это решение полезно для варианта 3.

Ad вариант 2: Когда у вас есть MBTILES/растр файл, то следующий код будет работать правильно. Таким образом, он не работает с вышеуказанным векторным файлом MBTiles.

после установки примерно через 1 минуту с npm пакет я запустил демо. Демо под в 'node_modules, в листовке\.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>
3

Да, это можно сделать в листовке или любой другой библиотеке сопоставления. Все, что вам нужно сделать, это преобразовать файл 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);

имейте в виду, что пути к файлам относительны, и вам, вероятно, придется убедиться, что ограничения правильно настроены для ваших пользовательских плиток.

2