我正在使用Ionic 3构建一个简单的地图应用程序,为了呈现地图,我正在使用带有OpenStreet地图瓦片的leaflet(打字版本)
我想让用户有可能下载和缓存地图,因此我找到了leaflet-offlinehere,并且想要使用它,因为它允许我使用localstorage来存储图像。
现在我的问题是,我正在尝试将typescript与javascript混合使用,但我无法弄清楚如何使其正常工作。
我已经做了什么以及问题所在:
我安装了leaflet typed版本,然后安装了leaflet-offline javascript版本。
现在我在页面中导入它们,如下所示:
import * as leaflet from 'leaflet';
import 'leaflet-offline';
现在,如果我按照示例所述尝试使用该库,我会收到一个typescript错误,指示对象TileLayer中不存在属性offline。
leaflet.tileLayer.offline('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', tilesDb, {
attribution: '© <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)
我确定我犯了一些愚蠢的错误,但是我在这个问题上浪费了很多时间。
有人知道如何解决这个问题吗?