Treeview: scale dependent visibility

3liz · Sep 19, 2023 · 5441190 · 5441190
1 parent e35088c
commit 5441190
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 14 deletions.
diff --git a/assets/src/components/Treeview.js b/assets/src/components/Treeview.js
@@ -1,4 +1,5 @@
-import { mainLizmap } from '../modules/Globals.js';
+import { mainLizmap, mainEventDispatcher } from '../modules/Globals.js';
+import Utils from '../modules/Utils.js';
 import { MapLayerLoadStatus } from '../modules/state/MapLayer.js';
 
 import { html, render } from 'lit-html';
@@ -40,7 +41,7 @@ export default class Treeview extends HTMLElement {
         html`
         <ul>
             ${layerTreeGroupState.children.map(item => html`
-            <li data-testid="${item.name}">
+            <li data-testid="${item.name}" class="${this._isVisible(item) ? '' : 'not-visible'}">
                 ${item.type === 'group' || (item.symbologyChildrenCount && item.layerConfig.legendImageOption !== "disabled")
                     ? html`<div class="expandable ${item.expanded ? 'expanded' : ''}" @click=${() => item.expanded = !item.expanded}></div>`
                     : ''
@@ -50,7 +51,7 @@ export default class Treeview extends HTMLElement {
                         ? html`<div class="loading ${item.loadStatus === MapLayerLoadStatus.Loading ? 'spinner' : ''}"></div>`
                         : ''
                     }
-                    <input class="${layerTreeGroupState.mutuallyExclusive ? 'rounded-checkbox' : ''}" type="checkbox" id="node-${item.name}" .checked=${item.checked} @click=${() => item.checked = !item.checked} >
+                    <input type="checkbox" class="${layerTreeGroupState.mutuallyExclusive ? 'rounded-checkbox' : ''}" id="node-${item.name}" .checked=${item.checked} @click=${() => item.checked = !item.checked} >
                     <div class="node ${item.isFiltered ? 'filtered' : ''}">
                         ${item.type === 'layer'
                             ? html`<img class="legend" src="${item.icon}">`
@@ -90,13 +91,21 @@ export default class Treeview extends HTMLElement {
             this._onChange,
             ['layer.load.status.changed', 'layer.visibility.changed', 'group.visibility.changed', 'layer.style.changed', 'layer.symbology.changed', 'layer.filter.changed', 'layer.expanded.changed', 'group.expanded.changed']
         );
+
+        mainEventDispatcher.addListener(
+            this._onChange, ['resolution.changed']
+        );
     }
 
     disconnectedCallback() {
         mainLizmap.state.layerTree.removeListener(
             this._onChange,
             ['layer.load.status.changed', 'layer.visibility.changed', 'group.visibility.changed', 'layer.style.changed', 'layer.symbology.changed', 'layer.filter.changed', 'layer.expanded.changed', 'group.expanded.changed']
         );
+
+        mainEventDispatcher.removeListener(
+            this._onChange, ['resolution.changed']
+        );
     }
 
     set itemNameSelected(itemName) {
@@ -113,6 +122,16 @@ export default class Treeview extends HTMLElement {
         this._onChange();
     }
 
+    _isVisible(item) {
+        if (item.type === 'group') {
+            return item.visibility;
+        }
+        const metersPerUnit = mainLizmap.map.getView().getProjection().getMetersPerUnit();
+        const scale = Utils.getScaleFromResolution(mainLizmap.map.getView().getResolution(), metersPerUnit);
+        const visibility = item.isVisible(scale);
+        return visibility;
+    }
+
     _createDocLink(layerName) {
         let url = lizMap.config.layers?.[layerName]?.link;
 

diff --git a/assets/src/modules/BaseLayersMap.js b/assets/src/modules/BaseLayersMap.js
@@ -70,8 +70,9 @@ export default class BaseLayersMap extends olMap {
                     })
                 });
             } else if (baseLayerState.type === BaseLayerTypes.WMS) {
-                let minResolution = baseLayerState.layerConfig.minScale === 1 ? undefined : Utils.getResolutionFromScale(baseLayerState.layerConfig.minScale);
-                let maxResolution = baseLayerState.layerConfig.maxScale === 1000000000000 ? undefined : Utils.getResolutionFromScale(baseLayerState.layerConfig.maxScale);
+                const metersPerUnit = mainLizmap.map.getView().getProjection().getMetersPerUnit();
+                let minResolution = baseLayerState.wmsMinScaleDenominator <= 1 ? undefined : Utils.getResolutionFromScale(baseLayerState.layerConfig.minScale, metersPerUnit);
+                let maxResolution = baseLayerState.wmsMaxScaleDenominator <= 1 ? undefined : Utils.getResolutionFromScale(baseLayerState.layerConfig.maxScale, metersPerUnit);
                 baseLayer = new ImageLayer({
                     minResolution: minResolution,
                     maxResolution: maxResolution,
@@ -131,8 +132,9 @@ export default class BaseLayersMap extends olMap {
                     }),
                 });
             } else if (baseLayerState.type === BaseLayerTypes.Lizmap) {
-                let minResolution = baseLayerState.layerConfig.minScale === 1 ? undefined : Utils.getResolutionFromScale(baseLayerState.layerConfig.minScale);
-                let maxResolution = baseLayerState.layerConfig.maxScale === 1000000000000 ? undefined : Utils.getResolutionFromScale(baseLayerState.layerConfig.maxScale);
+                const metersPerUnit = mainLizmap.map.getView().getProjection().getMetersPerUnit();
+                let minResolution = baseLayerState.wmsMinScaleDenominator <= 1 ? undefined : Utils.getResolutionFromScale(baseLayerState.layerConfig.minScale, metersPerUnit);
+                let maxResolution = baseLayerState.wmsMaxScaleDenominator <= 1 ? undefined : Utils.getResolutionFromScale(baseLayerState.layerConfig.maxScale, metersPerUnit);
                 baseLayer = new ImageLayer({
                     // extent: extent,
                     minResolution: minResolution,
@@ -224,8 +226,9 @@ export default class BaseLayersMap extends olMap {
                 */
 
                 // Set min/max resolution only if different from default
-                let minResolution = node.layerConfig.minScale === 1 ? undefined : Utils.getResolutionFromScale(node.layerConfig.minScale);
-                let maxResolution = node.layerConfig.maxScale === 1000000000000 ? undefined : Utils.getResolutionFromScale(node.layerConfig.maxScale);
+                const metersPerUnit = mainLizmap.map.getView().getProjection().getMetersPerUnit();
+                let minResolution = node.wmsMinScaleDenominator <= 1 ? undefined : Utils.getResolutionFromScale(node.layerConfig.minScale, metersPerUnit);
+                let maxResolution = node.wmsMaxScaleDenominator <= 1 ? undefined : Utils.getResolutionFromScale(node.layerConfig.maxScale, metersPerUnit);
 
                 if (node.layerConfig.cached) {
                     const parser = new WMTSCapabilities();

diff --git a/assets/src/modules/Utils.js b/assets/src/modules/Utils.js
@@ -73,8 +73,18 @@ export default class Utils {
         xhr.send($.param(parameters, true));
     }
 
-    static getResolutionFromScale(scale) {
-        const resolution = 1 / ((1/scale) * 39.37 * 96);
+    // Source: https://github.com/openlayers/ol2/blob/master/lib/OpenLayers/Util.js#L1101
+    static getResolutionFromScale(scale, metersPerUnit) {
+        const inchesPerMeter = 1000 / 25.4;
+        const DPI = 96;
+        const resolution = scale / (inchesPerMeter * DPI * metersPerUnit);
         return resolution;
     }
+
+    static getScaleFromResolution(resolution, metersPerUnit) {
+        const inchesPerMeter = 1000 / 25.4;
+        const DPI = 96;
+        const scale = resolution * inchesPerMeter * DPI * metersPerUnit;
+        return scale;
+    }
 }
diff --git a/assets/src/modules/state/LayerTree.js b/assets/src/modules/state/LayerTree.js
@@ -237,6 +237,23 @@ export class LayerTreeItemState extends EventDispatcher {
     calculateVisibility() {
         return this._mapItemState.calculateVisibility();
     }
+
+    /**
+     * Get item visibility taking care of this.visibility and scale
+     *
+     * @returns {boolean} the item visibility
+     **/
+    isVisible(scaleDenominator) {
+        if (this.type === 'group') {
+            return this.visibility;
+        }
+
+        if(this._mapItemState.wmsMinScaleDenominator !== undefined && this._mapItemState.wmsMaxScaleDenominator !== undefined){
+            return this.visibility && this._mapItemState.wmsMinScaleDenominator < scaleDenominator 
+            && scaleDenominator < this._mapItemState.wmsMaxScaleDenominator;
+        }
+        return this.visibility;
+    }
 }
 
 /**

diff --git a/lizmap/www/assets/css/map.css b/lizmap/www/assets/css/map.css
@@ -3097,12 +3097,13 @@ lizmap-treeview label {
   display: inline;
 }
 
-lizmap-treeview div.group:not(.checked) ~ ul input[type="checkbox"] {
-  accent-color: silver;
+lizmap-treeview li.not-visible > div input[type="checkbox"] {
+  accent-color: #7F7F80;
 }
 
-lizmap-treeview div.group:not(.checked) ~ ul label {
+lizmap-treeview li.not-visible > div label {
   font-style: italic;
+  color: #7F7F80;
 }
 
 lizmap-treeview .layer-actions {