Openlayers 5 使地图变暗答案

【问题标题】：Openlayers 5 Darken the MapOpenlayers 5 使地图变暗
【发布时间】：2020-09-17 02:01:36
【问题描述】：

我想要一张像照片中一样的深色地图，以使其他图层内的其他功能更加可见。实现这一目标的最佳方法是什么？

  map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM({
          wrapX: false
        })
      }),
      trackLayer,
      circleMarkerLayer,
      missionLayer,
      planeLayer,
      vesselLayer
    ],
    target: 'map',
    controls: ol.control.defaults({
      attributionOptions: {
        collapsible: false
      },
      attribution: false
    }),
    loadTilesWhileAnimating: true,
    view: view
  });

【问题讨论】：

标签： javascript openlayers openlayers-5

【解决方案1】：

您可以查看ol-ext lib 以在图层上应用颜色过滤器。
在线查看示例：https://viglino.github.io/ol-ext/examples/filter/map.filter.colorize.html

【讨论】：

【解决方案2】：

可以在base layer的postrender事件中应用全局合成操作来应用灰度等效果（注意最新版Chrome有这个问题）。

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
<style>
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  .map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 80%;
  }
</style>
</head>
<body>
<div id="map" class="map"></div>
<table><tr>
<th>Gray</th><th>Intensity</th>
</tr><tr>
<td><input id="gray" type="range" min="0" max="100" step="1" value="50"></td>
<td><input id="intensity" type="range" min="0" max="255" step="1" value="128"></td>
</tr></table>
<script type="text/javascript">

var map = new ol.Map({
    layers : [ 
        new ol.layer.Tile({source : new ol.source.OSM()}),
    ],
    target : 'map',
    logo: false,
    controls: ol.control.defaults({ attributionOptions: { collapsible: false } }),
    view : new ol.View({
        center: ol.proj.fromLonLat([12.5, 55.7]),
        zoom: 7
    })
});

var intensityInput = document.getElementById('intensity');
var background = 255 - intensityInput.value;

intensityInput.onchange = function() {
    background = 255 - intensityInput.value;
    map.render();
};

var grayInput = document.getElementById('gray');
grayInput.onchange = function() {
    map.render();
};

map.getLayers().getArray()[0].on('postcompose', function (evt) {
    evt.context.globalCompositeOperation = 'color';
    evt.context.fillStyle = 'rgba(255,255,255,' + grayInput.value/100 + ')';
    evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
    evt.context.globalCompositeOperation = 'overlay';
    evt.context.fillStyle = 'rgb(' + [background,background,background].toString() + ')';
    evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
    evt.context.globalCompositeOperation = 'source-over';
});

</script>
</body>
</html>

【讨论】：

这不是我要找的，我想把地图变暗。
您可以使用许多不同的全局复合操作。试试evt.context.globalCompositeOperation = 'source-over'; evt.context.fillStyle = 'rgba(0, 0, 0,' + grayInput.value/100 + ')';
@Mike 除了标记之外还有什么方法可以对地图进行灰度化？