Openlayers示例12 | Change Tile Layer Style

Change Tile Layer Style

当你想根据应用程序状态的一些变化来改变 WebGL 瓦片层的样式时，你应该使用该layer.updateStyleVariables()方法。即使在每个渲染帧上更改样式变量，也可以有效地渲染图层。在需要完全替换图层样式的情况下，可以调用该layer.setStyle()方法。不应调用此方法来响应频繁的用户事件（例如鼠标移动、拖动滑块等）。

<!DOCTYPE html>
<html lang="zn">

<head>
  <meta charset="UTF-8">
  <!-- 引入OpenLayers CSS样式 -->
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css">
  <!-- 引入OpenLayers JS库 -->
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
  <!-- css代码 -->
  <style>
    .map {
      width: 100%;
      height: 500px;
    }
  </style>
  <title>CartoDB source example</title>
</head>
<body>
  <div id="map" class="map"></div>
  Set the layer style
  <select id="style">
    <option value="trueColor">True Color</option>
    <option value="falseColor">False Color</option>
    <option value="ndvi">NDVI</option>
  </select>
</body>
<script>
  const max = 3000;
  function normalize(value) {
    return ['/', value, max];
  }

  const red = normalize(['band', 1]);
  const green = normalize(['band', 2]);
  const blue = normalize(['band', 3]);
  const nir = normalize(['band', 4]);

  const trueColor = {
    color: ['array', red, green, blue, 1],
    gamma: 1.1,
  };

  const falseColor = {
    color: ['array', nir, red, green, 1],
    gamma: 1.1,
  };

  const ndvi = {
    color: [
      'interpolate',
      ['linear'],
      ['/', ['-', nir, red], ['+', nir, red]],
      // color ramp for NDVI values, ranging from -1 to 1
      -0.2,
      [191, 191, 191],
      -0.1,
      [219, 219, 219],
      0,
      [255, 255, 224],
      0.025,
      [255, 250, 204],
      0.05,
      [237, 232, 181],
      0.075,
      [222, 217, 156],
      0.1,
      [204, 199, 130],
      0.125,
      [189, 184, 107],
      0.15,
      [176, 194, 97],
      0.175,
      [163, 204, 89],
      0.2,
      [145, 191, 82],
      0.25,
      [128, 179, 71],
      0.3,
      [112, 163, 64],
      0.35,
      [97, 150, 54],
      0.4,
      [79, 138, 46],
      0.45,
      [64, 125, 36],
      0.5,
      [48, 110, 28],
      0.55,
      [33, 97, 18],
      0.6,
      [15, 84, 10],
      0.65,
      [0, 69, 0],
    ],
  };

  const layer = new ol.layer.WebGLTile({
    style: trueColor,
    source: new ol.source.GeoTIFF({
      normalize: false,
      sources: [
        {
          url: 'https://s2downloads.eox.at/demo/EOxCloudless/2020/rgbnir/s2cloudless2020-16bits_sinlge-file_z0-4.tif',
        },
      ],
    }),
  });

  const map = new ol.Map({
    target: 'map',
    layers: [layer],
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [0, 0],
      zoom: 2,
      maxZoom: 6,
    }),
  });

  const styles = { trueColor, falseColor, ndvi };
  const styleSelector = document.getElementById('style');

  function update() {
    const style = styles[styleSelector.value];
    layer.setStyle(style);
  }
  styleSelector.addEventListener('change', update);
</script>
</html>