ol7源码学习之Layer

1、BaseVectorLayer 

参数：

Name	Type	Description
className	string (defaults to 'ol-layer')	A CSS class name to set to the layer element.
opacity	number (defaults to 1)	Opacity (0, 1).
visible	boolean (defaults to true)	Visibility.
extent	Extent | undefined	The bounding extent for layer rendering. The layer will not be rendered outside of this extent.
zIndex	number | undefined	The z-index for layer rendering. At rendering time, the layers will be ordered, first by Z-index and then by position. When undefined, a zIndex of 0 is assumed for layers that are added to the map's layers collection, or Infinity when the layer's setMap() method was used.
minResolution	number | undefined	The minimum resolution (inclusive) at which this layer will be visible.
maxResolution	number | undefined	The maximum resolution (exclusive) below which this layer will be visible.
minZoom	number | undefined	The minimum view zoom level (exclusive) above which this layer will be visible.
maxZoom	number | undefined	The maximum view zoom level (inclusive) at which this layer will be visible.
renderOrder	OrderFunction | undefined	Render order. Function to be used when sorting features before rendering. By default features are drawn in the order that they are created. Use null to avoid the sort, but get an undefined draw order.
renderBuffer	number (defaults to 100)	The buffer in pixels around the viewport extent used by the renderer when getting features from the vector source for the rendering or hit-detection. Recommended value: the size of the largest symbol, line width or label.
source	VectorSource | VectorTile | undefined	Source.
map	Map | undefined	Sets the layer as overlay on a map. The map will not manage this layer in its layers collection, and the layer will be rendered on top. This is useful for temporary layers. The standard way to add a layer to a map and have it managed by the map is to use map.addLayer().
declutter	boolean (defaults to false)	Declutter images and text. Decluttering is applied to all image and text styles of all Vector and VectorTile layers that have set this to true. The priority is defined by the z-index of the layer, the zIndex of the style and the render order of features. Higher z-index means higher priority. Within the same z-index, a feature rendered before another has higher priority. As an optimization decluttered features from layers with the same className are rendered above the fill and stroke styles of all of those layers regardless of z-index. To opt out of this behavior and place declutterd features with their own layer configure the layer with a className other than ol-layer.
style	StyleLike | FlatStyleLike | null | undefined	Layer style. When set to null, only features that have their own style will be rendered. See Style for the default style which will be used if this is not set.
background	BackgroundColor | undefined	Background color for the layer. If not specified, no background will be rendered.
updateWhileAnimating	boolean (defaults to false)	When set to true, feature batches will be recreated during animations. This means that no vectors will be shown clipped, but the setting will have a performance impact for large amounts of vector data. When set to false, batches will be recreated when no animation is active.
updateWhileInteracting	boolean (defaults to false)	When set to true, feature batches will be recreated during interactions. See also updateWhileAnimating.
properties	Object.<string, *> | undefined	Arbitrary observable properties. Can be accessed with #get() and #set().

方法：

setStyle(style)                                                                                           Set the style for features. 

更改图层样式：

Change Tile Layer Style (openlayers.org)

import GeoTIFF from 'ol/source/GeoTIFF';
import Map from 'ol/Map';
import TileLayer from 'ol/layer/WebGLTile';
import View from 'ol/View';

const max = 3000;
//瓦片数值标准化
function normalize(value) {
  //返回(value/max)
  return ['/', value, max];
}
//['band', *]返回tile数据源第*波段的像素值
const red = normalize(['band', 1]);
const green = normalize(['band', 2]);
const blue = normalize(['band', 3]);
const nir = normalize(['band', 4]);

//style对象
const trueColor = {
  //生成一个color数值数组
  color: ['array', red, green, blue, 1],
  gamma: 1.1,
};

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

const ndvi = {
  //-0.2~0.65线性插值
  //NDVI计算表达式
  //各插值中点（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 TileLayer({
  //默认style
  style: trueColor,
  source: new GeoTIFF({
    normalize: false,
    sources: [
      {
        url: 'https://s2downloads.eox.at/demo/EOxCloudless/2020/rgbnir/s2cloudless2020-16bits_sinlge-file_z0-4.tif',
      },
    ],
  }),
});

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

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

function update() {
  const style = styles[styleSelector.value];
  //改变style
  layer.setStyle(style);
}
styleSelector.addEventListener('change', update);

[, , ...]是expressions表达式 

VectorLayer：