vue3-openlayers

Appearance

ol-tile-layer ​

ol-tile-layer can render images from sources that provide pre-rendered, tiled images in grids organized by zoom levels. It should be used together with tiled source components like ol-source-xyz, ol-source-wmts, ol-source-osm, ol-source-bingmaps

Usage ​

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

vue
<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"
        :styles="styleName"
      ></ol-source-wmts>
    </ol-tile-layer>
  </ol-map>
</template>

<script setup>
import { ref } from "vue";

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>',
);
</script>
<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"
        :styles="styleName"
      ></ol-source-wmts>
    </ol-tile-layer>
  </ol-map>
</template>

<script setup>
import { ref } from "vue";

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>',
);
</script>

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.