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

Question

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

moh*_*del 4 javascript dictionary openlayers

我喜欢使用带有深色和浅色样式的 openlayers 贴图。那么如何更改地图颜色或地图样式呢？我的朋友（亲爱的莫特扎）找到了我在这篇文章中回答的简单方法。我的html文件是：

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 50%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });

	  // function applies greyscale to every pixel in canvas
    </script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

moh*_*del 5

openlayes 显示中的地图<canvas>。并将<canvas>添加到<div>带有 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%)";
  });

Run Code Online (Sandbox Code Playgroud)

您还可以测试其他过滤器

这适用于 OpenLayers 5。上面的代码链接了 OpenLayers 6，因此可以在层预渲染和后渲染事件上访问多个画布（每层一个）。可以使用 globalCompositeOperation 以及过滤器 https://codesandbox.io/s/globalcompositeoperation-fktwf (5认同)

归档时间：	6 年，1 月前
查看次数：	8488 次
最近记录：	3 年，1 月前