无法自定义OpenLayer地图控件

Question

我尝试使用文档中的 css 选择器 .ol-zoom-in 和 .ol-zoom-out 自定义地图的默认控件，还尝试添加用于缩放的自定义按钮，但仍然无法设置它们的样式。想法？

export class ExperimenteComponent implements OnInit {

  map: Map | undefined;

  constructor() {}
  
  ngOnInit(): void {
    this.map = new Map({
       target: 'map',
       controls:[],
       layers: [
         new TileLayer({
           source: new XYZ({
             url: 'https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=************',
             attributions: 'Tiles © <a href="https://www.maptiler.com/">MapTiler</a>',
             maxZoom: 21,
           }),
         }),
       ],
       
       view: new View({
         center: [ 28.23333, 45.18333],
         zoom: 5,
       }),
    });
    this.addCustomZoomControls();
  }
  addCustomZoomControls() {
    this.map!.addControl(new Zoom({
      zoomInLabel: '+',
      zoomOutLabel: '-',
      zoomInTipLabel: 'Zoom in',
      zoomOutTipLabel: 'Zoom out',
      className: 'custom-zoom' 
    }));
  }
}

Answer 1

buttonControl = (controlClass:string,iconClass: string, tooltip: string, toggleFn: (event: any) => void) => {
    const div = document.createElement('div');
    div.id  = UUID.UUID();
    div.className = 'ol-toggle ol-button ol-unselectable ol-control '+controlClass;
    div.setAttribute('style', 'pointer-events: auto');
    const button = document.createElement('button');
    button.type = 'button';
    button.title = tooltip;
    div.appendChild(button);
    const i = document.createElement('i');
    i.setAttribute('style', 'cursor:pointer');
    i.className = iconClass;
    i.title = tooltip;
    button.addEventListener('click', (event) => toggleFn(event));
    button.appendChild(i);
    const buttonControl: Control = new Control({ element: div });
    buttonControl.disable = () => div.classList.add('ol-disable');
    buttonControl.enable = () => div.classList.remove('ol-disable');
    return buttonControl;
};
addCustomZoomControls() {
    const zoomInControl  = buttonControl('','la la-plus', 'Zoom in', this.mapZoomIn);
    const zoomOutControl = buttonControl('','la la-minus', 'Zoom out', this.mapZoomOut);
    this.map.addControl(zoomInControl);
    this.map.addControl(zoomOutControl);
}

mapZoomIn() {
    const currentZoom = this.map.getView()?.getZoom();
    this.map.getView()?.setZoom(currentZoom + 1);
}
mapZoomOut() {
    const currentZoom = this.map.getView()?.getZoom();
    this.map.getView()?.setZoom(currentZoom - 1);
}