传单绘制Spritesheet图标问题-丢失然后未对齐

Question

我已经将传单抽签合并到我的一个项目中。我的问题是图标没有显示在工具栏中。它看起来像这样：

环顾四周，我发现了这个帖子，并按照说明进行了操作。我将Spritesheet放置在Leaflet Draw文件夹中，并像htis一样链接到它：

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

我结束了这个：

我似乎找不到其他解决方案来使此Spritesheet排列在框中。看起来好像没有拉出单个图标，而是将整个工作表放在每个按钮中。

这是我的实例化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文件。

正是在该文件.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>