时间戳

首页 > 解决方案 > Leaflet.draw 样式在反应组件中搞砸了

leaflet - Leaflet.draw 样式在反应组件中搞砸了

问题描述

在我的 react 项目中，我使用传单作为地图库。而且我没有使用react-leaflet包，而是使用原始的传单库。

现在我想添加leaflet-draw插件，我已经安装了leaflet-drawnpm 包，我的设置如下：

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是leaflet Dom 实例。到目前为止，传单绘制的功能可以正常工作。

但问题是工具栏的样式混乱如下：

在此处输入图像描述

所以有什么问题？

标签： leafletstylesleaflet-draw

解决方案

很可能 leaflet-draw缺少包含.leaflet-draw-toolbar.

它可以像这样从包中导入：leaflet-draw

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

或通过public/index.htmlCDN 引用，如下所示：

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

这是一个演示

推荐阅读