尝试一下在线预览重点注意:
- 此示例显示实验功能,请在产品中使用之前仔细阅读文档。
- 此示例面向熟悉 WebGL 和硬件加速渲染的专家开发人员。
此示例演示如何按切片呈现自定义 WebGL 视觉效果。它可以用作开发人员完全控制渲染过程的复杂可视化的起点。
在处理大型数据集和/或大范围数据集时,平铺层视图至关重要;平铺方案也自然支持环绕,并且不需要对跨越国际日期变更线的特征进行特殊处理。
此示例假定您熟悉 WebGL 和自定义 WebGL 层视图。与自定义 WebGL 图层视图示例相比,它不需要实现复杂的本地原点操作代码,因为它依赖于 BaseLayerViewGL2D 类公开的平铺支持。
启用切片
通过在父图层上创建 tileInfo
为图层视图启用切片。
1
2
3
4
5
6
7
8
9
10
11
12
const CustomLayer = Layer.createSubclass({
tileInfo: TileInfo.create({ size: 512, spatialReference: { wkid: 3857 } }),
createLayerView(view) {
if (view.type === "2d") {
return new CustomLayerView2D({
view: view,
layer: this
});
}
}
});
在自定义层视图中,继承的 BaseLayerViewGL2D.tiles
数组将在任何给定时间包含覆盖屏幕所需的所有切片的列表。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const CustomLayerView2D = BaseLayerViewGL2D.createSubclass({
...
render(renderParameters) {
...
for (let i = 0; i < this.tiles.length; i++) {
// Retrieve the current tile and its associated texture.
const tile = this.tiles[i];
...
// Draw the tile.
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
}
},
...
tilesChanged() {
// Respond to a change in the tile screen coverage, for
// instance by fetching the required data from a server.
}
});
其他可视化示例和资源