файлы mbtiles с листовкой - PullRequest
Новая
       25

файлы mbtiles с листовкой

0 голосов
/ 25 июня 2018

Я использую Tileserver для размещения моего файла mbtiles.Я пытаюсь открыть свой мобильный файл с помощью листовки в ионном.Я не могу видеть карту.Ниже приведен код, который я использую: 

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

Но я просто вижу серый экран на своем устройстве вместо карты.

1 Ответ

0 голосов
/ 10 декабря 2018

Звучит так, будто листовка загружает плитки с вашего сервера плиток, но на карте, которую вы обслуживаете, нет данных о местоположении и уровне масштабирования, которые вы просматриваете. Попробуйте этот скрипт.

Пример листовки: 

<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 для рендеринга.

...