开发者问题收集

使用 javascript 扩展 typescript 库

2018-04-28
402
javascript typescript leaflet ionic3

我正在使用 Ionic 3 构建一个简单的地图应用程序，为了呈现地图，我正在使用 leaflet （类型化版本）和 OpenStreet 地图图块

我想让用户能够下载和缓存地图，因此我在 这里 找到了 leaflet-offline 并想使用它，因为它允许我使用我的 localstorage 来存储图像。

现在我的问题出现了，因为我试图将 typescript 与 javascript 混合使用，但我不知道如何使其正常工作。

我做了什么以及问题是什么：

我安装了 leaflet 类型化版本，然后安装了 leaflet-offline javascript 版本。

现在我将它们导入到我的页面中，如下所示： 

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

现在，如果我尝试按照示例中的说明使用该库，我会收到一个 typescript 错误，这表明属性 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 本身的命名空间中。

当前问题 目前，当我尝试运行该应用程序时，除了实际地图之外，一切都运行正常，我看不到它，当我查看它时收到的错误如下：

ERROR TypeError: Cannot read property 'then' of null at NewClass.getTileUrl (vendor.js:163411) at NewClass.createTile (vendor.js:163389) at NewClass._addTile (vendor.js:79419) at NewClass._update (vendor.js:79310) at NewClass._setView (vendor.js:79171) at NewClass._resetView (vendor.js:79129) at NewClass.fire (vendor.js:68787) at NewClass._move (vendor.js:72343) at NewClass._onZoomTransitionEnd (vendor.js:72800) at NewClass._catchTransitionEnd (vendor.js:72732)

我确信我犯了一些愚蠢的错误，但我在这个问题上浪费了很多时间。

任何人对如何解决这个问题有什么想法吗？

2个回答

您可以在源代码中看到 https://github.com/robertomlsoares/leaflet-offline/blob/master/src/TileLayer.Offline.js

您在以下位置失败： 

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

因此对 

_tilesDb.getItem(dbStorageKey)

的调用返回 null，此时代码尝试在 null 上调用“then”。

由于 tilesDB 是您应该自己提供的东西，因此您可以在 getItem 函数中设置一个断点来查看发生了什么。在某些时候，您会从 getItem 函数返回 null。

getItem 应该做什么： 

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

提供给 getItem 的键是您提供的 url，并对其应用了正则表达式替换（请参阅同一源文件中的 _getStorageKey）

Sean F
2018-05-16

Cannot read property 'then' of null

当 then 从其应用的函数接收到 null 时，Typescript 会给出此错误。因此，如果您的函数是自定义的，请检查是否缺少 return 语句。

现在，不要在初始化时直接将图层添加到地图中。 为此，请尝试用 

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 还是代码中的引用。

Gaurav Paliwal
2018-05-16