我如何像冠状病毒一样设置 OpenStreetMap 的样式

Question

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

那么像coranavirus.app 这样的一方是如何做到的呢？当我检查他们的网站时，我可以看到他们拉出正常的 OSM png 瓷砖。它是如何变成明暗图的？

任何提示将不胜感激！

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);
}