在Angular Mapboxgl项目中添加自定义标记

Question

我在将其添加到地图时遇到了一些问题。首先，我在ngOnInit（）函数中初始化地图。

ngOnInit(){

mapboxgl.accessToken = environment.mapboxKey;
this.mapa = new mapboxgl.Map({
  container: 'mapa-mapbox',
  style: 'mapbox://styles/mapbox/satellite-v9',
  center:  [50, 50], //LON, LAT
  zoom: 15,
  speed: 1
});

setTimeout(()=>{    //<<<---    using ()=> syntax
  this.cargarImagen();
}, 1000);
}  

和这些cargarImagen（）函数。

cargarImagen(){
this.mapa.loadImage('https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png', function(error, image){
  if(error) throw error;
  this.mapa.addImage('kitten', image);
})
}

当我对其进行测试时，导航器控制台将显示下一个文本：

“ ERROR错误：未捕获（承诺）：错误：由于无法读取未定义的属性'mapa'，因此无法加载图像。请确保使用受支持的图像类型，例如PNG或JPEG。请注意，SVG并非支持的。 错误：由于无法读取未定义的属性“ mapa”，因此无法加载图像。请确保使用受支持的图像类型，例如PNG或JPEG。请注意，不支持SVG。“