Angular 6 - 在Leaflet地图中添加Bing地图

Question

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

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

LeafletMapComponent中使用Leaflet：

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地图的可用示例，所以我猜这里可能有些内容缺失。

您有什么想法吗？我做错了什么？

- Guy Yafe

---

B的值是多少？ - IvanSanchez

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);

注意：我不会在构造函数中创建地图。相反，我会选择一个生命周期钩子方法，以便我可以确保地图是在视图加载后创建的。

- treecon