Use wms

src/client/src/components/basemapSelector/Basemap.ts

@@ -1,9 +1,10 @@
 import LayerGroup from "ol/layer/Group";
 import TileLayer from "ol/layer/Tile";
+import TileWMS from "ol/source/TileWMS";
 import XYZ from "ol/source/XYZ";
 
 export interface Basemap {
   previewImg: string;
   shortName: string;
-  layer: TileLayer<XYZ> | LayerGroup;
+  layer: TileLayer<TileWMS> | TileLayer<XYZ> | LayerGroup;
 }

src/client/src/components/basemapSelector/basemaps.ts

@@ -6,15 +6,15 @@ import WMTSTileGrid from "ol/tilegrid/WMTS";
 import XYZ from "ol/source/XYZ";
 import { get as getProjection, ProjectionLike } from "ol/proj";
 import { Map } from "ol";
+import TileWMS from "ol/source/TileWMS";
+import TileGrid from "ol/tilegrid/TileGrid";
 
 export const swissExtent: number[] = [2420000, 1030000, 2900000, 1350000];
-
 const projection: ProjectionLike = getProjection("EPSG:2056") as ProjectionLike;
 const resolutions: number[] = [
   4000, 3750, 3500, 3250, 3000, 2750, 2500, 2250, 2000, 1750, 1500, 1250, 1000, 750, 650, 500, 250, 100, 50, 20, 10, 5,
   2.5, 2, 1.5, 1, 0.5, 0.25, 0.1,
 ];
-
 const matrixSet = "2056";
 const requestEncoding = "REST";
 const style = "default";
@@ -26,12 +26,18 @@ for (let i = 0; i < resolutions.length; i++) {
   matrixIds.push(i.toString());
 }
 
-const tileGrid: WMTSTileGrid = new WMTSTileGrid({
+const wmtsTileGrid: WMTSTileGrid = new WMTSTileGrid({
   origin: [swissExtent[0], swissExtent[3]],
   resolutions,
   matrixIds,
 });
 
+const wmsTileGrid = new TileGrid({
+  tileSize: 512,
+  origin: [swissExtent[0], swissExtent[3]],
+  resolutions,
+});
+
 const baseLayerNames = {
   colormap: "ch.swisstopo.pixelkarte-farbe",
   detailedColormap: "ch.swisstopo.swisstlm3d-karte-farbe",
@@ -62,7 +68,7 @@ export const basemaps: Basemap[] = [
             url: "https://wmts10.geo.admin.ch/1.0.0/{Layer}/default/current/2056/{TileMatrix}/{TileCol}/{TileRow}.png",
             crossOrigin,
             attributions,
-            tileGrid,
+            tileGrid: wmtsTileGrid,
             projection,
             requestEncoding,
             style,
@@ -77,7 +83,6 @@ export const basemaps: Basemap[] = [
     previewImg: baseLayerNames.satellite,
     layer: new TileLayer({
       minResolution: 0.1,
-      maxZoom: 27,
       source: new XYZ({
         url: `https://wmts10.geo.admin.ch/1.0.0/${baseLayerNames.satellite}/default/current/3857/{z}/{x}/{y}.jpeg`,
         crossOrigin,
@@ -91,11 +96,11 @@ export const basemaps: Basemap[] = [
     previewImg: baseLayerNames.greymap,
     layer: new TileLayer({
       minResolution: 0.1,
-      maxZoom: 27,
-      source: new XYZ({
-        url: `https://wmts10.geo.admin.ch/1.0.0/${baseLayerNames.greymap}/default/current/3857/{z}/{x}/{y}.jpeg`,
-        crossOrigin,
-        attributions,
+      source: new TileWMS({
+        url: `https://wms0.geo.admin.ch/?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&LANG=en`,
+        gutter: 120,
+        params: { LAYERS: baseLayerNames.greymap, TILED: true },
+        tileGrid: wmsTileGrid,
       }),
     }),
   },