Расширяет библиотеку машинописи с помощью JavaScript - PullRequest
Новая
       10

Расширяет библиотеку машинописи с помощью JavaScript

0 голосов
/ 28 апреля 2018

Я работаю с Ionic 3 для создания простого приложения карты, чтобы представить карту, которую я использую leaflet (печатная версия) с OpenStreet плитки карты

Я хочу предоставить пользователю возможность загружать и кэшировать карту, поэтому я нашел leaflet-offline здесь и хотел использовать его, поскольку он позволяет мне использовать мой localstorage для хранения изображений.

Теперь моя проблема возникает из-за того, что я пытаюсь смешать машинопись с javascript и не могу понять, как заставить ее работать правильно.

Что я сделал и в чем проблема:

Я установил версию с напечатанным буклетом, а затем версию javascript для автономного буклета.

Теперь я импортировал их на своей странице следующим образом: 

import * as leaflet from 'leaflet';
import 'leaflet-offline';

Теперь, если я пытаюсь использовать библиотеку, как описано в примере, я получаю ошибку машинописного текста, которая указывает на то, что свойство offline отсутствует в объекте TileLayer. 

leaflet.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
}).addTo(this.map);

Чтобы избежать этого, я добавил 

export namespace tileLayer {
function wms(baseUrl: string, options?: WMSOptions, offline?: any): TileLayer.WMS;
function offline(url?: any, tilesDb?: any, options?: any): any;
}

функция offline находится в пространстве имен самого tileLayer.

Текущая проблема В тот момент, когда я пытаюсь запустить приложение, все работает нормально, за исключением самой карты, я не вижу ее, и при ее просмотре возникает ошибка:

ОШИБКА TypeError: Невозможно прочитать свойство 'then' из null в NewClass.getTileUrl (vendor.js: 163411) в NewClass.createTile (vendor.js: 163389) в NewClass._addTile (vendor.js: 79419) в NewClass._update (vendor.js: 79310) в NewClass._setView (vendor.js: 79171) в NewClass._resetView (vendor.js: 79129) в NewClass.fire (vendor.js: 68787) в NewClass._move (vendor.js: 72343) в NewClass._onZoomTransitionEnd (vendor.js: 72800) в NewClass._catchTransitionEnd (vendor.js: 72732)

Я уверен, что делаю какую-то глупую ошибку, но я потерял много времени на эту проблему.

Кто-нибудь знает, как решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

Вы можете посмотреть в источнике https://github.com/robertomlsoares/leaflet-offline/blob/master/src/TileLayer.Offline.js

, что вы не в состоянии на: 

    var resultPromise = this._tilesDb.getItem(dbStorageKey).then(function (data) {

Итак, звонок на 

_tilesDb.getItem(dbStorageKey)

возвращает ноль, и в этот момент код пытается вызвать 'then' в ноль.

Так как tileDB - это то, что вы должны предоставлять сами, вы можете установить точку останова в своей функции getItem, чтобы увидеть, что происходит. В какой-то момент вы возвращаете null из функции getItem.

Что должен делать getItem: 

// return Promise that has the image Blob/File/Stream.

Ключом, предоставленным для getItem, является URL, который вы указали для подстановки регулярного выражения (см. _GetStorageKey в том же исходном файле)

0 голосов
/ 16 мая 2018

Невозможно прочитать свойство 'then' со значением null

Typescript выдает эту ошибку, когда then получает null от функции, к которой он применен. Поэтому убедитесь, что вы не пропустили оператор возврата, если ваша функция настраивается.

Теперь вместо добавления слоя на карту непосредственно во время, скажем, инициализации. для этого попробуйте заменить существующий код на 

const offlineLayer = leaflet.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
});

offlineLayer.addTo(this.map)

проверьте ссылку на карту либо this.map, либо по ссылке в вашем коде.

...