Openlayers 5使地图变暗

问题描述

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

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

解决方法

您可以在基础层的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,' + grayInput.value/100 + ')';
    evt.context.fillRect(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,evt.context.canvas.height);
    evt.context.globalCompositeOperation = 'source-over';
});

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

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

javascript openlayers openlayers openlayers-5