【OpenLayers】加载 GeoServer 的 WMTS 或 TMS

网上能查到的都太旧了，2020年了，正确的做法应该是：

WMTS

              import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS';
              import WMTSCapabilities from 'ol/format/WMTSCapabilities';

              const namespace='xxx';
              const layername='xxx';
              var parser = new WMTSCapabilities();
              fetch("/geoserver/gwc/service/wmts?REQUEST=GetCapabilities")
                .then(response => response.text())
                .then(text => {
                  var result = parser.read(text);
                  var options = optionsFromCapabilities(result, {
                    layer: `${namespace}:${layername}`,
                    matrixSet: "EPSG:900913"
                  });
                  const lsadf = new TileLayer({
                    name: layername,
                    source: new WMTS(options)
                  });
                  map.addLayer(lsadf);
                });

TMS

              
              const namespace='xxx';
              const layername='xxx';
              const url = `/geoserver/gwc/service/tms/1.0.0/${namespace}:${layername}@EPSG:900913@png/{z}/{x}/{-y}.png`;
              //从/geoserver/gwc/service/tms/1.0.0可获取该地址
              const imgL = new TileLayer({
                name: layername,
                extent: [
                  12683762.740587706,
                  2634418.077883248,
                  12686202.690741098,
                  2635902.322841516
                ], //从geoserver- Tile Caching - Tile Layers - 编辑图层 - Tile Caching 获取的
                //用extent只有在该范围去获取瓦片,防止404错误
                source: new XYZ({
                  url: url
                  // 如果url获取的图片坐标是4326 ,则在此方法里转换坐标为3857
                  // tileUrlFunction: function(tileCoord) {}
                })
              });