如何将传单地图背景设置为白色？答案

【问题标题】：how can I set leaflet map background to be white?如何将传单地图背景设置为白色？
【发布时间】：2018-08-16 03:56:56
【问题描述】：

我目前正在使用传单来显示数据，总的来说，它工作得很好，但是我们的 PM 希望地图背景是白色而不是灰色。现在，整个地图都是灰色背景，我检查了文档，根本找不到关于如何使背景变白的解决方案。非常感谢您的建议。

我看到这是tileLayer造成的，

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + this.props.mapBoxToken, {
            //attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.light'
        })
        .addTo(this.map);

这里，如果我去掉tileLayer，那么背景颜色就可以看到了。我google了很多如何改变tilelayer颜色，但找不到解决办法，希望听到你的建议。

【问题讨论】：

标签： leaflet

【解决方案1】：

如果你查看 Leaflet 的CSS file carefully，你会发现这些规则：

.leaflet-container {
    background: #ddd;
    outline: 0;
}

这就是使地图的容器背景变灰的原因。只需创建另一个覆盖它的 CSS 规则。

例如如果您使用<div id='my-leaflet-map'></div> 作为地图容器，那么类似

#my-leaflet-map {
    background: pink;
}

【讨论】：

将背景更改为任何颜色都没有用，似乎地图已经有一些颜色层并且容器背景颜色根本不可见。
@user3006967 所以你的意思是你想改变你的瓷砖的“背景”，而不是地图 container 背景？你最好用一个小草图来解释你所说的“背景”是什么意思。
地图可以不包含切片图层，仅包含一些矢量图层（L.Marker、L.Polyline 等），或者，例如，带有透明 PNG 或 SVG 图像的 L.ImageOverlay。在这种情况下，更改地图背景很有用。
background: transparent 或 inherit 也是不错的选择。

【解决方案2】：

由mapbox的map.id控制，https://www.mapbox.com/api-documentation/#maps

【讨论】：