Module: ol/source/VectorTile

ol/source/VectorTile


Classes

VectorTile

Type Definitions

Options{Object}

Properties:
Name Type Argument Default Description
attributions module:ol/source/Source~AttributionLike <optional>

Attributions.
attributionsCollapsible boolean <optional>
 true

Attributions are collapsible.
cacheSize number <optional>

Initial tile cache size. Will auto-grow to hold at least twice the number of tiles in the viewport.
extent module:ol/extent~Extent <optional>

Extent.
format module:ol/format/Feature~FeatureFormat <optional>

Feature format for tiles. Used and required by the default.
overlaps boolean <optional>
 true

This source may have overlapping geometries. Setting this to false (e.g. for sources with polygons that represent administrative boundaries or TopoJSON sources) allows the renderer to optimise fill and stroke operations.
projection module:ol/proj~ProjectionLike <optional>
 'EPSG:3857'

Projection of the tile grid.
state module:ol/source/State <optional>

Source state.
tileClass Class.<module:ol/VectorTile~VectorTile> <optional>

Class used to instantiate image tiles. Default is module:ol/VectorTile.
maxZoom number <optional>
 22

Optional max zoom level. Not used if tileGrid is provided.
minZoom number <optional>

Optional min zoom level. Not used if tileGrid is provided.
tileSize number | module:ol/size~Size <optional>
 512

Optional tile size. Not used if tileGrid is provided.
maxResolution number <optional>

Optional tile grid resolution at level zero. Not used if tileGrid is provided.
tileGrid module:ol/tilegrid/TileGrid~TileGrid <optional>

Tile grid.
tileLoadFunction module:ol/Tile~LoadFunction <optional>

Optional function to load a tile given a URL. Could look like this for pbf tiles:

function(tile, url) {
  tile.setLoader(function(extent, resolution, projection) {
    fetch(url).then(function(response) {
      response.arrayBuffer().then(function(data) {
        const format = tile.getFormat() // ol/format/MVT configured as source format
        const features = format.readFeatures(data, {
          extent: extent,
          featureProjection: projection
        });
        tile.setFeatures(features);
      });
    });
  });
}

If you do not need extent, resolution and projection to get the features for a tile (e.g. for GeoJSON tiles), your tileLoadFunction does not need a setLoader() call. Only make sure to call setFeatures() on the tile:

const format = new GeoJSON({featureProjection: map.getView().getProjection()});
async function tileLoadFunction(tile, url) {
  const response = await fetch(url);
  const data = await response.json();
  tile.setFeatures(format.readFeatures(data));
}
tileUrlFunction module:ol/Tile~UrlFunction <optional>

Optional function to get tile URL given a tile coordinate and the projection.
url string <optional>

URL template. Must include {x}, {y} or {-y}, and {z} placeholders. A {?-?} template pattern, for example subdomain{a-f}.domain.com, may be used instead of defining each one separately in the urls option.
transition number <optional>

A duration for tile opacity transitions in milliseconds. A duration of 0 disables the opacity transition.
urls Array.<string> <optional>

An array of URL templates.
wrapX boolean <optional>
 true

Whether to wrap the world horizontally. When set to false, only one world will be rendered. When set to true, tiles will be wrapped horizontally to render multiple worlds.
zDirection number | module:ol/array~NearestDirectionFunction <optional>
 1

Choose whether to use tiles with a higher or lower zoom level when between integer zoom levels. See module:ol/tilegrid/TileGrid~TileGrid#getZForResolution.