angular - Angular 组件作为 Mapbox 控件

Question

有人知道：我可以使用角度组件作为 Mapbox 自定义控件吗？我需要在地图上添加一些按钮，但我看到我必须传递一个 HTML 元素。

Answer 1

我使用https://stackoverflow.com/a/54561421/12302484做到了这一点。我已经创建了实现 IControl 接口的类。然后从动态组件服务解析的 onAdd 方法返回组件。

map.component.ts：

private configureControls(): void {
    this.map.dragRotate.disable();
    this.map.touchZoomRotate.disableRotation();
    this.map.addControl(new mapboxgl.NavigationControl({ showCompass: false }));
    this.map.addControl(new CustomMapControls(this.dynamicComponentService));
}

自定义地图控件.ts：

export class CustomMapControls {
    private _container: HTMLElement;
    private _switchColorButton: HTMLElement;

    private map: mapboxgl.Map;
    private dynamicComponentService: DynamicComponentService;

    constructor(dynamicComponentService: DynamicComponentService) {
        this.dynamicComponentService = dynamicComponentService;
        this._container = document.createElement('div');
        this._container.classList.add('mapboxgl-ctrl', 'mapboxgl-ctrl-group');
    }

    getDefaultPosition(): any {
        return undefined;
    }

    onAdd(map: mapboxgl.Map): HTMLElement {
        this.map = map;
        this._container.appendChild(this.dynamicComponentService.injectComponent(MapColorSwitcherComponent));
        return this._container;
    }

    onRemove(map: mapboxgl.Map): any {
    }
}

结果：