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

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

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

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


leaflet mbtiles
person Khushali Mehta    schedule 25.06.2018    source источник
comment
Второй метод, который вы пробовали, будет работать для локального источника mbTiles, но, поскольку вы обслуживаете плитки с помощью Tileserver, вам нужен первый метод. Вы убедились, что сервер тайлов успешно возвращает тайлы?   -  person peeebeee    schedule 26.06.2018
comment
Да, я это проверил. Я вижу карту в браузере с помощью tileserver, но не вижу ее на листовке.   -  person Khushali Mehta    schedule 26.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

person Guy Light    schedule 10.12.2018