From de4766415b06c00ee53e8c12c74c35a99b513b46 Mon Sep 17 00:00:00 2001 From: volterra79 Date: Mon, 25 Mar 2024 14:32:32 +0100 Subject: [PATCH 01/19] Add center map marker svg --- src/assets/images/centermapmarker.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/assets/images/centermapmarker.svg diff --git a/src/assets/images/centermapmarker.svg b/src/assets/images/centermapmarker.svg new file mode 100644 index 000000000..d926de5c3 --- /dev/null +++ b/src/assets/images/centermapmarker.svg @@ -0,0 +1 @@ + \ No newline at end of file From 083016fe3163f592fbb2d195c2a9e6581de26652 Mon Sep 17 00:00:00 2001 From: volterra79 Date: Mon, 25 Mar 2024 14:57:26 +0100 Subject: [PATCH 02/19] Rename icon marker --- src/assets/images/{centermapmarker.svg => mapcentermarker.svg} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/assets/images/{centermapmarker.svg => mapcentermarker.svg} (100%) diff --git a/src/assets/images/centermapmarker.svg b/src/assets/images/mapcentermarker.svg similarity index 100% rename from src/assets/images/centermapmarker.svg rename to src/assets/images/mapcentermarker.svg From 6d393b2ff18e5cfe5c8fe14497fd86d97834d96d Mon Sep 17 00:00:00 2001 From: volterra79 Date: Mon, 25 Mar 2024 15:28:04 +0100 Subject: [PATCH 03/19] :sparkles: Transform zoomTo methods async. Introduce 2 new url params: showmarker (0/1 - show marker map center) and iframetype (map -> only map without map controls). Move urls parameters check only when create view options on main map --- src/app/gui/map/mapservice.js | 234 +++++++++++++++++++++++----------- 1 file changed, 158 insertions(+), 76 deletions(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index 40b4c8dd7..c2bc87a68 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -176,18 +176,24 @@ class OlMapViewer { * @FIXME add description */ goToRes(coordinates, options = {}) { - const view = this.map.getView(); - const animate = options.animate || true; - const resolution = options.resolution || view.getResolution(); - if (animate) { - view.animate( - { duration: 200, center: coordinates }, - { duration: 200, resolution } - ); - } else { - view.setCenter(coordinates); - view.setResolution(resolution); - } + return new Promise((resolve) => { + const view = this.map.getView(); + const animate = options.animate || true; + const resolution = options.resolution || view.getResolution(); + const key = view.on('change:center', () => { + ol.Observable.unByKey(key); + setTimeout(resolve); + }); + if (animate) { + view.animate( + { duration: 200, center: coordinates }, + { duration: 200, resolution } + ); + } else { + view.setCenter(coordinates); + view.setResolution(resolution); + } + }) } /** @@ -376,6 +382,16 @@ function MapService(options={}) { * Are used to show selection Features and/or highlight Layer feature */ this.defaultsLayers = { + mapcenter: new ol.layer.Vector({ + source: new ol.source.Vector(), + style: new ol.style.Style({ + image: new ol.style.Icon({ + opacity: 1, + src: '/static/client/images/mapcentermarker.svg', + scale: 0.8 + }), + }) + }), _style: { highlightLayer: { color: undefined @@ -1199,7 +1215,9 @@ proto.zoomToFid = async function(zoom_to_fid='', separator='|') { } }); const feature = data[0] && data[0].features[0]; - feature && this.zoomToFeatures([feature]); + if (feature) { + this.zoomToFeatures([feature]); + } } }; @@ -1691,42 +1709,33 @@ proto._resetView = function() { this.viewer.map.setView(view); }; -proto._calculateViewOptions = function({project, width, height}={}) { - const searchParams = new URLSearchParams(location.search); - const map_extent = searchParams.get('map_extent'); - const zoom_to_fid = searchParams.get('zoom_to_fid'); - const zoom_to_features = searchParams.get('ztf'); // zoom to features - const lat_lon = searchParams.get('lat') && searchParams.get('lon') && { - lat: 1*searchParams.get('lat'), - lon:1*searchParams.get('lon') - }; - const x_y = searchParams.get('x') && searchParams.get('y') && { - x: 1*searchParams.get('x'), - y: 1*searchParams.get('y') - }; - if (zoom_to_fid) this.zoomToFid(zoom_to_fid); - else if (zoom_to_features) this.handleZoomToFeaturesUrlParameter({zoom_to_features}); - else if (lat_lon && !Number.isNaN(lat_lon.lat) && !Number.isNaN(lat_lon.lon)) { - setTimeout(()=>{ - const geometry = new ol.geom.Point(ol.proj.transform([lat_lon.lon, lat_lon.lat], 'EPSG:4326', this.getEpsg())); - if (geometry.getExtent()) - this.zoomToGeometry(geometry) - }) - } else if (x_y && !Number.isNaN(x_y.x) && !Number.isNaN(x_y.y)) - setTimeout(()=> { - const geometry = new ol.geom.Point([x_y.x, x_y.y]); - this.zoomToGeometry(geometry); - }); - const initextent = map_extent ? map_extent.split(',').map(coordinate => 1*coordinate) : project.state.initextent; - const projection = this.getProjection(); - const extent = project.state.extent; - const maxxRes = ol.extent.getWidth(extent) / width; - const maxyRes = ol.extent.getHeight(extent) / height; +/** + * + * @param project + * @param width + * @param height + * @param { Array } map_extent @since 3.10.0 In case of true, use url parameter to set view options + * @return {{extent: *, maxResolution: number, center: *, projection: *, resolution: number}} + * @private + */ +proto._calculateViewOptions = function({ + project, + width, + height, + map_extent, +} = {}) { + + + const initextent = map_extent ? map_extent.split(',').map(coordinate => 1*coordinate) : project.state.initextent; + const projection = this.getProjection(); + const extent = project.state.extent; + const maxxRes = ol.extent.getWidth(extent) / width; + const maxyRes = ol.extent.getHeight(extent) / height; const maxResolution = Math.max(maxxRes,maxyRes); - const initxRes = ol.extent.getWidth(initextent) / width; - const inityRes = ol.extent.getHeight(initextent) / height; - const resolution = Math.max(initxRes,inityRes); - const center = ol.extent.getCenter(initextent); + const initxRes = ol.extent.getWidth(initextent) / width; + const inityRes = ol.extent.getHeight(initextent) / height; + const resolution = Math.max(initxRes,inityRes); + const center = ol.extent.getCenter(initextent); return { projection, center, @@ -1738,12 +1747,62 @@ proto._calculateViewOptions = function({project, width, height}={}) { // set view based on project config proto._setupViewer = function(width, height) { + const searchParams = new URLSearchParams(location.search); + const showmarker = 1*(searchParams.get('showmarker') || 0); /** @since 3.10.0 0 or 1. Show marker on map center*/ + const iframetype = (searchParams.get('iframetype')); /** @since 3.10.0 type of iframe: map (only map, no control)*/ + const map_extent = searchParams.get('map_extent'); + const zoom_to_fid = searchParams.get('zoom_to_fid'); + const zoom_to_features = searchParams.get('ztf'); // zoom to features + const lat_lon = searchParams.get('lat') && searchParams.get('lon') && { + lat: 1*searchParams.get('lat'), + lon: 1*searchParams.get('lon') + }; + const x_y = searchParams.get('x') && searchParams.get('y') && { + x: 1*searchParams.get('x'), + y: 1*searchParams.get('y') + }; + let promise; + if (zoom_to_fid) { + promise = this.zoomToFid(zoom_to_fid); + } else if (zoom_to_features) { + promise = this.handleZoomToFeaturesUrlParameter({ zoom_to_features }); + } else if (lat_lon && !Number.isNaN(lat_lon.lat) && !Number.isNaN(lat_lon.lon)) { + promise = new Promise((resolve) => { + setTimeout(() => { + const geometry = new ol.geom.Point(ol.proj.transform([lat_lon.lon, lat_lon.lat], 'EPSG:4326', this.getEpsg())); + if (geometry.getExtent()) { + this.zoomToGeometry(geometry).then(resolve); + } + }) + }) + } else if (x_y && !Number.isNaN(x_y.x) && !Number.isNaN(x_y.y)) { + promise = new Promise((resolve) => { + setTimeout(() => { + const geometry = new ol.geom.Point([x_y.x, x_y.y]); + this.zoomToGeometry(geometry).then(resolve); + }); + }) + } + + //In the case of show marker, show marker on a map center + if (1 === showmarker) { + promise.then(() => { + this.defaultsLayers.mapcenter.getSource().addFeature(new ol.Feature({ geometry: new ol.geom.Point(this.getCenter()) })) + }) + } + + //in case only map, remove al map controls (empty object) + if ('map' === iframetype) { + this.config.mapcontrols = {}; + } + this.viewer = new OlMapViewer({ id: this.target, view: this._calculateViewOptions({ width, height, - project: this.project + project: this.project, + map_extent, /** @since 3.10.0 */ }) }); this._setSettings(); @@ -1912,20 +1971,27 @@ proto._setupVectorLayers = function() { }; proto._setUpDefaultLayers = function() { - // follow the order that i want - this.getMap().addLayer(this.defaultsLayers.highlightLayer); + // follow the order that I want + this.getMap().addLayer(this.defaultsLayers.mapcenter); this.getMap().addLayer(this.defaultsLayers.selectionLayer); + this.getMap().addLayer(this.defaultsLayers.highlightLayer); }; /** * Method to set Default layers (selectionLayer, and highlightLayer) - * always on top of layers stack of map to be always visible + * always on top of layer stack of a map to be always visible */ proto.moveDefaultLayersOnTop = function(zindex) { + this.setZIndexLayer({ + layer: this.defaultsLayers.mapcenter, + zindex: zindex + 1 + }); + this.setZIndexLayer({ layer: this.defaultsLayers.highlightLayer, zindex: zindex + 1 }); + this.setZIndexLayer({ layer: this.defaultsLayers.selectionLayer, zindex: zindex + 2 @@ -1933,8 +1999,10 @@ proto.moveDefaultLayersOnTop = function(zindex) { }; proto.removeDefaultLayers = function() { + this.defaultsLayers.mapcenter.getSource().clear(); this.defaultsLayers.highlightLayer.getSource().clear(); this.defaultsLayers.selectionLayer.getSource().clear(); + this.getMap().removeLayer(this.defaultsLayers.mapcenter); this.getMap().removeLayer(this.defaultsLayers.highlightLayer); this.getMap().removeLayer(this.defaultsLayers.selectionLayer); }; @@ -2162,8 +2230,8 @@ proto.goTo = function(coordinates,zoom) { this.viewer.goTo(coordinates, options); }; -proto.goToRes = function(coordinates, resolution) { - this.viewer.goToRes(coordinates, { +proto.goToRes = async function(coordinates, resolution) { + await this.viewer.goToRes(coordinates, { resolution }); }; @@ -2219,36 +2287,42 @@ proto.highlightFeatures = function(features, options={}) { proto.zoomToGeometry = function(geometry, options={highlight: false}) { const extent = geometry && geometry.getExtent(); - const {highlight} = options; - if (highlight && extent) options.highLightGeometry = geometry; - extent && this.zoomToExtent(extent, options); + const { highlight } = options; + if (highlight && extent) { + options.highLightGeometry = geometry; + } + return extent ? this.zoomToExtent(extent, options) : Promise.resolve(); }; proto.zoomToFeatures = function(features, options={highlight: false}) { let {geometry, extent} = this.getGeometryAndExtentFromFeatures(features); const {highlight} = options; - if (highlight && extent) options.highLightGeometry = geometry; - return extent && this.zoomToExtent(extent, options) || Promise.resolve(); + if (highlight && extent) { + options.highLightGeometry = geometry; + } + return extent ? this.zoomToExtent(extent, options) : Promise.resolve(); }; /** - * @param { ol.extent } extent + * @param { ol.extet } extent * @param {{ force?: boolean, highLightGeometry?: ol.geometry }} [options={}] * @returns { Promise } */ proto.zoomToExtent = function(extent, options={}) { - this.goToRes( - ol.extent.getCenter(extent), - this.getResolutionForZoomToExtent(extent, { force: options.force || false }) - ); - if (options.highLightGeometry) { - return this.highlightGeometry(options.highLightGeometry, { zoom: false, duration: options.duration }); - } - return Promise.resolve(); + return new Promise(async (resolve) => { + await this.goToRes( + ol.extent.getCenter(extent), + this.getResolutionForZoomToExtent(extent, { force: options.force || false }) + ); + if (options.highLightGeometry) { + await this.highlightGeometry(options.highLightGeometry, { zoom: false, duration: options.duration }); + } + resolve(); + }) }; proto.zoomToProjectInitExtent = function() { - this.zoomToExtent(this.project.state.initextent); + return this.zoomToExtent(this.project.state.initextent); }; /** @@ -2355,7 +2429,7 @@ proto.setSelectionLayerVisible = function(visible=true) { }; proto.highlightGeometry = function(geometryObj, options = {}) { - return new Promise((resolve, reject) => { + return new Promise(async (resolve, reject) => { const {color} = options; this.clearHighlightGeometry(); this.setDefaultLayerStyle('highlightLayer', { @@ -2380,14 +2454,16 @@ proto.highlightGeometry = function(geometryObj, options = {}) { const highlight = (typeof options.highlight == 'boolean') ? options.highlight : true; const duration = options.duration || ANIMATION.duration; let geometry; - if (geometryObj instanceof ol.geom.Geometry) geometry = geometryObj; + if (geometryObj instanceof ol.geom.Geometry) { + geometry = geometryObj; + } else { const format = new ol.format.GeoJSON; geometry = format.readGeometry(geometryObj); } if (zoom) { const extent = geometry.getExtent(); - this.zoomToExtent(extent); + await this.zoomToExtent(extent); } if (highlight) { const feature = new ol.Feature({ @@ -2397,9 +2473,11 @@ proto.highlightGeometry = function(geometryObj, options = {}) { customStyle && highlightLayer.setStyle(customStyle); highlightLayer.getSource().addFeature(feature); if (hide) { - const callback = ()=> { + const callback = () => { highlightLayer.getSource().clear(); - customStyle && highlightLayer.setStyle(defaultStyle); + if (customStyle) { + highlightLayer.setStyle(defaultStyle); + } resolve(); }; hide(callback); @@ -2408,13 +2486,17 @@ proto.highlightGeometry = function(geometryObj, options = {}) { animatingHighlight = true; setTimeout(() => { highlightLayer.getSource().clear(); - customStyle && highlightLayer.setStyle(defaultStyle); + if (customStyle) { + highlightLayer.setStyle(defaultStyle); + } animatingHighlight = false; resolve(); }, duration) } } - } else resolve() + } else { + resolve() + } }) }; From 68e678ba4bcf6d74821326a6c5195246f1b6529c Mon Sep 17 00:00:00 2001 From: volterra79 Date: Mon, 25 Mar 2024 15:33:26 +0100 Subject: [PATCH 04/19] set default resolve promise --- src/app/gui/map/mapservice.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index c2bc87a68..3571da2ea 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -1761,7 +1761,7 @@ proto._setupViewer = function(width, height) { x: 1*searchParams.get('x'), y: 1*searchParams.get('y') }; - let promise; + let promise = Promise.resolve(); if (zoom_to_fid) { promise = this.zoomToFid(zoom_to_fid); } else if (zoom_to_features) { From 648bec6b6691148756e87abe8ce54f629b34d0ed Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 26 Mar 2024 08:56:52 +0100 Subject: [PATCH 05/19] refactor `_setupViewer` (avoid temp `promise`) --- src/app/gui/map/mapservice.js | 130 +++++++++++++++------------------- 1 file changed, 56 insertions(+), 74 deletions(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index 3571da2ea..d3073db12 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -1710,11 +1710,10 @@ proto._resetView = function() { }; /** - * * @param project * @param width * @param height - * @param { Array } map_extent @since 3.10.0 In case of true, use url parameter to set view options + * @param { Array } map_extent since 3.10.0: in case of true, use url parameter to set view options * @return {{extent: *, maxResolution: number, center: *, projection: *, resolution: number}} * @private */ @@ -1725,7 +1724,6 @@ proto._calculateViewOptions = function({ map_extent, } = {}) { - const initextent = map_extent ? map_extent.split(',').map(coordinate => 1*coordinate) : project.state.initextent; const projection = this.getProjection(); const extent = project.state.extent; @@ -1747,51 +1745,46 @@ proto._calculateViewOptions = function({ // set view based on project config proto._setupViewer = function(width, height) { - const searchParams = new URLSearchParams(location.search); - const showmarker = 1*(searchParams.get('showmarker') || 0); /** @since 3.10.0 0 or 1. Show marker on map center*/ - const iframetype = (searchParams.get('iframetype')); /** @since 3.10.0 type of iframe: map (only map, no control)*/ - const map_extent = searchParams.get('map_extent'); - const zoom_to_fid = searchParams.get('zoom_to_fid'); - const zoom_to_features = searchParams.get('ztf'); // zoom to features - const lat_lon = searchParams.get('lat') && searchParams.get('lon') && { - lat: 1*searchParams.get('lat'), - lon: 1*searchParams.get('lon') - }; - const x_y = searchParams.get('x') && searchParams.get('y') && { - x: 1*searchParams.get('x'), - y: 1*searchParams.get('y') - }; - let promise = Promise.resolve(); - if (zoom_to_fid) { - promise = this.zoomToFid(zoom_to_fid); - } else if (zoom_to_features) { - promise = this.handleZoomToFeaturesUrlParameter({ zoom_to_features }); - } else if (lat_lon && !Number.isNaN(lat_lon.lat) && !Number.isNaN(lat_lon.lon)) { - promise = new Promise((resolve) => { - setTimeout(() => { - const geometry = new ol.geom.Point(ol.proj.transform([lat_lon.lon, lat_lon.lat], 'EPSG:4326', this.getEpsg())); - if (geometry.getExtent()) { - this.zoomToGeometry(geometry).then(resolve); - } - }) - }) - } else if (x_y && !Number.isNaN(x_y.x) && !Number.isNaN(x_y.y)) { - promise = new Promise((resolve) => { - setTimeout(() => { - const geometry = new ol.geom.Point([x_y.x, x_y.y]); - this.zoomToGeometry(geometry).then(resolve); - }); - }) - } + const search = new URLSearchParams(location.search); // search params + const showmarker = 1 * (search.get('showmarker') || 0); /** @since 3.10.0 0 or 1. Show marker on map center*/ + const iframetype = search.get('iframetype'); /** @since 3.10.0 type of iframe: map (only map, no control)*/ + const map_extent = search.get('map_extent'); + const zoom_to_fid = search.get('zoom_to_fid'); + const zoom_to_features = search.get('ztf'); // zoom to features + const coords = { + lat: 1 * search.get('lat'), + lon: 1 * search.get('lon'), + x: 1 * search.get('x'), + y: 1 * search.get('y'), + }; - //In the case of show marker, show marker on a map center - if (1 === showmarker) { - promise.then(() => { + (new Promise((resolve) => { + setTimeout(async () => { + let geom; + if (zoom_to_fid) { + await this.zoomToFid(zoom_to_fid); + } else if (zoom_to_features) { + await this.handleZoomToFeaturesUrlParameter({ zoom_to_features }); + } else if (coords.lat && coords.lon && !Number.isNaN(coords.lat) && !Number.isNaN(coords.lon)) { + geom = new ol.geom.Point(ol.proj.transform([coords.lon, coords.lat], 'EPSG:4326', this.getEpsg())); + } else if (coords.x && coords.y && !Number.isNaN(coords.x) && !Number.isNaN(coords.y)) { + geom = new ol.geom.Point([coords.x, coords.y]); + } + if (geom && geom.getExtent()) { + this.zoomToGeometry(geom).then(resolve); + } else { + resolve(); + } + }); + })) + .then(() => { + // show marker on map center + if (1 === showmarker) { this.defaultsLayers.mapcenter.getSource().addFeature(new ol.Feature({ geometry: new ol.geom.Point(this.getCenter()) })) - }) - } + } + }); - //in case only map, remove al map controls (empty object) + // iframe → hide map controls (empty object) if ('map' === iframetype) { this.config.mapcontrols = {}; } @@ -1805,9 +1798,10 @@ proto._setupViewer = function(width, height) { map_extent, /** @since 3.10.0 */ }) }); + this._setSettings(); - this.state.size = this.viewer.map.getSize(); - //set mapunit + + this.state.size = this.viewer.map.getSize(); this.state.mapUnits = this.viewer.map.getView().getProjection().getUnits(); if (this.config.background_color) { @@ -1816,13 +1810,9 @@ proto._setupViewer = function(width, height) { $(this.viewer.map.getViewport()).prepend('
'); - this.viewer.map.getInteractions().forEach(interaction => this._watchInteraction(interaction)); - - this.viewer.map.getInteractions().on('add', interaction => this._watchInteraction(interaction.element)); - - this.viewer.map.getInteractions().on('remove', interaction => { - //this._onRemoveInteraction(interaction);); - }); + this.viewer.map.getInteractions().forEach( int => this._watchInteraction(int)); + this.viewer.map.getInteractions().on('add', int => this._watchInteraction(int.element)); + this.viewer.map.getInteractions().on('remove', int => { /* this._onRemoveInteraction(int);); */ }); this._marker = new ol.Overlay({ position: null, @@ -1833,28 +1823,20 @@ proto._setupViewer = function(width, height) { this.viewer.map.addOverlay(this._marker); - /** - * - * Register map addLayer - * - */ - this.viewer.map.getLayers().on('add', evt => { - const {element:layer} = evt; - const basemap = layer.get('basemap'); - const position = layer.get('position'); - let zindex = basemap && 0; - if (position && position === 'bottom') zindex = 0; - zindex = this.setLayerZIndex({ - layer, - zindex - }); - this.moveDefaultLayersOnTop(zindex); + // Register map addLayer + this.viewer.map.getLayers().on('add', e => { + this.moveDefaultLayersOnTop( + this.setLayerZIndex({ + layer: e.element, + zindex: e.element.get('basemap') || 'bottom' === e.element.get('position') ? 0 : undefined, + }) + ); }); - this.viewer.map.getLayers().on('remove', evt => { - const {element:layer}= evt; - const layerZIndex = layer.getZIndex(); - if (layerZIndex === this.layersCount) this.layersCount-=1; + this.viewer.map.getLayers().on('remove', e => { + if (e.element.getZIndex() === this.layersCount) { + this.layersCount--; + } }) }; From 1044a07f959458ecd4008dda6a2855acd7d39526 Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 26 Mar 2024 09:03:07 +0100 Subject: [PATCH 06/19] refactor `_calculateViewOptions` (remove temp vars) --- src/app/gui/map/mapservice.js | 21 ++++++--------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index d3073db12..a220f0d1d 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -1723,23 +1723,14 @@ proto._calculateViewOptions = function({ height, map_extent, } = {}) { - - const initextent = map_extent ? map_extent.split(',').map(coordinate => 1*coordinate) : project.state.initextent; - const projection = this.getProjection(); - const extent = project.state.extent; - const maxxRes = ol.extent.getWidth(extent) / width; - const maxyRes = ol.extent.getHeight(extent) / height; - const maxResolution = Math.max(maxxRes,maxyRes); - const initxRes = ol.extent.getWidth(initextent) / width; - const inityRes = ol.extent.getHeight(initextent) / height; - const resolution = Math.max(initxRes,inityRes); - const center = ol.extent.getCenter(initextent); + const initextent = map_extent ? map_extent.split(',').map(coord => 1 * coord) : project.state.initextent; + const extent = project.state.extent; return { - projection, - center, extent, - maxResolution, - resolution + projection: this.getProjection(), + center: ol.extent.getCenter(initextent), + maxResolution: Math.max(ol.extent.getWidth(extent) / width, ol.extent.getHeight(extent) / height), // max(xRes, yRes) + resolution: Math.max(ol.extent.getWidth(initextent) / width, ol.extent.getHeight(initextent) / height), // max(xInitRes, yInitRes) } }; From 38ae0a400103f57678066882c757b1ff138c874c Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 26 Mar 2024 09:04:03 +0100 Subject: [PATCH 07/19] comment --- src/app/gui/map/mapservice.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index a220f0d1d..9957b9790 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -1814,7 +1814,7 @@ proto._setupViewer = function(width, height) { this.viewer.map.addOverlay(this._marker); - // Register map addLayer + // listen for map "addLayer" this.viewer.map.getLayers().on('add', e => { this.moveDefaultLayersOnTop( this.setLayerZIndex({ From f00e84445b736544bb2e10dbce198f64c22130dc Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 26 Mar 2024 09:07:36 +0100 Subject: [PATCH 08/19] remove function `_setUpDefaultLayers` --- src/app/gui/map/mapservice.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index 9957b9790..bf995e0ed 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -1872,7 +1872,11 @@ proto._setupAllLayers = function() { this._setupBaseLayers(); this._setupMapLayers(); this._setupVectorLayers(); - this._setUpDefaultLayers(); + // set default layers order + const map = this.getMap(); + map.addLayer(this.defaultsLayers.mapcenter); + map.addLayer(this.defaultsLayers.selectionLayer); + map.addLayer(this.defaultsLayers.highlightLayer); }; //SETUP BASELAYERS @@ -1943,13 +1947,6 @@ proto._setupVectorLayers = function() { layers.forEach(layer => { this.addLayerToMap(layer.getMapLayer()) }) }; -proto._setUpDefaultLayers = function() { - // follow the order that I want - this.getMap().addLayer(this.defaultsLayers.mapcenter); - this.getMap().addLayer(this.defaultsLayers.selectionLayer); - this.getMap().addLayer(this.defaultsLayers.highlightLayer); -}; - /** * Method to set Default layers (selectionLayer, and highlightLayer) * always on top of layer stack of a map to be always visible From 91d5df1bcd481f2aee4786dc9c487a7b0b96fbdd Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 26 Mar 2024 09:09:44 +0100 Subject: [PATCH 09/19] shorten --- src/app/gui/map/mapservice.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index bf995e0ed..168da60f9 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -2193,17 +2193,12 @@ proto.zoomTo = function(coordinate, zoom=6) { this.viewer.zoomTo(coordinate, zoom); }; -proto.goTo = function(coordinates,zoom) { - const options = { - zoom: zoom || 6 - }; - this.viewer.goTo(coordinates, options); +proto.goTo = function(coordinates, zoom) { + this.viewer.goTo(coordinates, { zoom: zoom || 6 }); }; proto.goToRes = async function(coordinates, resolution) { - await this.viewer.goToRes(coordinates, { - resolution - }); + await this.viewer.goToRes(coordinates, { resolution }); }; proto.getGeometryAndExtentFromFeatures = function(features=[]) { From cba706754e32da4e8506f533289a60678a93c944 Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 26 Mar 2024 09:16:40 +0100 Subject: [PATCH 10/19] convert to async function: `zoomToExtent` --- src/app/gui/map/mapservice.js | 49 +++++++++++++++++++---------------- 1 file changed, 27 insertions(+), 22 deletions(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index 168da60f9..31f9db861 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -2250,40 +2250,45 @@ proto.highlightFeatures = function(features, options={}) { * Zoom methods */ -proto.zoomToGeometry = function(geometry, options={highlight: false}) { +proto.zoomToGeometry = function(geometry, options = { highlight: false }) { const extent = geometry && geometry.getExtent(); - const { highlight } = options; - if (highlight && extent) { + if (options.highlight && extent) { options.highLightGeometry = geometry; } - return extent ? this.zoomToExtent(extent, options) : Promise.resolve(); + return this.zoomToExtent(extent, options); }; -proto.zoomToFeatures = function(features, options={highlight: false}) { - let {geometry, extent} = this.getGeometryAndExtentFromFeatures(features); - const {highlight} = options; - if (highlight && extent) { +proto.zoomToFeatures = function(features, options = { highlight: false }) { + let { geometry, extent } = this.getGeometryAndExtentFromFeatures(features); + if (options.highlight && extent) { options.highLightGeometry = geometry; } - return extent ? this.zoomToExtent(extent, options) : Promise.resolve(); + return this.zoomToExtent(extent, options); }; /** - * @param { ol.extet } extent - * @param {{ force?: boolean, highLightGeometry?: ol.geometry }} [options={}] + * @param { ol.extent } extent + * @param { Object } options + * @param { boolean } options.force + * @param { ol.geometry } options.highLightGeometry + * * @returns { Promise } */ -proto.zoomToExtent = function(extent, options={}) { - return new Promise(async (resolve) => { - await this.goToRes( - ol.extent.getCenter(extent), - this.getResolutionForZoomToExtent(extent, { force: options.force || false }) - ); - if (options.highLightGeometry) { - await this.highlightGeometry(options.highLightGeometry, { zoom: false, duration: options.duration }); - } - resolve(); - }) +proto.zoomToExtent = async function(extent, options = {}) { + + if (!extent) { + return Promise.resolve(); + } + + await this.goToRes( + ol.extent.getCenter(extent), + this.getResolutionForZoomToExtent(extent, { force: options.force || false }) + ); + + if (options.highLightGeometry) { + await this.highlightGeometry(options.highLightGeometry, { zoom: false, duration: options.duration }); + } + }; proto.zoomToProjectInitExtent = function() { From 7d7c68250dd2c8226cd2e6cf9522d5694733bf0d Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 26 Mar 2024 09:37:23 +0100 Subject: [PATCH 11/19] refactor function `highlightGeometry` (reduce nesting) --- src/app/gui/map/mapservice.js | 142 +++++++++++++++++----------------- 1 file changed, 70 insertions(+), 72 deletions(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index 31f9db861..0e52e850f 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -1978,13 +1978,17 @@ proto.removeDefaultLayers = function() { }; proto.setDefaultLayerStyle = function(type, style={}) { - if (type && this.defaultsLayers[type]) this.defaultsLayers._style[type] = style; + if (type && this.defaultsLayers[type]) { + this.defaultsLayers._style[type] = style; + } }; proto.resetDefaultLayerStyle = function(type, style={}) { - if (type && this.defaultsLayers[type]) this.defaultsLayers._style[type] = { - color: type === 'highlightLayer' ? undefined : 'red' - }; + if (type && this.defaultsLayers[type]) { + this.defaultsLayers._style[type] = { + color: 'highlightLayer' === type ? undefined : 'red' + }; + } }; proto.removeLayers = function() { @@ -2365,9 +2369,7 @@ let animatingHighlight = false; proto.setSelectionFeatures = function(action='add', options={}) { const {feature, color} = options; if (color) { - this.setDefaultLayerStyle('selectionLayer', { - color - }); + this.setDefaultLayerStyle('selectionLayer', { color }); } const source = this.defaultsLayers.selectionLayer.getSource(); switch (action) { @@ -2398,80 +2400,76 @@ proto.setSelectionLayerVisible = function(visible=true) { this.defaultsLayers.selectionLayer.setVisible(visible); }; +/** + * + * @param { ol.geom.Geometry | * } geometryObj + * @param { Object } options + * @param { boolean } options.zoom + * @param { boolean } options.highlight + * @param options.style + * @param options.color + * + * @returns { Promise } + */ proto.highlightGeometry = function(geometryObj, options = {}) { - return new Promise(async (resolve, reject) => { - const {color} = options; - this.clearHighlightGeometry(); - this.setDefaultLayerStyle('highlightLayer', { - color - }); - let zoom = (typeof options.zoom === 'boolean') ? options.zoom : true; - let hide = options.hide; - if (hide) hide = typeof hide === 'function' ? hide: null; - const customStyle = options.style; - const defaultStyle = function(feature) { - let styles = []; - const geometryType = feature.getGeometry().getType(); - const style = createSelectedStyle({ - geometryType, - color, - fill: false - }); - styles.push(style); - return styles; - }; - const {ANIMATION} = MAP_SETTINGS; - const highlight = (typeof options.highlight == 'boolean') ? options.highlight : true; - const duration = options.duration || ANIMATION.duration; - let geometry; - if (geometryObj instanceof ol.geom.Geometry) { - geometry = geometryObj; + const duration = options.duration || MAP_SETTINGS.ANIMATION.duration; + const hlayer = this.defaultsLayers.highlightLayer; + const hide = 'function' === typeof options.hide ? options.hide : null; + let geometry = geometryObj instanceof ol.geom.Geometry ? geometryObj : (new ol.format.GeoJSON()).readGeometry(geometryObj); + + this.clearHighlightGeometry(); + this.setDefaultLayerStyle('highlightLayer', { color: options.color }); + + return new Promise(async (resolve) => { + + if (options.zoom) { + await this.zoomToExtent(geometry.getExtent()); } - else { - const format = new ol.format.GeoJSON; - geometry = format.readGeometry(geometryObj); + + if (!options.highlight) { + return resolve(); } - if (zoom) { - const extent = geometry.getExtent(); - await this.zoomToExtent(extent); + + if (options.style) { + hlayer.setStyle(options.style); } - if (highlight) { - const feature = new ol.Feature({ - geometry - }); - const highlightLayer = this.defaultsLayers.highlightLayer; - customStyle && highlightLayer.setStyle(customStyle); - highlightLayer.getSource().addFeature(feature); - if (hide) { - const callback = () => { - highlightLayer.getSource().clear(); - if (customStyle) { - highlightLayer.setStyle(defaultStyle); - } - resolve(); - }; - hide(callback); - } else if (duration) { - if (duration !== Infinity) { - animatingHighlight = true; - setTimeout(() => { - highlightLayer.getSource().clear(); - if (customStyle) { - highlightLayer.setStyle(defaultStyle); - } - animatingHighlight = false; - resolve(); - }, duration) - } + + hlayer.getSource().addFeature(new ol.Feature({ geometry })); + + const cb = () => { + hlayer.getSource().clear(); + // set default style + if (options.style) { + hlayer.setStyle((feature) => [ + createSelectedStyle({ + geometryType: feature.getGeometry().getType(), + color: options.color, + fill: false + }) + ]); } - } else { - resolve() + if (!hide) { + animatingHighlight = false; + } + resolve(); + }; + + if (hide) { + hide(cb); } - }) + + if (duration && duration !== Infinity && !hide) { + animatingHighlight = true; + setTimeout(cb, duration); + } + + }); }; proto.clearHighlightGeometry = function() { - !animatingHighlight && this.defaultsLayers.highlightLayer.getSource().clear(); + if (!animatingHighlight) { + this.defaultsLayers.highlightLayer.getSource().clear(); + } this.resetDefaultLayerStyle('highlightLayer'); }; From 678011ca3f8c40eeb68a418ea12813a69fa3679b Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 26 Mar 2024 09:45:59 +0100 Subject: [PATCH 12/19] restore `zoom` and `highlight` --- src/app/gui/map/mapservice.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index 0e52e850f..3283862ed 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -2412,21 +2412,23 @@ proto.setSelectionLayerVisible = function(visible=true) { * @returns { Promise } */ proto.highlightGeometry = function(geometryObj, options = {}) { - const duration = options.duration || MAP_SETTINGS.ANIMATION.duration; - const hlayer = this.defaultsLayers.highlightLayer; - const hide = 'function' === typeof options.hide ? options.hide : null; - let geometry = geometryObj instanceof ol.geom.Geometry ? geometryObj : (new ol.format.GeoJSON()).readGeometry(geometryObj); + const duration = options.duration || MAP_SETTINGS.ANIMATION.duration; + const hlayer = this.defaultsLayers.highlightLayer; + const hide = 'function' === typeof options.hide ? options.hide : null; + const highlight = 'boolean' === typeof options.highlight ? options.highlight : true; + const zoom = 'boolean' === typeof options.zoom ? options.zoom : true; + let geometry = geometryObj instanceof ol.geom.Geometry ? geometryObj : (new ol.format.GeoJSON()).readGeometry(geometryObj); this.clearHighlightGeometry(); this.setDefaultLayerStyle('highlightLayer', { color: options.color }); return new Promise(async (resolve) => { - if (options.zoom) { + if (zoom) { await this.zoomToExtent(geometry.getExtent()); } - if (!options.highlight) { + if (!highlight) { return resolve(); } @@ -2440,13 +2442,11 @@ proto.highlightGeometry = function(geometryObj, options = {}) { hlayer.getSource().clear(); // set default style if (options.style) { - hlayer.setStyle((feature) => [ - createSelectedStyle({ - geometryType: feature.getGeometry().getType(), - color: options.color, - fill: false - }) - ]); + hlayer.setStyle((feature) => [createSelectedStyle({ + geometryType: feature.getGeometry().getType(), + color: options.color, + fill: false + })]); } if (!hide) { animatingHighlight = false; From ef73ba7de5fe7c1e5a5920c6bf1907e128693557 Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 26 Mar 2024 09:51:34 +0100 Subject: [PATCH 13/19] spacing --- src/app/gui/map/mapservice.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index 3283862ed..e2a13260a 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -2414,10 +2414,10 @@ proto.setSelectionLayerVisible = function(visible=true) { proto.highlightGeometry = function(geometryObj, options = {}) { const duration = options.duration || MAP_SETTINGS.ANIMATION.duration; const hlayer = this.defaultsLayers.highlightLayer; - const hide = 'function' === typeof options.hide ? options.hide : null; + const hide = 'function' === typeof options.hide ? options.hide : null; const highlight = 'boolean' === typeof options.highlight ? options.highlight : true; - const zoom = 'boolean' === typeof options.zoom ? options.zoom : true; - let geometry = geometryObj instanceof ol.geom.Geometry ? geometryObj : (new ol.format.GeoJSON()).readGeometry(geometryObj); + const zoom = 'boolean' === typeof options.zoom ? options.zoom : true; + let geometry = geometryObj instanceof ol.geom.Geometry ? geometryObj : (new ol.format.GeoJSON()).readGeometry(geometryObj); this.clearHighlightGeometry(); this.setDefaultLayerStyle('highlightLayer', { color: options.color }); From ab8df8beb9333501bcd894e1d86bcd8d38d4aed2 Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 26 Mar 2024 10:11:29 +0100 Subject: [PATCH 14/19] refactor functions: `zoomToFid` and `handleZoomToFeaturesUrlParameter` --- src/app/gui/map/mapservice.js | 124 +++++++++++++++++++--------------- 1 file changed, 68 insertions(+), 56 deletions(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index e2a13260a..a0a650d68 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -533,15 +533,17 @@ function MapService(options={}) { this.state.hidden = bool; }, setupViewer(width,height) { - if (width === 0 || height === 0) return; + if (0 === width || 0 === height) { + return; + } if (this.viewer) { this.viewer.destroy(); this.viewer = null; } this._setupViewer(width, height); - this.state.bbox = this.viewer.getBBOX(); + this.state.bbox = this.viewer.getBBOX(); this.state.resolution = this.viewer.getResolution(); - this.state.center = this.viewer.getCenter(); + this.state.center = this.viewer.getCenter(); this._setupAllLayers(); this.setUpMapOlEvents(); this.emit('viewerset'); @@ -1188,76 +1190,86 @@ proto.getLayerZindex = function(layer) { }; proto.getCenter = function() { - const map = this.getMap(); - return map.getView().getCenter(); + return this.getMap().getView().getCenter(); }; /** - * - *method to zoom to feature + * Zoom to Feature ID */ -proto.zoomToFid = async function(zoom_to_fid='', separator='|') { +proto.zoomToFid = async function(zoom_to_fid = '', separator = '|') { const [layerId, fid] = zoom_to_fid.split(separator); - if (layerId !== undefined && fid !== undefined) { - const layer = this.project.getLayerById(layerId); - const {data=[]}= await DataRouterService.getData('search:fids', { - inputs: { - layer, - fids:[fid] - }, - outputs: { - show: { - loading: false, - condition({data=[]}={}) { - return data[0] && data[0].features.length > 0; - } + + if (undefined === layerId && undefined === fid) { + return; + } + + const { data = [] } = await DataRouterService.getData('search:fids', { + inputs: { + layer: this.project.getLayerById(layerId), + fids: [fid] + }, + outputs: { + show: { + loading: false, + condition({ data = [] } = {}) { + return data[0] && data[0].features.length > 0; } } - }); - const feature = data[0] && data[0].features[0]; - if (feature) { - this.zoomToFeatures([feature]); } + }); + + const feature = data[0] && data[0].features[0]; + + if (feature) { + this.zoomToFeatures([feature]); } }; /** - * Method to handele ztf url parameter + * Handle ztf url parameter + * * @param zoom_to_feature */ -proto.handleZoomToFeaturesUrlParameter = async function({zoom_to_features='', search_endpoint='api'} = {}) { +proto.handleZoomToFeaturesUrlParameter = async function({ + zoom_to_features = '', + search_endpoint = 'api', +} = {}) { try { - const [layerNameorIdorOrigname, fieldsValuesSearch] = zoom_to_features.split(':'); - if (layerNameorIdorOrigname && fieldsValuesSearch) { - const projectLayer = this.project.getLayers().find(layer => - layer.id === layerNameorIdorOrigname || - layer.name === layerNameorIdorOrigname || - layer.origname === layerNameorIdorOrigname - ); - if (projectLayer) { - const layer = this.project.getLayerById(projectLayer.id); - const filter = createFilterFromString({ - layer, - search_endpoint, - filter: fieldsValuesSearch - }); - const {data} = await DataRouterService.getData('search:features', { - inputs: { - layer, - filter, - search_endpoint - }, - outputs: { - show: { - loading: false - } - } - }); - data && data[0] && data[0].features && this.zoomToFeatures(data[0].features) + const [id, filter] = zoom_to_features.split(':'); + + if (!id || !filter) { + return; + } + + // find project layer + const pLayer = this.project.getLayers().find(layer => + id === layer.id || + id === layer.name || + id === layer.origname + ); + + const layer = pLayer && this.project.getLayerById(pLayer.id); + + const r = pLayer && await DataRouterService.getData('search:features', { + inputs: { + layer, + filter: createFilterFromString({ layer, search_endpoint, filter }), + search_endpoint + }, + outputs: { + show: { + loading: false + } } + }); + + const features = r && r.data && r.data[0] && r.data[0].features; + + if (features) { + this.zoomToFeatures(features); } - } catch(err) { - console.log(err) + } catch(e) { + console.warn(e); } }; From 85441b7f691d15df7e2c938bb2e35bcaaecf8a4e Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 26 Mar 2024 10:19:16 +0100 Subject: [PATCH 15/19] allow zero values (`isNaN`) --- src/app/gui/map/mapservice.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index a0a650d68..2c2a4318f 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -1768,9 +1768,9 @@ proto._setupViewer = function(width, height) { await this.zoomToFid(zoom_to_fid); } else if (zoom_to_features) { await this.handleZoomToFeaturesUrlParameter({ zoom_to_features }); - } else if (coords.lat && coords.lon && !Number.isNaN(coords.lat) && !Number.isNaN(coords.lon)) { + } else if (!Number.isNaN(parseFloat(coords.lat)) && !isNaN(parseFloat(coords.lon))) { geom = new ol.geom.Point(ol.proj.transform([coords.lon, coords.lat], 'EPSG:4326', this.getEpsg())); - } else if (coords.x && coords.y && !Number.isNaN(coords.x) && !Number.isNaN(coords.y)) { + } else if (!Number.isNaN(parseFloat(coords.x)) && !Number.isNaN(parseFloat(coords.y))) { geom = new ol.geom.Point([coords.x, coords.y]); } if (geom && geom.getExtent()) { From 900a6c2cc3621ca2a084c2b4e85587a7d10926cb Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 26 Mar 2024 10:26:36 +0100 Subject: [PATCH 16/19] fix `typeof` --- src/app/gui/map/mapservice.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index 2c2a4318f..6d62788ba 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -157,8 +157,9 @@ class OlMapViewer { */ goTo(coordinates, options = {}) { const view = this.map.getView(); - const animate = options.animate || true; + const animate = 'boolean' === typeof options.animate ? options.animate : true; const zoom = options.zoom || false; + if (animate) { view.animate( { duration: 300, center: coordinates }, @@ -166,9 +167,10 @@ class OlMapViewer { )); } else { view.setCenter(coordinates); - if (zoom) { - view.setZoom(zoom); - } + } + + if (zoom && !animate) { + view.setZoom(zoom); } } @@ -1768,7 +1770,7 @@ proto._setupViewer = function(width, height) { await this.zoomToFid(zoom_to_fid); } else if (zoom_to_features) { await this.handleZoomToFeaturesUrlParameter({ zoom_to_features }); - } else if (!Number.isNaN(parseFloat(coords.lat)) && !isNaN(parseFloat(coords.lon))) { + } else if (!Number.isNaN(parseFloat(coords.lat)) && !Number.isNaN(parseFloat(coords.lon))) { geom = new ol.geom.Point(ol.proj.transform([coords.lon, coords.lat], 'EPSG:4326', this.getEpsg())); } else if (!Number.isNaN(parseFloat(coords.x)) && !Number.isNaN(parseFloat(coords.y))) { geom = new ol.geom.Point([coords.x, coords.y]); From da8e3f81a8f19d9a2bf8a811371afc3ba55002be Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 26 Mar 2024 10:34:20 +0100 Subject: [PATCH 17/19] other typeofs --- src/app/gui/map/mapservice.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index 6d62788ba..3029f127f 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -180,12 +180,13 @@ class OlMapViewer { goToRes(coordinates, options = {}) { return new Promise((resolve) => { const view = this.map.getView(); - const animate = options.animate || true; + const animate = 'boolean' === typeof options.animate ? options.animate : true; const resolution = options.resolution || view.getResolution(); const key = view.on('change:center', () => { ol.Observable.unByKey(key); setTimeout(resolve); }); + if (animate) { view.animate( { duration: 200, center: coordinates }, @@ -203,19 +204,21 @@ class OlMapViewer { */ fit(geometry, options = {}) { const view = this.map.getView(); - const animate = options.animate || true; + const animate = 'boolean' === typeof options.animate ? options.animate : true; + if (animate) { view.animate({ duration: 200, center: view.getCenter() }); view.animate({ duration: 200, resolution: view.getResolution() }); } - if (options.animate) { - delete options.animate; // non lo passo al metodo di OL3 perché è un'opzione interna - } + + delete options.animate; // non lo passo al metodo di OL3 perché è un'opzione interna + view.fit(geometry, { ...options, - constrainResolution: (undefined === options.constrainResolution && true || options.constrainResolution), + constrainResolution: (undefined !== options.constrainResolution ? options.constrainResolution : true), size: this.map.getSize() }); + } /** @@ -272,7 +275,7 @@ class OlMapViewer { .getLayers() .filter((layer) => { const props = layer.getProperties(); - return (props.visible && true !== props.basemap); + return (props.visible && true !== props.basemap); }); }; From fbfdf913fd2153ff1c93d374dce9aafe5e02c4f0 Mon Sep 17 00:00:00 2001 From: Raruto Date: Tue, 26 Mar 2024 10:48:55 +0100 Subject: [PATCH 18/19] `parseFloat` + `isNaN` instead of multiply --- src/app/gui/map/mapservice.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index 3029f127f..a1f5929ee 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -1760,10 +1760,10 @@ proto._setupViewer = function(width, height) { const zoom_to_fid = search.get('zoom_to_fid'); const zoom_to_features = search.get('ztf'); // zoom to features const coords = { - lat: 1 * search.get('lat'), - lon: 1 * search.get('lon'), - x: 1 * search.get('x'), - y: 1 * search.get('y'), + lat: parseFloat(search.get('lat')), + lon: parseFloat(search.get('lon')), + x: parseFloat(search.get('x')), + y: parseFloat(search.get('y')), }; (new Promise((resolve) => { @@ -1773,9 +1773,9 @@ proto._setupViewer = function(width, height) { await this.zoomToFid(zoom_to_fid); } else if (zoom_to_features) { await this.handleZoomToFeaturesUrlParameter({ zoom_to_features }); - } else if (!Number.isNaN(parseFloat(coords.lat)) && !Number.isNaN(parseFloat(coords.lon))) { + } else if (!isNaN(coords.lat) && !isNaN(coords.lon)) { geom = new ol.geom.Point(ol.proj.transform([coords.lon, coords.lat], 'EPSG:4326', this.getEpsg())); - } else if (!Number.isNaN(parseFloat(coords.x)) && !Number.isNaN(parseFloat(coords.y))) { + } else if (!isNaN(coords.x) && !isNaN(coords.y)) { geom = new ol.geom.Point([coords.x, coords.y]); } if (geom && geom.getExtent()) { From f6ccb2c5762cdc314b73030e6f924a1d17b2c333 Mon Sep 17 00:00:00 2001 From: volterra79 Date: Tue, 26 Mar 2024 19:31:14 +0100 Subject: [PATCH 19/19] add 500ms to setTimeout --- src/app/gui/map/mapservice.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index a1f5929ee..ecfb506bf 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -184,7 +184,7 @@ class OlMapViewer { const resolution = options.resolution || view.getResolution(); const key = view.on('change:center', () => { ol.Observable.unByKey(key); - setTimeout(resolve); + setTimeout(resolve, 500); }); if (animate) { @@ -1226,7 +1226,7 @@ proto.zoomToFid = async function(zoom_to_fid = '', separator = '|') { const feature = data[0] && data[0].features[0]; if (feature) { - this.zoomToFeatures([feature]); + await this.zoomToFeatures([feature]); } }; @@ -1779,10 +1779,9 @@ proto._setupViewer = function(width, height) { geom = new ol.geom.Point([coords.x, coords.y]); } if (geom && geom.getExtent()) { - this.zoomToGeometry(geom).then(resolve); - } else { - resolve(); + await this.zoomToGeometry(geom); } + resolve(); }); })) .then(() => {