如何反转 Stamen 贴图中的墨粉层？

Question

我正在尝试在这里反转碳粉层，并且可能会添加一种颜色，就像您在 Map Stack 上看到的那样：http://mapstack.stamen.com/edit.html#toner[invert=1,tint=e88e5@100]/11/37.7547/-122.3513

不过，我不确定如何将 url 用作参数，因为我没有看到它反映在地图实例上。

OpenLayers 中的 API 没有关于如何操作 Stamen 地图的信息。

代码

<TileLayer
id="nightmode"
title="Night Mode"
source={
  new Stamen({
     layer: 'toner',
     params: {
     layers: "",
     format: "image/png",
     tiled: true
   }
 })
}
/>

Answer 1

在OpenLayers 6中类似于本例中的灰度OSM https://openlayers.org/en/main/examples/semi-transparent-layer.html you could specify a className for the layer and use an invert css filter https://codesandbox.io/s/gifted-newton-mk9th?file=/main.js

另一种方法是使用类似于 https://codesandbox.io/s/globalcompositeoperation-fktwf

的 globalCompositeOperation

如何反转 Stamen 贴图中的墨粉层？

How to invert the Toner layer in a Stamen map?

gis

raster

openlayers

stamen-maps

reactjs