WMS and WMTS services

Quick answer

This tutorial connects OGC services to OpenLayers and contrasts WMS rendered by extent with WMTS fetched by tile matrix. It configures ol.source.TileWMS and ol.source.ImageWMS with LAYERS, VERSION, FORMAT and TRANSPARENT, then builds ol.source.WMTS with a custom ol.tilegrid.WMTS, matrixIds and requestEncoding REST. It also covers CORS tainting and a symptom-driven troubleshooting table. Readers can integrate internal map services and diagnose blank or shifted output.

Last verified 2026-11-03 · OpenLayers 10.3.1 · Cite this page

Key points

Set TRANSPARENT true and FORMAT image/png when overlaying a WMS thematic layer.
Pin VERSION to 1.1.1 when a 1.3.0 service flips the EPSG:4326 axis order.
Match matrixIds exactly to the TileMatrix identifiers in GetCapabilities.

Example

var wmsLayer = new ol.layer.Tile({
  source: new ol.source.TileWMS({
    url: 'https://demo.mapserver.org/cgi-bin/wms',
    params: {
      'LAYERS': 'bluemarble',   // 图层名，多个用逗号分隔
      'VERSION': '1.1.1'
    },
    serverType: 'mapserver',
    crossOrigin: 'anonymous'
  })
});

var imageLayer = new ol.layer.Image({
  source: new ol.source.ImageWMS({
    url: 'https://example.gov.cn/geoserver/plan/wms',
    params: { 'LAYERS': 'plan:parcels', 'VERSION': '1.1.1' },
    ratio: 1.1   // 多取 10% 范围，减弱拖动时的边缘空白
  })
});

Notes

Tiles render but export fails when crossOrigin is missing or the server omits CORS headers.
TileWMS seams appear when the server ignores TILED and renders each tile independently.

Runnable examples Chinese original All Tutorials

English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.

Cite this page

Atlaslog (2026). WMS and WMTS services. https://www.jingweizhi.com/en/openlayers/tutorials/wms-wmts.html (accessed 2026-11-03).