// 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);
如何使用Leaflet显示地图？默认情况下，Leaflet使用光栅图像。通常这些瓦片是通过互联网检索的。
如何使用离线文件显示地图？例如，因为没有互联网连接？
层级结构中的本地瓷砖。例如，使用以下脚本。缺点是这不是一个紧凑的格式。它需要一些准备工作：
L.tileLayer('/map-tiles/{z}/map_{x}_{y}.png', { attribution: '地图数据 © ???', }).addTo(map);
包含栅格瓷砖的MBTiles文件。可以通过Leaflet.TileLayer.MBTiles.js插件显示此类文件。以下是示例脚本。
VectorGrid是从MBTiles文件中读取矢量数据的紧凑候选项。另请参见说明。
Mapbox GL JS离线。在这种情况下，您将本地放置矢量文件。请参见演示。
如@JaakL所建议的mobac.sourceforge.net。
广告选项3：OpenMapTiles.com生成非常紧凑的矢量格式MBTiles文件。因此，此解决方案对于选项3非常有用。
广告选项2：当您拥有MBTILES / Raster文件时，以下代码将正常工作。因此，它无法与上述MBTiles矢量文件一起使用。
在使用npm安装该软件包约1分钟后，我运行了演示。演示位于“node_modules \ Leaflet.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>