Mapbox GL自定义控件应用自定义样式

Question

对于网站 Angular 8，使用 Typescript 和 SCSS。要显示地图，使用 mgl-map。现在我想为它创建一个自定义控件并为其应用自定义样式。

我使用以下方法将其添加到地图：

  const centerOnCoordinatesControl = new CenterOnCoordinatesControl();
  this.mapBoxMap.addControl(centerOnCoordinatesControl, 'bottom-left');

效果很好，但我的自定义样式没有应用到自定义控件。

为了检查是否加载了 css 样式，我在地图控件之外创建了相同的元素：

location.component.html:

<mgl-map class="mapbox-map"
         [style]="defaultStyle"
         [zoom]="zoom"
         [center]="grazCoord"
         (click)="onMapClick($event)"
         (load)="mapLoaded($event)">
         <mgl-control mglScale unit="metric" position="bottom-right"></mgl-control>
         <mgl-control *ngIf="this.mapBoxMap" mglFullscreen position="top-right"></mgl-control>
         <mgl-control *ngIf="this.mapBoxMap" mglGeolocate position="top-right"></mgl-control>
</mgl-map>

location.component.ts:

自定义控件:

class CenterOnCoordinatesControl {
  private map: any;
  private container: HTMLDivElement; 

  onAdd(map) {
    this.map = map;
    this.container = document.createElement('div');
    const control = document.createElement('i');

    control.className = 'custom-center-control mapboxgl-ctrl fas fa-map-marker-alt pointer'; 

    this.container.appendChild(control);
    return this.container;
  } 
}

location.component.scss:

.custom-center-control {
    font-size: x-large;
    color: green;

    &:hover {
        color: $cities-orange-light;
    }
}

我不明白为什么样式应用于地图外的那个，而不是地图内的 CustomControl。

我怎样才能让它发挥作用？

如果您需要更多信息，请告诉我。

Answer 1

尝试封装方法将此 encapsulation: ViewEncapsulation.None 添加到您的装饰器中：

示例：

@Component({
  selector: 'my-custom-input',
  templateUrl: 'src/my-custom-input.component.html',
  styleUrls:['src/my-custom-input.component.css'],
  encapsulation: ViewEncapsulation.None
})

Mapbox GL自定义控件应用自定义样式

Mapbox GL custom control apply custom style

css

angular

typescript

sass

mapbox-gl