You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard
Loading...

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

Important notes:

  • This sample shows experimental functionality, please read the documentation carefully before using it in a product.
  • This sample targets expert developers familiar with WebGL and hardware-accelerated rendering.

This sample demonstrates how to render custom WebGL visuals by tile. It can be used as the starting point for complex visualizations where the developer has full control of the rendering process.

Tiled layer views are of primary importance when handling large datasets and/or datasets with a large extent; tiling schemes also naturally support wrap-around and require no special processing for features that cross the international date line.

This sample assumes familiarity with WebGL and custom WebGL layer views. Compared to the Custom WebGL layer view sample, it does not need to implement complex local origin manipulation code, because it relies on the tiling support exposed by the BaseLayerViewGL2D class.

Enabling tiling

Tiling is enabled for a layer view by creating a tileInfo on the parent layer.

var CustomLayer = Layer.createSubclass({
  tileInfo: TileInfo.create({ size: 512, spatialReference: { wkid: 3857 } }),

  createLayerView(view) {
    if (view.type === "2d") {
      return new CustomLayerView2D({
        view: view,
        layer: this
      });
    }
  }
});

In the custom layer view, the inherited BaseLayerViewGL2D.tiles array will, at any given time, contain the list of all the tiles required to cover the screen.

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.
  }
});

Additional visualization samples and resources

Sample search results

TitleSample
Loading...