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

Question

我们使用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，控制工作正常。

Answer 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子目录，并将该文件放入其中。我的应用程序现在正在运行。

这是该文件的图片：

Answer 2

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

Answer 3

根据css文件，您需要在包含以下内容的css文件旁边加一个“map / images /”文件夹：

• 图标-4040.png
• icons-4040@2x.png

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

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

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

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

Answer 4

我遇到了类似的问题，导致“ 层控制”不可见（即使它们并非完全缺失）和 + / -< / strong>控制控件向左稍微对齐

在我的情况下，我使用的是CDN中的 MAPBOX.CSS ，这是由于与 LEAFLET.CSS

发生冲突

使用一个或另一个CSS文件即可解决此问题。 MAPBOX.CSS 似乎也影响了我的Marker Tooltip功能，因此我亲自使用了 LEAFLET.CSS 而只保留了MAPBOX.JS

以上问题包含“ 传单/地图框”和“ 缺少控件”这两个词，这些使我首先来到这里。如今，任何绊到这篇文章的人都可以很好地分享我的特定问题以及 Leaflet 和 Mapbox 之间的 css冲突。