带有传单的 MBTILES 文件

Question

我正在使用Tileserver来托管我的mbtiles文件。我正在尝试使用离子传单打开我的 mbtile 文件。我无法看到地图。以下是我正在使用的代码：

leaflet.tileLayer('http://subdomain/styles/klokantech-basic/?vector#{z}/{x}/{y}').addTo(map);

我也尝试使用：

var mb = leaflet.tileLayer.mbTiles('http://subdomain/styles/klokantech-basic/?vector#{z}/{x}/{y}').addTo(this.map);

但我只能在设备上看到灰屏而不是地图。

Answer 1

听起来传单正在从您的磁贴服务器加载切片，但您提供的地图没有您正在查看的位置和缩放级别的数据。 试试这个脚本。

传单示例：

<script>
var map = L.map('map').     
setView([lat, lon], zoom ); 
//OpenMapTiles
L.tileLayer('http://subdomain/styles/klokantech-basic/{z}/{x}/{y}.png', {
//tms: true,
maxZoom: 20,
attribution: 'Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
</script>

另一种方法是使用 Mapbox GL JS，这会将渲染推送到您的浏览器，并允许您使用 tileserver-gl-light：

<script src='http://subdomain/mapbox-gl.js'></script>
<link href='http://subdomain/mapbox-gl.css' rel='stylesheet' />

地图框 GL JS

var map = new mapboxgl.Map({
container: 'map',
style: 'http://subdomain/styles/klokantech-basic/style.json',
center:  [lon, lat],
zoom: 7
});

创建mbtiles文件时，请确保创建它以支持您设置的缩放级别和位置，OpenMapTiles默认为缩放级别7，可能需要为您的地图增加缩放级别，我使用14，它支持缩放级别为20进行渲染。