javascript - 我如何像冠状病毒一样设置 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);
}