传单地图 - 黑暗主题
#css #网络开发人员 #map #leaflet

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)是可选的,但在地图上转换了主要的蓝色(大道路)为红色。