1

我正在使用 Tileserver 来托管我的 mbtiles 文件。我正在尝试使用 ionic 中的传单打开我的 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);

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

4

1 回答 1

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 用于渲染。

于 2018-12-10T14:24:54.630 回答