传单地图 - 添加与图层控件类似的自定义控件，但想要不同的图标 - 由 CSS 定义

Question

我正在传单地图上构建一个自定义控件，我希望其工作方式与传单图层控件类似。我从图层控件中复制了逻辑，以在地图上显示图标，并在鼠标悬停在其上时弹出界面。这并不简单，因为图层控制是 Javascript，而我正在使用打字稿。但现在除了一个小问题之外，一切正常。

我无法更改图层工具使用的图标，因为它是在 CSS 中定义的。我创建的 .SCSS 样式可以在显示地图的主窗体中使用，但不能在传单地图本身中使用。一种强力方法是修改传单源 .css 文件并在其中添加我的新 css。但我正在努力避免这种情况。

有没有办法让地图自定义控件识别在传单外部定义的CSS？

在下面的代码中，创建过滤器图标的行创建了类名 leaflet-control-layers-toggle。此类定义图标图像。如果我将此类更改为其他任何类，则不会显示任何图标。

    this.filtersLink = L.DomUtil.create('a', className + '-toggle', this.container);
    this.filtersLink.href = '#';
    this.filtersLink.title = 'Filters';
    
    
    /* ...  */
    
    private InitLayout() {
        const className = 'leaflet-control-layers';
        this.container = L.DomUtil.create('div', className);
        this.container.style.backgroundColor = 'white';
        this.container.setAttribute('aria-haspopup', 'true');
        L.DomEvent.disableClickPropagation(this.container);
        L.DomEvent.disableScrollPropagation(this.container);
        this.section = L.DomUtil.create('section', className + '-list');
        if (this.collapsed) {
          this.map.on('click', this.CollapseDialog, this);
          if (!L.Browser.android) {
            L.DomEvent.on(this.container, {
              mouseenter: this.ExpandDialog,
              mouseleave: this.CollapseDialog
            }, this);
          }
        }
        this.filtersLink = L.DomUtil.create('a', className + '-toggle', this.container);
        this.filtersLink.href = '#';
        this.filtersLink.title = 'Filters';
        if (L.Browser.touch) {
          L.DomEvent.on(this.filtersLink, 'click', L.DomEvent.stop);
          L.DomEvent.on(this.filtersLink, 'click', this.ExpandDialog, this);
        } else {
          L.DomEvent.on(this.filtersLink, 'focus', this.ExpandDialog, this);
        }
    
        this.AddLabel('Temporal');
        this.AddRadioButton ( 'temporal01', 'temporal', 'Today', '1', false);
        this.AddRadioButton ( 'temporal02', 'temporal', 'Yesterday', '2', false );
        this.AddRadioButton ( 'temporal03', 'temporal', '7 Days', '3', true );
        this.AddRadioButton ( 'temporal04', 'temporal', '30 Days', '4', false );
        this.AddSeparator();
        this.AddLabel('Severity');
        this.AddCheckBox1 ( 'severity01', 'Major', '1', true );
        this.AddCheckBox1 ( 'severity02', 'Minor', '2', true );
        this.AddCheckBox1 ( 'severity03', 'Insignificant', '3', true );
        this.AddSeparator();
        this.AddLabel('Status');
        this.AddCheckBox2 ( 'status01', 'Active', '1', true );
        this.AddCheckBox2 ( 'status02', 'Reinspect', '2', true );
        this.AddCheckBox2 ( 'status03', 'Reactivated', '3', true );
        this.AddCheckBox2 ( 'status04', 'Closed', '4', false );
        this.container.appendChild(this.section);
    
        if (!this.collapsed) {
          this.ExpandDialog();
        }
      }

Answer 1

弄清楚了 - 有两种方法可以做到这一点：

• 用 :ngdeep 覆盖
• 将其添加到项目根目录下的 styles.scss 中