Leaflet Draw spritesheet图标问题 - 丢失然后未对齐

Question

我在我的一个项目中加入了传单绘制。我的问题是图标没有显示在工具栏中。它看起来像这样：

环顾四周，我发现 THIS post 并按照说明去做。我在 Leaflet Draw 文件夹中找到了 spritesheet 并像 htis:

一样链接到它

    .leaflet-draw-toolbar a {
            background-image: url('E:/MappingProject/Leaflet.Draw/src/images/spritesheet.png');
            background-repeat: no-repeat;
        }

我最终得到了这个：

我似乎找不到任何其他解决方案来让这个精灵sheet在方框中排列。它看起来不是拉出单个图标，而是将整个 sheet 放在每个按钮中。

这是我实例化 L.FeatureGroup() 和 L.Control.Draw() 的代码：

    function logIn(){
        map = L.map('map').setView([51.505, -0.09], 13);
        OpenStreetMap_HOT.addTo(map);
        $("#logInScreen").css('display', 'none');
        addSideBars();
        addDrawToMap();
    }        

/////////////////////////////////////////////
        //DRAW FUNCTIONALITY
///////////////////////////////////////////
        function addDrawToMap(){
            map.addControl(drawControl);
            map.addLayer(drawnItems);
        }
        var drawnItems = new L.FeatureGroup();
            var drawControl = new L.Control.Draw({
                position: 'topright',
                draw: {
                    polyline: true,
                    polygon: true,
                    circle: true,
                    marker: true
                },
                edit: {
                    featureGroup: drawnItems,
                    remove: true
                }
            });

有人对此有经验吗？

Answer 1

您很可能错过了 Leaflet-draw CSS file。

正是在该文件中定义了像 .leaflet-draw-toolbar a 这样的 CSS 规则。

示例没有此文件，但有您的 CSS 规则：

var map = L.map('map').setView([48.86, 2.35], 11);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var drawControl = new L.Control.Draw({
  position: 'topright'
});
map.addControl(drawControl);

.leaflet-draw-toolbar a {
  background-image: url('https://unpkg.com/leaflet-draw@1.0.2/dist/images/spritesheet.png');
  background-repeat: no-repeat;
  color: transparent !important;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="https://unpkg.com/leaflet-draw@1.0.2/dist/leaflet.draw-src.js"></script>

<div id="map" style="height: 200px"></div>

此文件的示例：

var map = L.map('map').setView([48.86, 2.35], 11);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var drawControl = new L.Control.Draw({
  position: 'topright'
});
map.addControl(drawControl);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.2/dist/leaflet.draw-src.css" />
<script src="https://unpkg.com/leaflet-draw@1.0.2/dist/leaflet.draw-src.js"></script>

<div id="map" style="height: 200px"></div>

Answer 2

如果您正在使用 Angular，只需将 link 添加到 styles.css[=] 中的 css 文件12=]

@import "~leaflet/dist/leaflet.css";
@import "~leaflet-draw/dist/leaflet.draw.css";

Leaflet Draw spritesheet图标问题 - 丢失然后未对齐

Leaflet Draw spritesheet icon issue - Missing and then not aligned

css

icons

toolbar

draw

leaflet