OpenLayers Workshop（六）Raster Operations

Render elevation data 渲染高程数据

我们将要使用在PNG瓦片中编码的高程数据（前往the Mapbox post查看更多细节）。在本次练习中，你需要注册sign up for a Mapbox account并使用对瓦片的访问令牌。

我们想要在高程数据被渲染前对其进行操作，但是在一开始，我们将要把Terrain-RGB的瓦片加入到地图中来看看他们长什么样。首先创建一个含有Terrain-RGB URL和访问令牌的XYZ的数据源。

const elevation = new XYZSource({
  url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
  crossOrigin: 'anonymous'
});

接着创建一个使用高程数据源的瓦片图层，并将这个图层加入到map中（这个图层写在下面，图层的array中的元素依次从最底层开始渲染）：

new TileLayer({
  opacity: 0.8,
  source: elevation
})

现在地图的原始图层上就又蒙上了一层奇妙的颜色。Terrain-RGB瓦片的高程数据是以红绿蓝三个通道编码的，所以尽管这些数据不是纯粹的被直接渲染的，但是看上去很有意思。