wms: debugging reprojection

webgis/js/gis.js

@@ -9,16 +9,15 @@ import { GisState } from "./state.js";
 const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
 const BASE_URL = location.href;
 
-let API_URL = '';
-if (BASE_URL.includes('localhost')) {
+let API_URL = API_CONFIG.prod;
+
+if (!BASE_URL.includes('cnr.it')) {
     API_URL = API_CONFIG.dev;
-} else {
-    API_URL = API_CONFIG.prod;
 }
 
 GisState.apiUrl = API_URL;
 
-// Global leaflet
+// Global leaflet and proj4
 /**
  * @namespace GIS
  */
@@ -124,6 +123,21 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
 
     GisState.map = map;
 
+    // DEBUG - Test reprojected WMS
+    const reprojectedWMSLayer = GIS.reprojectWMS();
+    const wmsLayer = new reprojectedWMSLayer(
+        'https://wms.cartografia.agenziaentrate.gov.it/inspire/wms/ows01.php?',
+        {
+            layers: 'fabbricati',
+            format: 'image/png',
+            transparent: true,
+            version: '1.1.1',
+            attribution: '© Agenzia Entrate',
+        }
+    );
+
+    wmsLayer.addTo(map);
+
     return map;
 }
 /**
@@ -159,7 +173,7 @@ GIS.getImageOverlay = async function (imageId) {
         `/webgis/img/geo/${imageData.filename}`,
         bounds,
         {
-            opacity: 0.8,
+            opacity: 0.6,
             alt: `Immagine georeferita (${imageData.label})`,
             label: `geoimage:${imageData.id}:${imageData.label}`,
         }
@@ -558,6 +572,51 @@ GIS.featurePopup = function (layerName, feature) {
 
     return content[layerName];
 }
+/**
+ * Reproject WMS layer to map's CRS
+ * @todo Parametrize CRS?
+ * @returns {L.TileLayer.WMS}
+ */
+GIS.reprojectWMS = function (crs = 'EPSG:4258') {
+    // Define EPSG:4258
+    proj4.defs('EPSG:4258', "+proj=longlat +ellps=GRS80 +no_defs +type=crs");
+
+    const reprojectedWMSLayer =  L.TileLayer.WMS.extend({
+        getTileUrl(tilePoint) {
+            const map = GisState.map;
+            const crs = map.options.crs;
+            const tileSize = this.getTileSize();
+
+            //const geoPoint = L.point(tilePoint.x, tilePoint.y);
+            const nwPoint = L.point(
+                tilePoint.x * tileSize.x,
+                tilePoint.y * tileSize.y,
+            )
+            const sePoint = nwPoint.add(L.point(tileSize));
+
+            const nw = crs.project(map.unproject(nwPoint, tilePoint.z));
+            const se = crs.project(map.unproject(sePoint, tilePoint.z));
+
+            const [minX, minY] = proj4('EPSG:4326', 'EPSG:4258', [nw.x, se.y]);
+            const [maxX, maxY] = proj4('EPSG:4326', 'EPSG:4258', [se.x, nw.y]);
+
+            const bbox = [minX, minY, maxX, maxY].join(',');
+
+            return this._url + L.Util.getParamString({
+                    ...this.wmsParams,
+                    bbox,
+                    width: tileSize.x,
+                    height: tileSize.y,
+                    srs: 'EPSG:4258'
+                },
+                this._url,
+                true
+            );
+        }
+    });
+
+    return reprojectedWMSLayer;
+}
 /**
  * Fetch data from API
  * @param {string} recordUri The URI to be appendend to the API's base URL