我正在使用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: '© <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地图的任何工作示例,所以我想这里缺少一些东西。
我对自己做错了什么的想法?
你应该导入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);
注意:我不会在构造函数上创建映射。我会选择一个生命周期钩子方法,以便我可以确定加载视图后创建的地图。