为什么 Leaflet/Mapbox 缩放和图层控件缺少标记？答案

【问题标题】：Why are the Leaflet/Mapbox zoom and layer controls missing markings?为什么 Leaflet/Mapbox 缩放和图层控件缺少标记？
【发布时间】：2020-02-11 21:19:02
【问题描述】：

我们正在使用 mapbox 1.5.2 加载我们自己的图块，代码如下：

var mapLayer = L.tileLayer('http://192.168.1.2/tiles/{z}/{x}/{y}.png',
                            {maxZoom: 18}
);
var satLayer = L.tileLayer('http://192.168.1.2/images/{z}/{x}/{y}.png',
                            {maxZoom: 18}
);
var hybridLayer = L.tileLayer('http://192.168.1.2/roads/{z}/{x}/{y}.png',
                               {maxZoom: 18}
);
var satGroup = L.layerGroup([satLayer,hybridLayer]);
var baseLayers = {"OSM":mapLayer, "Sat":satGroup};
L.control.layers(baseLayers).addTo(map);

并获得以下地图：

控件发生了什么变化？我应该在缩放和多层“煎饼堆栈”中有一个加号/减号。 FWIW，控件工作正常。

【问题讨论】：

能否提供您的完整代码以及记录到您的控制台的任何错误或警告？这是access your console in Chrome的方法。
杰拉德，感谢 Chrome 控制台的想法。我一直在使用 Firefox，它在加载时会出现各种错误——甚至是 Mapbox 网站上的示例。 Chrome 控制台显示加载文件“icons-404040.png”时出现问题。哎呀！正如我在 tmcw 的回答中指出的那样，我将其加载到专用网络上。你知道我在哪里可以获得我可能需要的所有图片吗？

标签： leaflet mapbox

【解决方案1】：

在离线模式下使用时，至少需要三个文件：mapbox.css、mapbox.js 和 images/icons-404040.png。我使用以下 url 来获取 png 文件（它可能会随着版本的变化而变化）： http://api.tiles.mapbox.com/mapbox.js/v1.5.2/images/icons-404040.png

在 mapbox.css 级别创建一个 images 子目录并将该文件放入其中。我的应用程序正在运行。

这是文件的图片：

【讨论】：

【解决方案2】：

很可能您已经包含了 mapbox.js 文件，但没有包含 mapbox.css，或者是错误版本的 mapbox.css。

【讨论】：

您是正确的，这是 css 文件的问题，但我无法弄清楚原因。我正在做的是在本地托管文件，因为这是在无法访问 Internet 的封闭网络上进行的。在使用本地 css 文件之前它已经工作了，我已经从 mapbox 服务器重新复制了该文件，但没有成功。我将按照 gerald 的要求发布代码，但它基本上是 mapbox 开发人员页面上的简单地图示例。还有其他需要的文件吗？感谢您的宝贵时间。
原来css没有问题。它找不到本地图标文件。我不知道为什么我以前认为它有效。要么确实（这似乎不太可能），要么我没有注意到。

【解决方案3】：

根据 css 文件，您需要在 css 文件旁边包含一个“map/images/”文件夹，其中包含：

icons-4040.png
icons-4040@2x.png

第二个被mapbox用于高分辨率屏幕。

如果您的 mapbox 主题较暗，您可能还需要包含其他图片（请参阅here）。

图标-ffffff.png
icons-ffffff@2x.png

图片在下方，但白色背景使它们不可见。

【讨论】：

【解决方案4】：

我遇到了一个类似的问题，影响“图层控制”不可见（即使它们并没有完全丢失）和 +/- 控件稍微向左对齐

在我的例子中，我使用的是 CDN 中的 MAPBOX.CSS，这是由于与 LEAFLET.CSS

发生冲突

使用一个或另一个 CSS 文件解决了这个问题。 MAPBOX.CSS 似乎也影响了我的标记工具提示功能，所以我个人使用 LEAFLET.CSS 并只保留了 MAPBOX.JS

上述问题包含“Leaflet/Mapbox”和“controls missing”这两个词，这让我首先来到了这里。现在偶然发现这篇文章的任何人都可以很好地分享我的特殊问题以及 Leaflet 和 Mapbox 之间的 css 冲突。

【讨论】：