Introduce fit to map layer

[gpl/argeo-suite.git] / js / src / geo / OpenLayersMapPart.js

diff --git a/js/src/geo/OpenLayersMapPart.js b/js/src/geo/OpenLayersMapPart.js
index 160930d6b7447563b309de34030dcf808d24b00a..4be5987b831f7d7617e9511b2f21449c0d1f805f 100644 (file)
--- a/js/src/geo/OpenLayersMapPart.js
+++ b/js/src/geo/OpenLayersMapPart.js
@@ -14,6 +14,7 @@ import VectorSource from 'ol/source/Vector.js';
 import GeoJSON from 'ol/format/GeoJSON.js';
 import GPX from 'ol/format/GPX.js';
 import OSM from 'ol/source/OSM.js';
+import { isEmpty } from 'ol/extent';
 
 import Select from 'ol/interaction/Select.js';
 import Overlay from 'ol/Overlay.js';
@@ -22,6 +23,7 @@ import { Style, Icon } from 'ol/style.js';
 import Map from 'ol/Map.js';
 import View from 'ol/View.js';
 import { OverviewMap, ScaleLine, defaults as defaultControls } from 'ol/control.js';
+import { easeOut } from 'ol/easing';
 
 import * as SLDReader from '@nieuwlandgeo/sldreader';
 
@@ -34,6 +36,8 @@ export default class OpenLayersMapPart extends MapPart {
 
        #overviewMap;
 
+       select;
+
        /** Styled layer descriptor */
        #sld;
 
@@ -50,6 +54,7 @@ export default class OpenLayersMapPart extends MapPart {
                                }),
                        ],
                });
+               this.select = new Select();
                this.#map = new Map({
                        controls: defaultControls({
                                attribution: false,
@@ -70,6 +75,7 @@ export default class OpenLayersMapPart extends MapPart {
                        //                                              }),
                        target: this.getMapName(),
                });
+               this.#map.addInteraction(this.select);
                //this.#map.getView().set('projection', 'EPSG:4326', true);
        }
 
@@ -160,7 +166,7 @@ export default class OpenLayersMapPart extends MapPart {
                                return true;
                        });
                        if (feature !== null)
-                               mapPart.callbacks['onFeatureSingleClick'](feature.get('path'));
+                               mapPart.callbacks['onFeatureSingleClick'](feature.get('cr:path'));
                });
        }
 
@@ -172,7 +178,7 @@ export default class OpenLayersMapPart extends MapPart {
                select.on('select', function(e) {
                        if (e.selected.length > 0) {
                                let feature = e.selected[0];
-                               mapPart.callbacks['onFeatureSelected'](feature.get('path'));
+                               mapPart.callbacks['onFeatureSelected'](feature.get('cr:path'));
                        }
                });
        }
@@ -216,7 +222,7 @@ export default class OpenLayersMapPart extends MapPart {
                                return;
                        }
                        const coordinate = e.coordinate;
-                       const path = selected.get('path');
+                       const path = selected.get('cr:path');
                        if (path === null)
                                return true;
                        const res = mapPart.callbacks['onFeaturePopup'](path);
@@ -236,6 +242,44 @@ export default class OpenLayersMapPart extends MapPart {
                return 'map';
        }
 
+       selectFeatures(layerName, featureIds) {
+               // we cannot use 'this' in the function provided to OpenLayers
+               let mapPart = this;
+               this.select.getFeatures().clear();
+               const layer = this.getLayerByName(layerName);
+               const source = layer.getSource();
+               for (const featureId of featureIds) {
+                       let feature = source.getFeatureById(featureId);
+                       if (feature === null) {
+                               source.on('featuresloadend', function(e) {
+                                       feature = source.getFeatureById(featureId);
+                                       if (feature !== null)
+                                               mapPart.select.getFeatures().push(feature);
+                               });
+                       } else {
+                               this.select.getFeatures().push(feature);
+                       }
+               }
+       }
+
+       fitToLayer(layerName) {
+               // we cannot use 'this' in the function provided to OpenLayers
+               let mapPart = this;
+               const layer = this.getLayerByName(layerName);
+               const source = layer.getSource();
+               const extent = source.getExtent();
+               const options = {
+                       duration: 1000,
+                       padding: [20, 20, 20, 20],
+                       easing: easeOut,
+               };
+               if (!isEmpty(extent))
+                       this.#map.getView().fit(source.getExtent(), options);
+               source.on('featuresloadend', function(e) {
+                       mapPart.getMap().getView().fit(source.getExtent(), options);
+               });
+       }
+
        //
        // STATIC FOR EXTENSION
        //