ol-source-wmts ​

Layer source for tile data from WMTS servers.

Usage ​

Example below shows how to use ol-layer-tile component together with ol-source-wmts and with ol-source-osm.

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

    <ol-tile-layer>
      <ol-source-osm />
    </ol-tile-layer>

    <ol-tile-layer>
      <ol-source-wmts
        :attributions="attribution"
        :url="url"
        :matrixSet="matrixSet"
        :format="format"
        :layer="layerName"
        :style="styleName"
      ></ol-source-wmts>
    </ol-tile-layer>
  </ol-map>
</template>

import { ref } from "vue";
export default {
  setup() {
    const center = ref([-11158582, 4813697]);
    const zoom = ref(4);
    const rotation = ref(0);
    const url = ref("https://mrdata.usgs.gov/mapcache/wmts");
    const layerName = ref("sgmc2");
    const matrixSet = ref("GoogleMapsCompatible");
    const format = ref("image/png");
    const styleName = ref("default");
    const attribution = ref(
      'Tiles © <a href="https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>'
    );

    return {
      center,
      zoom,
      rotation,
      url,
      layerName,
      matrixSet,
      format,
      styleName,
      attribution,
    };
  },
};

Properties ​

attributions ​

• Type: string

Attributions.

cacheSize ​

• Type: number

Initial tile cache size. Will auto-grow to hold at least the number of tiles in the viewport.

crossOrigin ​

• Type: string
• Default: ol-layer

Initial tile cache size. Will auto-grow to hold at least the number of tiles in the viewport.

imageSmoothing ​

• Type: boolean
• Default: true

Enable image smoothing.

projection ​

• Type: [String, Object]
• Default: true

Projection. Default is the view projection.

reprojectionErrorThreshold ​

• Type: Number
• Default: 0.5

Maximum allowed reprojection error (in pixels). Higher values can increase reprojection performance, but decrease precision.

tilePixelRatio ​

• Type: Number
• Default: 1

The pixel ratio used by the tile service. For example, if the tile service advertizes 256px by 256px tiles but actually sends 512px by 512px images (for retina/hidpi devices) then tilePixelRatio should be set to 2.

format ​

• Type: String
• Default: image/jpeg

Image format. Only used when requestEncoding is 'KVP'.

version ​

• Type: String
• Default: 1.0.0

WMTS version.

matrixSet ​

• Type: String

Matrix set.

dimensions ​

• Type: Object

Additional "dimensions" for tile requests. This is an object with properties named like the advertised WMTS dimensions.

url ​

• Type: string

A URL for the service. For the RESTful request encoding, this is a URL template. For KVP encoding, it is normal URL. A {?-?} template pattern, for example subdomain{a-f}.domain.com, may be used instead of defining each one separately in the urls option.

urls ​

• Type: Array.<string>

An array of URLs. Requests will be distributed among the URLs in this array.

wrapX ​

• Type: boolean
• Default: false

Whether to wrap the world horizontally.

transition ​

• Type: number

Duration of the opacity transition for rendering. To disable the opacity transition, pass transition: 0.

layer ​

• Type: string

Layer name as advertised in the WMTS capabilities.

style ​

• Type: string

Style name as advertised in the WMTS capabilities.