在Angular 9中的Mapbox地图上添加多边形

Question

我正在使用mapbox-gl将Mapbox映射添加到我的Angular应用程序中，到目前为止效果良好。方法与这里的方法非常相似，但我无法在该库的Angular端口中找到Polygon。

这是我的组件代码：

private mapElement: ElementRef;
@ViewChild('map', { static: false }) set content(content: ElementRef) {
if (content) { // initially setter gets called with undefined
Object.getOwnPropertyDescriptor(mapboxgl, "accessToken").set(this.mapBoxKey);
this.map = new mapboxgl.Map({
container: content.nativeElement,
style: this.globals.MapboxStyle,
zoom: 12,
center: [this.centerLng, this.centerLat]
});
// Add map controls
this.map.addControl(new mapboxgl.NavigationControl());
//at this point I'd like to add a polygon....
}
}

map.addLayer似乎接受Layer类型的第一个参数，但我不确定在哪里可以找到这个类型，也无法创建它的实例。

我这里少了一个包裹吗？

Answer 1

看起来您只是在使用标准的Mapbox-GL-JS API。文件如下：https://docs.mapbox.com/mapbox-gl-js/api

您链接的示例是使用mapbox.js，而不是mapbox GL js。那是一个完全独立的图书馆。

Answer 2

下面是我完成的过程。显然，Mapbox GL库的Angular端口中没有包含任何类型，所以必须使用泛型对象。

private mapElement: ElementRef;
@ViewChild('map', { static: false }) set content(content: ElementRef) {
if (content) { // initially setter gets called with undefined
Object.getOwnPropertyDescriptor(mapboxgl, "accessToken").set(this.mapBoxKey);
this.map = new mapboxgl.Map({
container: content.nativeElement,
style: this.globals.MapboxStyle,
zoom: 12,
center: [this.centerLng, this.centerLat]
});
// Add map controls
this.map.addControl(new mapboxgl.NavigationControl());
let me = this;
me.space = this.space
this.map.on('load', function (e) {
this.addSource('space', { type: "geojson", data: me.space.geometry });
this.addLayer({
'id': 'space',
'type': 'fill',
'source': 'space',
'layout': {},
'paint': {
'fill-color': '#088',
'fill-opacity': 0.8
}
});
});
}
}