对自定义 WebGL 图层视图的切片支持

尝试一下在线预览

重点注意:

  • 此示例显示实验功能,请在产品中使用之前仔细阅读文档。
  • 此示例面向熟悉 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.
  }
});

其他可视化示例和资源

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.