Question

我正在使用 Ionic 3 来构建一个简单的地图应用程序，以便使用呈现我正在使用传单（类型版本）的地图> OpenStreet地图图块

我想让用户下载和缓存地图的可能性，因此我找到传单离线 here并希望使用它，因为它允许我使用我的< em> localstorage 来存储图像。

现在我的问题出现了，我正在尝试将打字稿与javascript混合，我无法弄清楚如何让它正常工作。

我做了什么，问题是什么：

我安装了传单类型版本，然后安装了传单离线javascript版本。

现在我在页面中按如下方式导入了它们：

import * as leaflet from 'leaflet';
import 'leaflet-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：无法读取null的属性'then' NewClass.creitTile中的NewClass.getTileUrl（vendor.js：163411）（vendor.js：163389）在NewClass._addTile（vendor.js：79419）at at 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）at at NewClass._onZoomTransitionEnd（vendor.js：72800）at NewClass._catchTransitionEnd（vendor.js：72732）

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

任何人都有一些关于如何解决这个问题的线索？

Answer 1

您可以在来源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，此时代码尝试调用＆＃39;然后＆＃39;在null。

由于tilesDB是您应该自己提供的东西，您可以在getItem函数中放置一个断点来查看正在发生的事情。在某些时候，您将从getItem函数返回null。

getItem应该做什么：

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

提供给getItem的密钥是你提供的应用了正则表达式替换的url（参见同一源文件中的_getStorageKey）

Answer 2

无法读取属性＆＃39;然后＆＃39;为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或代码中的引用。

使用javascript

2 个答案: