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

Question

我正在使用 mapbox-gl 将 Mapbox 地图添加到我的 Angular 应用程序，到目前为止它可以正常工作。该方法与此方法非常相似 here 但我无法在该库的 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
                }
           });
      });

    }
}

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

Adding a polygon on Mapbox map in Angular 9

mapbox

mapbox-gl-js

angular

angular9