ngx-leaflet:如何添加自定义控件？

// custom-control.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-control',
  template: `
    <div class="custom-control">
      <!-- 自定义控件的内容 -->
    </div>
  `,
  styleUrls: ['./custom-control.component.css']
})
export class CustomControlComponent {
  // 自定义控件的逻辑
}

// map.component.html
<ngx-map [options]="mapOptions">
  <!-- 其他地图内容 -->
  <app-custom-control></app-custom-control>
</ngx-map>

// map.component.ts
import { Component } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent {
  mapOptions: L.MapOptions = {
    // 地图选项
  };

  ngAfterViewInit() {
    const customControl = L.control({ position: 'topright' });
    customControl.onAdd = () => {
      const div = L.DomUtil.create('div', 'custom-control');
      // 在控件内部添加自定义内容
      return div;
    };
    customControl.addTo(this.map);
  }
}