Skip to content
On this page

ol-webgl-tile-layer

This example uses WebGL to raster tiles on a map.

Usage

html
<template>
  <ol-map
    :loadTilesWhileAnimating="true"
    :loadTilesWhileInteracting="true"
    style="height:400px"
  >
    <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" />

    <ol-webgl-tile-layer>
      <ol-source-osm />
    </ol-webgl-tile-layer>
  </ol-map>
</template>
js
import { ref } from "vue";
export default {
  setup() {
    const center = ref([-90, 50]);
    const zoom = ref(2);
    const rotation = ref(0);

    return {
      center,
      zoom,
      rotation,
    };
  },
};

Properties

className

  • Type: string
  • Default: ol-layer

A CSS class name to set to the layer element.

opacity

  • Type: number
  • Default: 1

Opacity (0, 1).

visible

  • Type: boolean
  • Default: true

Visibility.

extent

  • Type: Array

The bounding extent for layer rendering. The layer will not be rendered outside of this extent.

zIndex

  • Type: number

The z-index for layer rendering. At rendering time, the layers will be ordered, first by Z-index and then by position.

minResolution

  • Type: number

The minimum resolution (inclusive) at which this layer will be visible.

maxResolution

  • Type: number

The maximum resolution (exclusive) below which this layer will be visible.

minZoom

  • Type: number

The minimum view zoom level (exclusive) above which this layer will be visible.

maxZoom

  • Type: number

The maximum view zoom level (inclusive) at which this layer will be visible.

preload

  • Type: number
  • Default: 0 Low-resolution tiles up to preload level will be load.