operationType: 'image'
栅格源,使用
ImageData
每个输入源的对象调用操作。还使用通用
data
对象调用操作。在此示例中,来自上述输入的太阳高程和方位角数据将分配给此
data
对象,并在着色操作中访问。着色操作返回一个
ImageData
对象数组。当光栅源由图像层使用时,
ImageData
管道中最后一个操作返回的第一个 对象用于渲染。此示例使用a
ol/source/Raster
生成基于其他源的数据。栅格源接受任意数量的输入源(基于图块或图像),并对输入数据运行操作管道。最终操作的返回用作输出源的数据。
<!DOCTYPE html><html>
<head>
<title>Shaded Relief</title>
<link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<style>
table.controls td {
text-align: center;
padding: 2px 5px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<table class="controls">
<tr>
<td>vertical exaggeration: <span id="vertOut"></span>x</td>
<td><input id="vert" type="range" min="1" max="5" value="1"/></td>
</tr>
<tr>
<td>sun elevation: <span id="sunElOut"></span>°</td>
<td><input id="sunEl" type="range" min="0" max="90" value="45"/></td>
</tr>
<tr>
<td>sun azimuth: <span id="sunAzOut"></span>°</td>
<td><input id="sunAz" type="range" min="0" max="360" value="45"/></td>
</tr>
</table>
<script>
import