如何反转雄蕊图中的调色剂层？答案

【问题标题】：How to invert the Toner layer in a Stamen map?如何反转雄蕊图中的调色剂层？
【发布时间】：2020-08-27 17:27:42
【问题描述】：

我正在尝试在此处反转碳粉层，并且可能会为其添加色调，您可以在 Map Stack 上看到：http://mapstack.stamen.com/edit.html#toner[invert=1,tint=$1e88e5@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
   }
 })
}
/>

【问题讨论】：

标签： reactjs gis openlayers raster stamen-maps

【解决方案1】：

在 OpenLayers 6 中，类似于此示例中的灰度 OSM https://openlayers.org/en/main/examples/semi-transparent-layer.html，您可以为图层指定一个类名并使用反转 css 过滤器https://codesandbox.io/s/gifted-newton-mk9th?file=/main.js

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

【讨论】：

非常感谢没想到可以通过css选择器改