时间戳

首页 > 解决方案 > 如何反转雄蕊图中的调色剂层？

reactjs - 如何反转雄蕊图中的调色剂层？

问题描述

我正在尝试在这里反转碳粉层，并且可能会为其添加颜色，您可以在 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
   }
 })
}
/>

标签： reactjsgisopenlayersrasterstamen-maps

解决方案

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

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

推荐阅读