我使用平铺图层构建了一个地图页面，但需求中指定的图层颜色是下图中的颜色：

实现层的初始颜色现在如图所示：

使用以下代码转换颜色：

.tileLayer{
  filter: invert(100%);
}

如下所示：

离要求的颜色有点远。

我尝试了以下代码

filter: hue-rotate(100deg);

仍然不能满足所需的颜色。我想知道是否有办法实现需求中的色调偏移。使用滤镜或其他方法就可以了。我希望你能提供一个解决方案的例子。

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

body {
  margin: 0;
}

html,
body,
#map {
  height: 100%
}

.tileLayer {
  filter: invert(100%);
}

<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>

例子https://plnkr.co/edit/2k8mdrGDLhOQc93L?preview