Question

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

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' />

Mapbox 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进行渲染。

带传单的mbtiles文件

1 个答案: