如何反转雄蕊地图中的碳粉层？

编程问答 2022-08-14

问题描述

我正在尝试反转此处的碳粉层，并可能向其添加一种色彩，就像您在地图堆栈上看到的那样：http://mapstack.stamen.com/edit.html#toner[invert=1,tint=$1e88e5@100]/11/37.7547/-122.3513

尽管如此，我不确定如何将该URL用作参数，因为我看不到它反映在地图实例上。

OpenLayers中的API没有有关如何操纵雄蕊图的信息。

代码 

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

解决方法

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

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

的globalCompositeOperation
gisopenlayersrasterreactjsreactjs