Стиль Leaflet.draw испорчен в реагирующем компоненте

Question

В моем реактивном проекте я использую листовку в качестве библиотеки карт.И я не использовал пакет react-leaflet, а использовал оригинальную библиотеку листовок.

Теперь я хочу добавить плагин leaflet-draw, я уже установил пакет leaflet-draw npm, и мои настройки следующие:

import 'leaflet-draw'
import './leaflet-draw.less'

class GLMap extends Component {
  componentDidMount () {
    ...
    this.setUpLeafletDraw()
    this.map.on('draw:created', this.leafletDrawHandler)
  }

  leafletDrawHandler = (e) => {
    console.log('11111', e.layer._latlngs)
    const type = e.layerType
    const layer = e.layer

    if (type === 'marker') {
      layer.bindPopup('A popup!')
    }
    this.drawnItemsLayer.addLayer(layer)
  }

  setUpLeafletDraw = () => {
    // this.drawnItems is the layer contains the drawn features
    this.drawnItemsLayer = new L.FeatureGroup()
    this.map.addLayer(this.drawnItemsLayer)
    var drawControl = new L.Control.Draw({
      edit: {
        featureGroup: this.drawnItemsLayer
      }
    })
    this.map.addControl(drawControl)
  }
}

В приведенном выше коде, this.map - это экземпляр Dom листовки.Пока что функции розыгрыша листовки могут хорошо работать.

Но проблема в том, что стиль панели инструментов запутался следующим образом:

Так что жепроблема?

Answer 1

Скорее всего, отсутствует leaflet-draw CSS-файл, содержащий объявления для .leaflet-draw-toolbar.

Это может быть импортировано из leaflet-draw пакета, например:

import "leaflet-draw/dist/leaflet.draw-src.css";

или ссылка через public/index.html из CDN, например:

<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@latest/dist/leaflet.draw-src.css" />

Вот демо