wms: layer added to map with control

webgis/index.html

@@ -13,13 +13,14 @@
     <script type="importmap">
     {
         "imports": {
-        "three": "./js/vendor/three/build/three.module.js",
-        "@photo-sphere-viewer/core": "./js/vendor/@photo-sphere-viewer/core/index.module.js",
-        "@hotwired/stimulus": "./js/vendor/@hotwired/stimulus/dist/stimulus.js"
+            "three": "./js/vendor/three/build/three.module.js",
+            "@photo-sphere-viewer/core": "./js/vendor/@photo-sphere-viewer/core/index.module.js",
+            "@hotwired/stimulus": "./js/vendor/@hotwired/stimulus/dist/stimulus.js"
         }
     }
     </script>
-    <script src="js/vendor/leaflet/dist/leaflet.js"></script>
+    <script src="./js/vendor/proj4/dist/proj4.js"></script>
+    <script src="js/vendor/leaflet/dist/leaflet-src.js"></script>
     <script src="js/vendor/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
     <script src="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js"></script>
     <script src="js/index.js" type="module"></script>
@@ -283,14 +284,18 @@
             </template>
             <aside class="menu ml-4 mt-3" data-id="cartography-aside">
                 <button title="Chiudi menu" class="delete is-pulled-right" data-action="menu#closeCartography"></button>
-                <p class="menu-label is-size-5 mt-2 is-clickable" data-id="historic">
+                <ul class="menu-list">
+                    <li>
+                        <input type="checkbox" data-controller="layer" data-action="layer#toggleCadastral" />
+                        Catasto Agenzia delle Entrate (particelle e fabbricati)
+                    </li>
+                </ul>
+                <p class="menu-label is-size-5 mt-4 is-clickable" data-id="historic">
                     <span role="button" data-action="click->menu#toggle" data-id="historic">
                         Catasto storico
-                        <!--
-                            <span class="icon pl-2">
-                                <i class="fa fa-chevron-right" data-menu-target="icon" data-id="historic"></i>
-                            </span>
-                        -->
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="historic"></i>
+                        </span>
                     </span>
                 </p>
             </aside>

webgis/js/controllers/layer_controller.js

@@ -33,6 +33,14 @@ export default class extends Controller {
         else map.removeLayer(currentLayer);
     }
 
+    toggleCadastral() {
+        const map = GisState.map;
+        const wms = GisState.cartography.cadastral;
+
+        if (!map.hasLayer(wms)) map.addLayer(wms);
+        else map.removeLayer(wms);
+    }
+
     /**
      * @todo Use Stimulus values?
      * @param {Event} event 

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,23 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
 
     GisState.map = map;
 
+    const reprojectedWMSLayer = GIS.reprojectWMS();
+    const wmsLayer = new reprojectedWMSLayer(
+        'https://wms.cartografia.agenziaentrate.gov.it/inspire/wms/ows01.php?',
+        {
+            layers: 'CP.CadastralParcel,fabbricati',
+            transparent: true,
+            format: 'image/png',
+            version: '1.1.1',
+            minZoom: 15,
+            maxZoom: this.MAX_ZOOM,
+            tileSize: 1024,
+            opacity: 0.6,
+        }
+    );
+
+    GisState.cartography.cadastral = wmsLayer;
+
     return map;
 }
 /**
@@ -159,7 +175,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 +574,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 = map.unproject(nwPoint, tilePoint.z);
+            const se = map.unproject(sePoint, tilePoint.z);
+
+            const [minX, minY] = proj4('EPSG:4326', 'EPSG:4258', [nw.lng, se.lat]);
+            const [maxX, maxY] = proj4('EPSG:4326', 'EPSG:4258', [se.lng, nw.lat]);
+
+            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

webgis/js/package.json

@@ -12,6 +12,7 @@
     "fontawesome-free": "^1.0.4",
     "leaflet": "^1.9.4",
     "leaflet.markercluster": "^1.5.3",
+    "proj4": "^2.9.4",
     "spotlight.js": "^0.7.8"
   },
   "devDependencies": {}

webgis/js/state.js

@@ -39,6 +39,7 @@ export const GisState = {
     apiUrl : null,
     cartography : {
         historic: [],
+        cadastral: null,
     }
 }
 

webgis/js/yarn.lock

@@ -39,6 +39,19 @@ leaflet@^1.9.4:
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
   integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
 
+mgrs@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/mgrs/-/mgrs-1.0.0.tgz#fb91588e78c90025672395cb40b25f7cd6ad1829"
+  integrity sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==
+
+proj4@^2.9.4:
+  version "2.19.4"
+  resolved "https://registry.yarnpkg.com/proj4/-/proj4-2.19.4.tgz#38cf347309f523309ead94d565788de94f07098f"
+  integrity sha512-1l6JiJ2ZOzXIoo6k64diOQVOvHIF0IACMrHTaFHrEQmuo1tY1vb73mrWfTSyPH+muc0Lut4zuj5encvB1Ccuhg==
+  dependencies:
+    mgrs "1.0.0"
+    wkt-parser "^1.5.1"
+
 spotlight.js@^0.7.8:
   version "0.7.8"
   resolved "https://registry.yarnpkg.com/spotlight.js/-/spotlight.js-0.7.8.tgz#0620371701508222d736e0658e8db3fbe9ddc53b"
@@ -48,3 +61,8 @@ three@^0.169.0:
   version "0.169.0"
   resolved "https://registry.yarnpkg.com/three/-/three-0.169.0.tgz#4a62114988ad9728d73526d1f1de6760c56b4adc"
   integrity sha512-Ed906MA3dR4TS5riErd4QBsRGPcx+HBDX2O5yYE5GqJeFQTPU+M56Va/f/Oph9X7uZo3W3o4l2ZhBZ6f6qUv0w==
+
+wkt-parser@^1.5.1:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/wkt-parser/-/wkt-parser-1.5.2.tgz#a8eaf86ac2cc1d0a2e6a8082a930f5c7ebdb5771"
+  integrity sha512-1ZUiV1FTwSiSrgWzV9KXJuOF2BVW91KY/mau04BhnmgOdroRQea7Q0s5TVqwGLm0D2tZwObd/tBYXW49sSxp3Q==