Skip to content
On this page

ol-source-image-wms

Source for WMS servers providing single, untiled images.

Usage

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

    <ol-tile-layer :zIndex="1000">
      <ol-source-osm />
    </ol-tile-layer>

    <ol-image-layer :zIndex="1001">
      <ol-source-image-wms
        url="https://ahocevar.com/geoserver/wms"
        :extent="[-13884991, 2870341, -7455066, 6338219]"
        layers="topp:states"
        serverType="geoserver"
      />
    </ol-image-layer>
  </ol-map>
</template>
js
import { ref, reactive } from "vue";
export default {
  setup() {
    const zoom = ref(4);
    const rotation = ref(0);
    const center = ref([-10997148, 4569099]);

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

Properties

attributions

  • Type: string

Attributions

crossOrigin

  • Type: string
  • Default: ol-layer

The crossOrigin attribute for loaded images. Note that you must provide a crossOrigin value if you want to access pixel data with the Canvas renderer.

hidpi

  • Type: Boolean
  • Default: true

serverType

  • Type: string

The type of the remote WMS server: mapserver, geoserver or qgis. Only needed if hidpi is true.

imageLoadFunction

  • Type: Function

Optional function to load an image given a URL

imageSmoothing

  • Type: Boolean
  • Default: true

Enable image smoothing.

layers

  • Type: [String,Array]

styles

  • Type: [String,Array]

ratio

  • Type: number
  • Default: 1.5

Ratio. 1 means image requests are the size of the map viewport, 2 means twice the width and height of the map viewport, and so on. Must be 1 or higher.

resolutions

  • Type: Array<number>

Resolutions. If specified, requests will be made for these resolutions only.

url

  • Type: string

WMS service URL.