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

Posted 2023-05-06

【中文标题】我如何像冠状病毒一样设置 OpenStreetMap 的样式

【英文标题】：How do i style OpenStreetMap like coronavirus.app

【发布时间】：2020-07-09 07:39:42

【问题描述】：

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

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

任何提示将不胜感激！

【参考方案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);

【讨论】：

使用 css 对 png 进行灰度缩放。我非常专注于瓷砖供应商：D 谢谢！