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 a1fc2b852f1e9a298f9bf07a2615664f31cc3f6d..4be5987b831f7d7617e9511b2f21449c0d1f805f 100644 (file)
--- a/js/src/geo/OpenLayersMapPart.js
+++ b/js/src/geo/OpenLayersMapPart.js
@@ -2,19 +2,29 @@
  * @module OpenLayersMapPart
  */
 
-import Map from 'ol/Map.js';
-import View from 'ol/View.js';
 import { fromLonLat, getPointResolution } from 'ol/proj.js';
-import VectorSource from 'ol/source/Vector.js';
 import Feature from 'ol/Feature.js';
 import { Point } from 'ol/geom.js';
+import { transformExtent } from 'ol/proj.js';
+
 import VectorLayer from 'ol/layer/Vector.js';
+import TileLayer from 'ol/layer/Tile.js';
+
+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';
 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';
 
 import MapPart from './MapPart.js';
@@ -24,6 +34,10 @@ export default class OpenLayersMapPart extends MapPart {
        /** The OpenLayers Map. */
        #map;
 
+       #overviewMap;
+
+       select;
+
        /** Styled layer descriptor */
        #sld;
 
@@ -33,7 +47,25 @@ export default class OpenLayersMapPart extends MapPart {
        /** Constructor taking the mapName as an argument. */
        constructor(mapName) {
                super(mapName);
+               this.#overviewMap = new OverviewMap({
+                       layers: [
+                               new TileLayer({
+                                       source: new OSM(),
+                               }),
+                       ],
+               });
+               this.select = new Select();
                this.#map = new Map({
+                       controls: defaultControls({
+                               attribution: false,
+                               rotate: false,
+                       }).extend([this.#overviewMap, new ScaleLine({
+                               bar: false,
+                               steps: 2,
+                               text: false,
+                               minWidth: 150,
+                               maxWidth: 200,
+                       })]),
                        layers: [
                        ],
                        //                                              view: new View({
@@ -43,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);
        }
 
@@ -52,8 +85,13 @@ export default class OpenLayersMapPart extends MapPart {
                this.#map.getView().setZoom(zoom);
        }
 
-       setCenter(lng, lat) {
-               this.#map.getView().setCenter(fromLonLat([lng, lat]));
+       setCenter(lat, lon) {
+               this.#map.getView().setCenter(fromLonLat([lon, lat]));
+       }
+
+       fit(extent, options) {
+               var transformed = transformExtent(extent, 'EPSG:4326', this.#map.getView().getProjection());
+               this.#map.getView().fit(transformed, options);
        }
 
        addPoint(lng, lat, style) {
@@ -128,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'));
                });
        }
 
@@ -140,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'));
                        }
                });
        }
@@ -184,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);
@@ -204,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
        //
@@ -274,5 +350,4 @@ export default class OpenLayersMapPart extends MapPart {
                });
                vectorLayer.setStyle(olStyleFunction);
        }
-
 }