我如何将 OpenStreetMap 样式设置为 coronavirus.app

Question

我正在深入探索 OpenStreetMap、传单和地图图块的世界！
我想要的第一件事是用于数据可视化的漂亮地图。之前使用 google 地图的经验我可以为地图客户端设置样式，但是当我搜索 OpenStreetMap 样式时，它似乎不可能，必须在服务器端完成。

coranavirus.app这样的一方是怎么做到的呢？当我检查他们的网站时，我可以看到他们拉出正常的 OSM png 磁贴。那如何变成 light/dark 地图？

如有任何提示，我们将不胜感激！

Answer 1

如果您检查 .leaflet-tile-container，您可以看到他们正在使用 CSS 过滤器：

:root{
  /* ... */
  --mapfilter: grayscale(1);
  /* ... */
}

/* ... */
html body.dark{
  /* ... */
  --mapfilter: invert(1) grayscale(1);
  /* ... */
}

.map-layer, .leaflet-tile-container {
    filter: var(--mapfilter);
    -webkit-filter: var(--mapfilter);
}