首页 文章

显示脱机OSM映射文件 . 建议：带有Js.library的MB Tiles文件

提问于
浏览 次
6

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

您能举例说明我如何在离线Html5应用程序中显示OSM图块，这些图块是从Mapsforge / Geofabrik等离线OSM Map 文件加载的吗？

示例：通过openstreetmap.org我首先导出了一小部分 Map . 如何在Html5离线webapp中显示此下载的OSM Map .

javascript html5 leaflet openstreetmap mbtiles

2 回答

  • 3

    我们如何使用Leaflet显示 Map ？默认情况下，Leaflet适用于光栅图像 . 通常这些瓷砖是通过互联网检索的 .

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

    • Local tiles in an hierarchy structure . 例如，通过使用这样的脚本 . 缺点是这不是一种紧凑的格式 . 这需要一些准备工作：

    L.tileLayer（'/ map-tiles / / map_ _ .png'，{archive：'Map data©???'，}} . addTo（map）;

    • MBTiles file with raster tiles . 这样的文件可以通过Leaflet.TileLayer.MBTiles.js插件显示 . 示例脚本如下所示 .

    • VectorGrid 是从MBTiles文件中读取矢量数据的紧凑型候选者 . 另见intruction .

    • Mapbox GL JS offline . 在这种情况下，你在本地放置你的矢量文件 . 见demo .

    • mobac.sourceforge.net，如@JaakL所示 .

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

    广告选项2：当您有MBTILES / Raster文件时，以下代码将正常工作 . 因此，它不能使用上面的MBTiles矢量文件 .

    在使用npm的大约1分钟安装后，我运行了演示程序 . 该演示位于'node_modules \ Leaflet.TileLayer.MBTiles \ demo'文件夹下 . 工作良好 .

    然后我试图展示阿姆斯特丹 Map . 唉，我不能让这个（作为一个新手）工作 . 我正在调查这个POC .

    How can I update this source to get the Amsterdam map shown? 完成任务将获得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>
    回复于
  • 2

    是的，可以在Leaflet或任何其他映射库中执行此操作 . 您所要做的就是将OSM文件转换为一组切片，然后将切片图层指向本地存储的文件（相对路径） . 或者如果可能（我不熟悉OSM规则），您可以下载适合您所在地区的一组磁贴 .

    如果您需要将OSM文件转换为磁贴，请尝试使用Maperative及其tile generator等工具 .

    您还可以尝试此链接中列出的方法：http://wiki.openstreetmap.org/wiki/Creating_your_own_tiles .

    获得切片后，设置属性目录结构，并将切片图层指向它 .

    这是使用Leaflet的一个例子：

    // 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);

    请记住，文件路径是相对的，您可能必须确保为自定义切片设置了正确的约束 .

    回复于

相关问题