传单绘制控件的工具栏未显示答案

【问题标题】：Leaflet-draw control's toolbar not displaying传单绘制控件的工具栏未显示
【发布时间】：2017-04-26 15:35:00
【问题描述】：

我正在尝试在 VueJS 中使用 Leaflet-draw，在调用它之后

import LeafletDraw from 'leaflet-draw'

但是当我尝试使用它时

    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    var drawControl = new L.Control.Draw({
        edit: {
            featureGroup: drawnItems
        }
    });

    map.addControl(drawControl);

我只有部分控件的工具栏

我是否缺少要包含的 CSS 文件？

【问题讨论】：

标签： leaflet leaflet.draw

【解决方案1】：

如果有人仍在寻找解决方案，那么在 vue 组件（例如 Map.vue）中，您需要添加以下内容：

<script>
import "leaflet-draw/dist/leaflet.draw.css";
.
.
.
</script>

【讨论】：

【解决方案2】：

问题与这个https://github.com/Leaflet/Leaflet.draw/issues/617有关

直接在我的组件中导入 CSS 文件并覆盖 CSS 属性就可以解决问题（使用精灵的有效路径；在 Vue 的情况下，静态文件夹）

.leaflet-draw-toolbar a {
    background-image: url('/static/spritesheet.png');
}

【讨论】：