Canvas fillstyle 使背景更黑

Question

这是一个codepen of a simple OpenLayers map with an example overlay. My goal is to have essentially a dark mode OSM layer. I am currently using but am not quite there to match MapBox's contrast。我希望 canvas 向导可以帮助我设计地图的样式 canvas 以增加对比度但保留地形标记。

编辑：这仅适用于 OpenLayers 3，我目前正在尝试在 OpenLayers 6 中获得相同的结果

Answer 1

我已经通过在底图 (OSM) postcompose 事件上使用以下函数获得了可以接受的结果：

map.getLayers().getArray()[0].on('postcompose', function (evt) {
    evt.context.globalCompositeOperation = 'color';
    evt.context.fillStyle = 'rgba(0,0,0,' + 1.0 + ')';
    evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
    evt.context.globalCompositeOperation = 'overlay';
    evt.context.fillStyle = 'rgb(' + [200,200,200].toString() + ')';
    evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
    evt.context.globalCompositeOperation = 'source-over';
    document.querySelector('canvas').style.filter="invert(99%)";
});

这会导致深色 OSM 底图。我仍然希望 `canvas 向导可以提高我在性能、简洁性和清晰度方面的答案，但这里有一个示例，说明生成的地图与示例层的外观。

Canvas fillstyle 使背景更黑

Canvas fillstyle to make background blacker

canvas

openlayers

html5-canvas

编辑：这仅适用于 OpenLayers 3，我目前正在尝试在 OpenLayers 6 中获得相同的结果