Uncaught TypeError: L.tileLayer.offline не является функцией в Leaflet с webpack и Framework7 - PullRequest
0 голосов
/ 01 июля 2019

Я пытаюсь внедрить эту автономную библиотеку листовок в мое приложение Frameworkova (v4 с веб-пакетом) cordova.Но когда я запускаю страницу, отображающую карту, я получаю сообщение об ошибке Uncaught TypeError: L.tileLayer.offline не является функцией

Я включаю все необходимые сценарии в индексную страницуприложение, использующее теги скрипта.На других страницах для онлайн-карт он работает просто отлично.

Функция автономной страницы init - это то, где я запускаю следующий код:

export default {
on:{
pageInit: function() {
var self = this;
var app = self.$app;
var $ = this.$;

'use strict';

var tilesDb = {
    getItem: function (key) {
        return localforage.getItem(key);
    },

    saveTiles: function (tileUrls) {
        var self = this;

        var promises = [];

        for (var i = 0; i < tileUrls.length; i++) {
            var tileUrl = tileUrls[i];

            (function (i, tileUrl) {
                promises[i] = new Promise(function (resolve, reject) {
                    var request = new XMLHttpRequest();
                    request.open('GET', tileUrl.url, true);
                    request.responseType = 'blob';
                    request.onreadystatechange = function () {
                        if (request.readyState === XMLHttpRequest.DONE) {
                            if (request.status === 200) {
                                resolve(self._saveTile(tileUrl.key, request.response));
                            } else {
                                reject({
                                    status: request.status,
                                    statusText: request.statusText
                                });
                            }
                        }
                    };
                    request.send();
                });
            })(i, tileUrl);
        }

        return Promise.all(promises);
    },

    clear: function () {
        return localforage.clear();
    },

    _saveTile: function (key, value) {
        return this._removeItem(key).then(function () {
            return localforage.setItem(key, value);
        });
    },

    _removeItem: function (key) {
        return localforage.removeItem(key);
    }
};

var map = L.map('map-id');
var offlineLayer = L.tileLayer.offline('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', tilesDb, {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: 'abc',
    minZoom: 13,
    maxZoom: 19,
    crossOrigin: true
});
var offlineControl = L.control.offline(offlineLayer, tilesDb, {
    saveButtonHtml: '<i class="fa fa-download" aria-hidden="true"></i>',
    removeButtonHtml: '<i class="fa fa-trash" aria-hidden="true"></i>',
    confirmSavingCallback: function (nTilesToSave, continueSaveTiles) {
        if (window.confirm('Save ' + nTilesToSave + '?')) {
            continueSaveTiles();
        }
    },
    confirmRemovalCallback: function (continueRemoveTiles) {
        if (window.confirm('Remove all the tiles?')) {
            continueRemoveTiles();
        }
    },
    minZoom: 13,
    maxZoom: 19
});

offlineLayer.addTo(map);
offlineControl.addTo(map);

offlineLayer.on('offline:below-min-zoom-error', function () {
    alert('Can not save tiles below minimum zoom level.');
});

offlineLayer.on('offline:save-start', function (data) {
    console.log('Saving ' + data.nTilesToSave + ' tiles.');
});

offlineLayer.on('offline:save-end', function () {
    alert('All the tiles were saved.');
});

offlineLayer.on('offline:save-error', function (err) {
    console.error('Error when saving tiles: ' + err);
});

offlineLayer.on('offline:remove-start', function () {
    console.log('Removing tiles.');
});

offlineLayer.on('offline:remove-end', function () {
    alert('All the tiles were removed.');
});

offlineLayer.on('offline:remove-error', function (err) {
    console.error('Error when removing tiles: ' + err);
});

map.setView({
    lat: 0.369682, 
    lng: 32.612868
}, 18); }}};

Я подозреваю, что проблема заключается в интеграции библиотеки листовок со средой webpack, но я не смог ее разместить.

Любые указатели на это очень ценятся.

...