Javascript 更改openlayers贴图颜色（深色和浅色样式）

我喜欢将openlayers贴图与深色和浅色样式结合使用。那么如何更改贴图颜色或贴图样式？ 我的朋友（亲爱的莫特萨）找到了一个简单的方法，我在这篇文章中回答了这个问题。 我的html文件是：

.地图{
高度：400px；
宽度：50%；
}
OpenLayers示例
我的地图
var map=新ol.map({
目标：“地图”，
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
})
],
视图：新ol.view({
中心：Lonlat的其他项目（[37.41,8.82]），
缩放：4
})
});
//函数将灰度缩放应用于画布中的每个像素

openlayes在

中显示地图。而

将添加到带有openlayers库的

容器中。因此，添加以下代码以添加地图并更改其颜色：

var map = new ol.Map({
    target: 'map',//div with map id
    layers: [
          new ol.layer.Tile({
              source: new ol.source.OSM()
            })
        ],
    view: new ol.View({
        center: ol.proj.fromLonLat([61.2135, 28.2331]),
        zoom: 13 
      })
  });
//change map color
map.on('postcompose',function(e){
    document.querySelector('canvas').style.filter="invert(90%)";
  });

---

您还可以测试其他过滤器

ol ext库允许您在openlayers上设置过滤器。它使用画布合成操作来实现效果

---

请参阅联机代码示例：

，这将适用于OpenLayers 5。上面的代码链接OpenLayers 6，因此可以在层prerender和postrender事件上访问多个画布（每层一个）。可以使用globalCompositeOperation和筛选器