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

Question

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

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

以及组件内部leaflet的用法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'})
    };
  }

不幸的是，ling 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 地图到传单地图

Angular 6 - Add Bing Maps to Leaflet Maps

bing-maps

leaflet

angular