Добавление многоугольника на карту Mapbox в Angular 9 - PullRequest
Новая
       11

Добавление многоугольника на карту Mapbox в Angular 9

0 голосов
/ 24 апреля 2020

Я использую mapbox-gl, чтобы добавить карту Mapbox в мое приложение Angular, которое работает до сих пор. Подход очень похож на этот здесь , но я не могу найти Polygon в 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());

        //at this point I'd like to add a polygon....

    }
}

map.addLayer, кажется, принимает первый аргумент типа Layer, но я не уверен, где найти этот тип, и я не могу создать его экземпляр.

Am Я пропустил посылку здесь?

Ответы [ 2 ]

1 голос
/ 25 апреля 2020

Итак, вот как я это сделал. По-видимому, в порт Angular библиотеки Mapbox-GL нет типов, поэтому вы должны использовать объекты generi c. 

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

    }
}
1 голос
/ 25 апреля 2020

Похоже, вы просто используете стандартный API Mapbox-GL- JS. Документация здесь: https://docs.mapbox.com/mapbox-gl-js/api

В приведенном вами примере используется mapbox. js, а не Mapbox-GL- JS. Это совершенно отдельная библиотека.

...