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瓦片的高程数据是以红绿蓝三个通道编码的,所以尽管这些数据不是纯粹的被直接渲染的,但是看上去很有意思。