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

Question

我喜欢将 openlayers map 与深色和浅色 styles 一起使用。那么如何更改 map 颜色或 map 样式？ 我的朋友（Dear morteza）找到了我在这篇文章中回答的简单方法。 我的 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>

Answer 1

openlayes 在<canvas>显示地图。 并且<canvas>将被添加到带有 openlayers 库的<div>容器中。 因此，添加波纹管代码以添加地图并更改其颜色：

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

您还可以测试其他过滤器

Answer 2

ol-ext 库允许您在 openlayers 层上设置过滤器。 它使用画布合成操作来实现效果。

在线查看代码示例： https : //viglino.github.io/ol-ext/examples/filter/map.filter.colorize.html

Answer 3

const tile = new TileLayer({
  source: new OSM()
});
tile.on('prerender', (evt) => {
  // return
  if (evt.context) {
    const context = evt.context as CanvasRenderingContext2D;
    context.filter = 'grayscale(80%) invert(100%) ';
    context.globalCompositeOperation = 'source-over';
  }
});

tile.on('postrender', (evt) => {
  if (evt.context) {
    const context = evt.context as CanvasRenderingContext2D;
    context.filter = 'none';
  }
});

在tile图层渲染前设置canvas滤镜，渲染后重置为none，这样后面的图层不会受到任何影响，效果如下：

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

问题描述

3 个解决方案

解决方案1
3 2020-01-20 08:56:52

解决方案2
1 2020-01-20 19:33:56

解决方案3
0 2023-01-28 10:21:26

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

问题描述

3 个解决方案

解决方案1 3 2020-01-20 08:56:52

解决方案2 1 2020-01-20 19:33:56

解决方案3 0 2023-01-28 10:21:26

解决方案1
3 2020-01-20 08:56:52

解决方案2
1 2020-01-20 19:33:56

解决方案3
0 2023-01-28 10:21:26