fetch WMTS only once and add an example

examples/App.tsx

@@ -29,6 +29,7 @@ const examples = {
     add_delete: {title: 'Add & Delete', file: 'Add-Delete'},
     draw: {title: 'Draw & Modify', file: 'Draw'},
     geolocation: {title: 'Geolocation', file: 'Geolocation'},
+    wmts: {title: 'WMTS', file: 'WMTS'},
     vectortiles: {title: 'Vector tiles', file: 'VectorTiles', ol8: true},
     mbtilesRaster: {title: 'Raster MBTiles', file: 'RasterMBTiles'},
     mbtilesVector: {title: 'Vector MBTiles', file: 'VectorMBTiles'},

examples/WMTS.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {fromLonLat} from 'ol/proj';
+import {register} from 'ol/proj/proj4';
+import proj4 from 'proj4';
+import 'ol/ol.css';
+
+import {RLayerWMTS, RMap} from 'rlayers';
+
+proj4.defs(
+    'EPSG:2056',
+    '+proj=somerc +lat_0=46.9524055555556 +lon_0=7.43958333333333 +k_0=1 ' +
+        '+x_0=2600000 +y_0=1200000 +ellps=bessel +towgs84=674.374,15.056,405.346,0,0,0,0 +units=m +no_defs +type=crs'
+);
+register(proj4);
+
+const Bern = fromLonLat([7.4475, 46.948056], 'EPSG:2056');
+export default function WMTS(): JSX.Element {
+    const [info, setInfo] = React.useState('...retrieving capabilities..');
+    const [format, setFormat] = React.useState<string | null>(null);
+    return (
+        <>
+            <RMap
+                width={'100%'}
+                height={'60vh'}
+                projection='EPSG:2056'
+                initial={{center: Bern, zoom: 12}}
+            >
+                <RLayerWMTS
+                    zIndex={5}
+                    projection='EPSG:2056'
+                    onCapabilities={function (opt) {
+                        setInfo('Map is ready, format is');
+                        setFormat(opt.format);
+                    }}
+                    url='https://wmts.geo.admin.ch/EPSG/2056/1.0.0/WMTSCapabilities.xml'
+                    layer='ch.swisstopo.pixelkarte-farbe'
+                />
+            </RMap>
+            <div className='border round my-1 p-1'>
+                {info}
+                {format && <em className='ms-1'>{format}</em>}
+            </div>
+        </>
+    );
+}

src/layer/RLayerWMTS.tsx

@@ -31,14 +31,14 @@ export interface RLayerWMTSProps extends RLayerRasterProps {
 export default class RLayerWMTS extends RLayerRaster<RLayerWMTSProps> {
     ol: LayerTile<SourceWMTS>;
     source: SourceWMTS;
+    loading: Promise<SourceWMTS> | null;
     parser: WMTSCapabilities;
     options: Options;
 
     constructor(props: Readonly<RLayerWMTSProps>, context?: React.Context<RContextType>) {
         super(props, context);
         this.ol = new LayerTile({source: this.source});
         this.parser = new WMTSCapabilities();
-        this.createSource();
     }
 
     protected createSource(): Promise<SourceWMTS> {