Leaflet.js可以说是最好的客户端地图渲染库。虽然有很多OpenStreet Map tile providers,但 free basemap层都没有一个黑色主题的地图( tiles )。
通过在特定的传单类上应用css filter属性,我们可以拥有一个“ hacky”的深色地图。
.leaflet-layer,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out,
.leaflet-control-attribution {
filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}
-
invert(100%)
完全倒转颜色,从本质上添加了深色背景。 -
hue-rotate(180deg)
是可选的,但在地图上转换了主要的蓝色(大道路)为红色。