更改 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