Improve CRS, layer switcher and basemap handling

Author: m-mohr

basemaps.config.js

@@ -6,6 +6,7 @@ const WMS = 'TileWMS';
 const XYZ = 'XYZ';
 
 // All options (except for 'is') follow the OpenLayers options for the respective source class.
+// Projections (except for EPSG:3857 and EPSG:4326) must be listed in the `crs` array in the config.js.
 const BASEMAPS = {
   earth: [
     {
@@ -22,7 +23,7 @@ const BASEMAPS = {
       is: WMS,
       title: 'USGS Europa',
       attributions: USGS_ATTRIBUTION,
-      projection: "EPSG:4326",
+      projection: 'EPSG:4326',
       params: {
         FORMAT: 'image/png',
         LAYERS: 'GALILEO_VOYAGER'
@@ -35,7 +36,7 @@ const BASEMAPS = {
       is: WMS,
       title: 'USGS Mars',
       attributions: USGS_ATTRIBUTION,
-      projection: "EPSG:4326",
+      projection: 'EPSG:4326',
       params: {
         FORMAT: 'image/png',
         LAYERS: 'MDIM21'
@@ -48,7 +49,7 @@ const BASEMAPS = {
       is: WMS,
       title: 'USGS Moon',
       attributions: USGS_ATTRIBUTION,
-      projection: "EPSG:4326",
+      projection: 'EPSG:4326',
       params: {
         FORMAT: 'image/png',
         LAYERS: 'LROC_WAC'

config.js

@@ -46,5 +46,6 @@ module.exports = {
     requestQueryParameters: {},
     socialSharing: ['email', 'bsky', 'mastodon', 'x'],
     preprocessSTAC: null,
-    authConfig: null
+    authConfig: null,
+    crs: {}
 };

config.schema.json

@@ -231,6 +231,11 @@
           "$ref": "https://stac-extensions.github.io/authentication/v1.1.0/schema.json"
         }
       ]
+    },
+    "crs": {
+      "type": [
+        "object"
+      ]
     }
   }
 }

docs/options.md

@@ -45,6 +45,7 @@ The following ways to set config options are possible:
   - [buildTileUrlTemplate](#buildtileurltemplate)
   - [useTileLayerAsFallback](#usetilelayerasfallback)
   - [displayGeoTiffByDefault](#displaygeotiffbydefault)
+  - [crs](#crs)
 - [User Interface](#user-interface)
   - [itemsPerPage](#itemsperpage)
   - [maxItemsPerPage](#maxitemsperpage)
@@ -373,6 +374,23 @@ To clarify the behavior, please have a look at the following table:
 If set to `true`, the map also shows non-cloud-optimized GeoTiff files by default. Otherwise (`false`, default), it only shows COGs and you can only enforce showing GeoTiffs to be loaded with the "Show on map" button but they are never loaded automatically.
 Loading non-cloud-optimized GeoTiffs only works reliably for smaller files (< 1MB). It may also work for larger files, but it is depending a lot on the underlying client hardware and software.
 
+### crs
+
+An object of coordinate reference systems that the system needs to know.
+The key is the code for the CRS, the value is the CRS definition as OGC WKT string (WKT2 is not supported).
+`EPSG:3857` (Web Mercator) and `EPSG:4326` (WGS 84) don't need to be registered, they are included by default.
+
+This is primarily useful for CRS that are used for the basemaps (see `basemaps.config.js`).
+All CRS not listed here will be requested from an external service over HTTP, which is slower.
+
+Example for EPSG:2056:
+
+```js
+{
+  'EPSG:2056': 'PROJCS["CH1903+ / LV95",GEOGCS["CH1903+",DATUM["CH1903+",SPHEROID["Bessel 1841",6377397.155,299.1528128,AUTHORITY["EPSG","7004"]],AUTHORITY["EPSG","6150"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4150"]],PROJECTION["Hotine_Oblique_Mercator_Azimuth_Center"],PARAMETER["latitude_of_center",46.9524055555556],PARAMETER["longitude_of_center",7.43958333333333],PARAMETER["azimuth",90],PARAMETER["rectified_grid_angle",90],PARAMETER["scale_factor",1],PARAMETER["false_easting",2600000],PARAMETER["false_northing",1200000],UNIT["metre",1,AUTHORITY["EPSG","9001"]],AXIS["Easting",EAST],AXIS["Northing",NORTH],AUTHORITY["EPSG","2056"]]'
+}
+```
+
 ## User Interface
 
 ### itemsPerPage

src/components/Map.vue

@@ -27,14 +27,10 @@ import LayerControl from './maps/LayerControl.vue';
 import TextControl from './maps/TextControl.vue';
 import { mapGetters } from 'vuex';
 import { BPopover } from 'bootstrap-vue';
-import proj4 from 'proj4';
 import Select from 'ol/interaction/Select';
-import {register} from 'ol/proj/proj4.js';
 import StacLayer from 'ol-stac';
 import { getStacObjectsForEvent, getStyle } from 'ol-stac/util.js';
 
-register(proj4); // required to support source reprojection
-
 const selectStyle = getStyle('#ff0000', 2, null);
 
 export default {

src/components/maps/LayerControl.vue

@@ -6,10 +6,6 @@
       :target="id" container="#stac-browser"
     >
       <div class="layercontrol">
-        <section v-if="hasLayers">
-          <h5>{{ $t('mapping.layers.title') }}</h5>
-          <LayerControlGroup :map="map" :group="layerGroup" />
-        </section>
         <section>
           <h5>{{ $t('mapping.layers.base') }}</h5>
           <span v-if="baseLayers.length === 0">{{ $t('mapping.nobasemap') }}</span>
@@ -19,17 +15,23 @@
             </b-form-radio>
           </b-form-radio-group>
         </section>
+        <section v-if="hasLayers">
+          <h5>{{ $t('mapping.layers.title') }}</h5>
+          <LayerControlGroup :map="map" :group="layerGroup" />
+        </section>
       </div>
     </b-popover>
   </div>
 </template>
 
 <script>
-//import View from 'ol/View';
+import View from 'ol/View';
 import ControlMixin from './ControlMixin';
 import LayerControlMixin from './LayerControlMixin';
 import { BFormRadio, BFormRadioGroup, BIconLayersFill, BPopover } from 'bootstrap-vue';
-//import { transformWithProjections } from 'ol/proj';
+import { transformWithProjections } from 'ol/proj';
+import Group from 'ol/layer/Group';
+import { Vector } from 'ol/source';
 
 export default {
   name: 'LayerControl',
@@ -66,23 +68,52 @@ export default {
         return;
       }
       // todo: switching between base layers with different projections is not working yet
-      //let projection;
+      let projection;
       for (const data of this.baseLayers) {
         data.layer.setVisible(data.id === newId);
-        //projection = data.layer.getSource().getProjection();
+        if (data.id === newId) {
+          projection = data.layer.getSource().getProjection();
+        }
+      }
+      const view = this.map.getView();
+      const currentProjection = view.getProjection();
+      if (currentProjection !== projection) {
+        this.map.setView(new View({
+          showFullExtent: true,
+          projection,
+          zoom: view.getZoom(),
+          center: transformWithProjections(view.getCenter(), currentProjection, projection)
+        }));
+        this.reprojectLayers(this.map.getLayers(), currentProjection, projection);
       }
-      // const view = this.map.getView();
-      // if (view.getProjection() !== projection) {
-      //   this.map.setView(new View({
-      //     showFullExtent: true,
-      //     projection,
-      //     zoom: view.getZoom(),
-      //     center: transformWithProjections(view.getCenter(), view.getProjection(), projection)
-      //   }));
-      // }
     }
   },
   methods: {
+    reprojectLayers(layers, sourceProjection, targetProjection) {
+      for (const layer of layers.getArray()) {
+        if (layer.get('base')) {
+          continue;
+        }
+        if (layer instanceof Group) {
+          this.reprojectLayers(layer.getLayers(), sourceProjection, targetProjection);
+          continue;
+        }
+        const source = layer.getSource();
+        if (source instanceof Vector) {
+          // Handle vector layers
+          const currentProjection = source.getProjection() || sourceProjection;
+          const features = source.getFeatures();
+          for (const feature of features) {
+            const geometry = feature.getGeometry();
+            if (geometry) {
+              geometry.transform(currentProjection, targetProjection);
+            }
+          }
+          source.refresh();
+        }
+        // else: todo: Handle other layer types if needed
+      }
+    },
     update() {
       this.layerGroup = this.map.getLayerGroup();
       this.baseLayers = [];

src/components/maps/MapMixin.js

@@ -1,15 +1,25 @@
-import configureBasemap from '../../../basemaps.config';
 import Utils from '../../utils';
 import { mapState } from 'vuex';
 import Map from 'ol/Map.js';
 import View from 'ol/View.js';
 import { defaults } from 'ol/interaction/defaults';
-import TileLayer from 'ol/layer/WebGLTile.js';
 import ZoomControl from 'ol/control/Zoom.js';
 import AttributionControl from 'ol/control/Attribution.js';
 import FullScreenControl from 'ol/control/FullScreen.js';
 import { stacRequest } from '../../store/utils';
 
+import configureBasemap from '../../../basemaps.config';
+import CONFIG from '../../../config';
+import proj4 from 'proj4';
+import {register} from 'ol/proj/proj4.js';
+// Register pre-defined CRS from config in proj4
+if (Utils.isObject(CONFIG.crs)) {
+  for (const code in CONFIG.crs) {
+    proj4.defs(code, CONFIG.crs[code]);
+  }
+}
+register(proj4); // required to support source reprojection
+
 export default {
   computed: {
     ...mapState(['buildTileUrlTemplate', 'crossOriginMedia', 'displayGeoTiffByDefault', 'useTileLayerAsFallback']),
@@ -53,7 +63,7 @@ export default {
         if (ix >= 0) {
           visibleLayer = ix;
         }
-        const currentBasemap = this.basemaps[visibleLayer]; 
+        const currentBasemap = this.basemaps[visibleLayer];
         if (currentBasemap?.projection) {
           projection = currentBasemap?.projection;
         }
@@ -125,20 +135,23 @@ export default {
     async addBasemaps(basemaps, visibleLayer = 0) {
       const promises = basemaps.map(async (options) => {
         try {
-          const cls = (await import(`ol/source/${options.is}.js`)).default;
-          return {
-            source: new cls(options),
+          const layerClassName = options.is === 'VectorTile' ? 'VectorTile' : 'WebGLTile';
+          const [{default: sourceCls}, {default: layerCls}] = await Promise.all([
+            import(`ol/source/${options.is}.js`),
+            import(`ol/layer/${layerClassName}.js`)
+          ]);
+          return new layerCls({
+            source: new sourceCls(options),
             title: options.title,
             base: true
-          };
+          });
         } catch (error) {
           console.error(`Failed to load basemap source for ${options.is}`, error);
           return null;
         }
       });
       (await Promise.all(promises))
         .filter(options => Utils.isObject(options))
-        .map(options => new TileLayer(options))
         .forEach((layer, i) => {
           layer.setVisible(i === visibleLayer);
           this.map.addLayer(layer);

src/components/maps/MapSelect.vue

@@ -18,9 +18,7 @@ import {shiftKeyOnly} from 'ol/events/condition.js';
 import ExtentInteraction from 'ol/interaction/Extent';
 import { containsXY } from 'ol/extent';
 import { transformExtent } from 'ol/proj';
-import { register } from 'ol/proj/proj4.js';
 import Style, { createDefaultStyle } from 'ol/style/Style';
-import proj4 from 'proj4';
 import VectorSource from 'ol/source/Vector';
 import GeoJSON from 'ol/format/GeoJSON';
 import Fill from 'ol/style/Fill';
@@ -29,8 +27,6 @@ import create from 'stac-js';
 import { toGeoJSON } from 'stac-js/src/geo.js';
 import mask from '@turf/mask';
 
-register(proj4); // required to support source reprojection
-
 export default {
   name: 'MapSelect',
   components: {