CSS Filter色相转换问题：地图瓦片图层颜色匹配需求实现

需求与现状 #

• 需求指定的图层颜色：
• 当前实现的瓦片初始颜色：

已尝试的无效方法 #

• 使用filter: invert(100%)转换后颜色：，与目标颜色差距明显
• 尝试filter: hue-rotate(100deg)，仍无法匹配目标色调

当前代码示例 #

HTML #

<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>

CSS #

body { margin: 0; }
html, body, #map { height: 100% }
.tileLayer { filter: invert(100%); }

JavaScript #

var map = L.map('map', {
  layers: [
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      'attribution': 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
      className: 'tileLayer',
    })
  ],
  center: [10, 0],
  zoom: 14
});

var canvasRenderer = L.canvas();

function createWavingCircle(latlng, color, fromRadius, toRadius) {
  var circle = L.circle(latlng, {
    radius: fromRadius,
    color,
    renderer: canvasRenderer
  }).addTo(map);
  var nextCircle;
  var interval = setInterval(() => {
    var radius = circle.getRadius() + 1;
    if (radius <= toRadius) {
      circle.setRadius(radius);
      if (Math.round((radius / toRadius) * 100) >= 30 && !nextCircle) {
        nextCircle = createWavingCircle(latlng, color, fromRadius, toRadius);
      }
    } else {
      if (nextCircle && nextCircle.getRadius() >= toRadius) {
        circle.remove();
        clearInterval(interval);
      }
    }
  }, 1)
  return circle;
}

createWavingCircle(map.getCenter(), 'red', 10, 400);

解决方案 #

单一滤镜无法精准匹配目标色调，需要组合多个CSS滤镜调整色相、饱和度和亮度，以下是适配目标蓝绿色调的CSS代码：

.tileLayer {
  filter: invert(90%) hue-rotate(180deg) saturate(120%) brightness(95%);
}

参数说明 #

• invert(90%)：反转大部分颜色，贴合目标底色基调
• hue-rotate(180deg)：整体偏移色相，将反转后的色调拉至蓝绿区间
• saturate(120%)：提升饱和度，匹配目标颜色的鲜艳度
• brightness(95%)：微调亮度，避免画面过曝或偏暗

如果需要更极致的匹配，可以使用SVG滤镜配合filter: url()实现精准颜色映射，但上述组合已能大幅接近需求效果。

内容的提问来源于stack exchange，提问作者Redamancy-qian