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

Question

我目前正在使用传单来显示数据，总的来说，效果很好，但我们的 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，则可以看到背景颜色。我在谷歌上搜索了很多如何更改 tilelayer 颜色，但找不到解决方案，希望听到您的建议。

Answer 1

如果你仔细查看 Leaflet 的CSS 文件，你会发现这些规则：

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

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

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

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