Openlayers 5 使地图变暗

Question

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

  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
  });

Answer 1

你可以在base layer的postrender事件中应用global composite操作来应用灰度和其他效果（注意Chrome的最新版本有这个问题）。

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/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.3.0/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>

Answer 2

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

Openlayers 5 使地图变暗

Openlayers 5 Darken the Map

javascript

openlayers

openlayers-5