Question

我正在使用leaflet-bing-layer插件，以便使用Leaflet添加基于Bing的地图。
由于我也使用OSM，因此我同时导入了leaflet和leaflet-bing-layer。导入语句如下：

import * as L from 'leaflet';
import * as B from 'leaflet-bing-layer';

以及组件LeafletMapComponent中传单的用法：

constructor () {
    this.baseMaps = {
      OpenStreetMap: L.tileLayer ("https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="https://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
      }),
      BingMap: B.tileLayer.bing(LeafletMapComponent.BING_KEY, {type: 'AerialWithLabels'})
    };
  }

不幸的是，玲BingMap: B.tileLayer.bing(...遇到错误： 无法读取未定义的属性“ bing”

我没有在Angular和Typescript中找到任何Bing映射的可用示例，因此我想这里缺少一些东西。

对我在做什么错有任何想法吗？

Answer 1

您应按以下方式导入 leaflet-bing-layer ：

import * as L from 'leaflet';
import 'leaflet-bing-layer';

然后，您可以如下添加Bing磁贴层。

L.tileLayer.bing(LeafletMapComponent.BING_KEY).addTo(map);

这将引发类型错误

property 'bing' does not exist on type 'tileLayer'

但是您可以通过将L定义为自定义类型来克服此错误：

(L as any).tileLayer.bing(LeafletMapComponent.BING_KEY).addTo(map);

注意：我不会在构造函数上创建地图。我将改为选择生命周期挂钩方法，以便可以确保在加载视图后创建的地图。

Angular 6-将Bing地图添加到传单地图

1 个答案: