From 306a3120bb9cdc5c6878adf5fa9978dc601d9580 Mon Sep 17 00:00:00 2001 From: volterra79 Date: Thu, 22 Dec 2022 12:05:34 +0100 Subject: [PATCH 01/14] Use crs object provide by server. In case of AddLayer register new Projection if not register on Application --- src/app/core/utils/geo.js | 5 +- src/app/g3w-ol/g3w.ol.js | 3 +- src/app/g3w-ol/layers/bases.js | 6 +- src/app/g3w-ol/map/maphelpers.js | 6 +- src/app/g3w-ol/projection/projection.js | 14 +-- src/app/g3w-ol/projection/projections.js | 116 ++++++----------------- src/app/gui/map/mapservice.js | 20 ++-- src/components/MapAddLayer.vue | 18 ++-- 8 files changed, 59 insertions(+), 129 deletions(-) diff --git a/src/app/core/utils/geo.js b/src/app/core/utils/geo.js index 91b7096bc..2e76c8c22 100644 --- a/src/app/core/utils/geo.js +++ b/src/app/core/utils/geo.js @@ -1,5 +1,5 @@ import CONSTANT from '../../constant'; -const {toRawType, uniqueId} = require('core/utils/utils'); +const {toRawType, uniqueId, XHR} = require('core/utils/utils'); const WMSLayer = require('core/layers/map/wmslayer'); const Filter = require('core/layers/filter/filter'); const {response: responseParser} = require('core/utils/parsers'); @@ -1641,7 +1641,7 @@ const geoutils = { }, crsToCrsObject(crs){ - if (crs === null || crs === undefined) return crs; + if (!crs) return crs; if (toRawType(crs) === 'Object' && crs.epsg) crs.epsg = geoutils.normalizeEpsg(crs.epsg); else crs = { @@ -1895,7 +1895,6 @@ const geoutils = { * TODO: remove "Geometry" sub-property (ie. find out how to merge the following functions) */ Geometry - }; module.exports = geoutils; diff --git a/src/app/g3w-ol/g3w.ol.js b/src/app/g3w-ol/g3w.ol.js index ff894e21b..398778016 100755 --- a/src/app/g3w-ol/g3w.ol.js +++ b/src/app/g3w-ol/g3w.ol.js @@ -1,8 +1,7 @@ const utils = require('core/utils/ol'); const maphelpers = require('./map/maphelpers'); - const helpers = utils.merge({}, maphelpers); module.exports = { - helpers: helpers + helpers }; \ No newline at end of file diff --git a/src/app/g3w-ol/layers/bases.js b/src/app/g3w-ol/layers/bases.js index cdd7d0090..7977247ae 100755 --- a/src/app/g3w-ol/layers/bases.js +++ b/src/app/g3w-ol/layers/bases.js @@ -3,13 +3,13 @@ const BaseLayers = {}; BaseLayers.OSM = {}; -BaseLayers.OSM.get = function({title, id, url}={}){ +BaseLayers.OSM.get = function({title='OSM', id='osm', url}={}){ return new ol.layer.Tile({ source: new ol.source.OSM({ url }), - id: id || 'osm', - title: title || 'OSM', + id, + title, basemap: true }); }; diff --git a/src/app/g3w-ol/map/maphelpers.js b/src/app/g3w-ol/map/maphelpers.js index a22d1b6b9..576f12a83 100755 --- a/src/app/g3w-ol/map/maphelpers.js +++ b/src/app/g3w-ol/map/maphelpers.js @@ -1,5 +1,4 @@ const BaseLayers = require('../layers/bases'); -const Projections = require('../projection/projections'); const MapHelpers = { createViewer(opts={}){ @@ -26,10 +25,7 @@ const _Viewer = function(opts={}) { view, keyboardEventTarget: document }; - if (opts.id) { - options.target = opts.id; - } - Projections.setApplicationProjections(); + options.target = opts.id; const map = new ol.Map(options); this.map = map; }; diff --git a/src/app/g3w-ol/projection/projection.js b/src/app/g3w-ol/projection/projection.js index 012cffcc7..76d362f60 100644 --- a/src/app/g3w-ol/projection/projection.js +++ b/src/app/g3w-ol/projection/projection.js @@ -1,15 +1,3 @@ -const GENERIC_GRID_EXTENT = [0,0,8388608,8388608]; -const GRID_EXTENT_3857 = ol.proj.get('EPSG:3857').getExtent(); -const GENERIC_GRID_EXTENT_DEGREE = [-180,-90, 180, 90]; -/** - * BACK COMPATIBILITY < v3.5 - */ -const CUSTOM_PROJECTIONS_EXTENT = { - 'EPSG:3876': [18835101.07,4367049.45,22702879.51,9383109.87], - 'EPSG:32733': GRID_EXTENT_3857, - 'EPSG:25833': [-2465144.8,3638055.41,2885759.28, 9493779.8] -}; - const Projection = function(options={}) { if (!options.crs) return null; const {epsg, proj4:proj4def, geographic=false, axisinverted=false, extent} = options.crs; // new structure of information crs from server @@ -19,7 +7,7 @@ const Projection = function(options={}) { ol.proj.Projection.call(this, { code: epsg, //FOR NOW FORCE TO GET EXTENT - extent: false ? extent : degrees ? GENERIC_GRID_EXTENT_DEGREE: CUSTOM_PROJECTIONS_EXTENT[epsg] || GENERIC_GRID_EXTENT, + extent, axisOrientation: this._axisOrientation, units: degrees ? 'degrees' : 'm' }); diff --git a/src/app/g3w-ol/projection/projections.js b/src/app/g3w-ol/projection/projections.js index 7eebcc840..69986d1c4 100644 --- a/src/app/g3w-ol/projection/projections.js +++ b/src/app/g3w-ol/projection/projections.js @@ -1,104 +1,46 @@ const Projection = require('./projection'); -const ADDEDPROJECTIONS = ['EPSG:4326', 'EPSG:3857']; +const {XHR} = require('core/utils/utils'); +const {normalizeEpsg} = require('core/utils/geo'); +const CRS_BASE_URL = '/crs/'; //Example /crs/ const Projections = { + isRegistered(epsg) { + return ol.proj.get(epsg); + }, get(crs={}) { - const cachedProjection = ADDEDPROJECTIONS.indexOf(crs.epsg) !== -1 ? ol.proj.get(crs.epsg) : null; + const cachedProjection = this.isRegistered(crs.epsg); if (cachedProjection) return cachedProjection; const projection = new Projection({ crs }); ol.proj.addProjection(projection); - ADDEDPROJECTIONS.push(crs.epsg); + ol.proj.proj4.register(proj4); return projection; }, /** - * extent get from https://epsg.io/ + * Check and register epsg + * @param epsg : "EPSG:" Ex. "EPSG:4326" + * @returns {Promise} */ - setApplicationProjections() { - this.get({ - epsg: "EPSG:3003", - proj4: "+proj=tmerc +lat_0=0 +lon_0=9 +k=0.9996 +x_0=1500000 +y_0=0 +ellps=intl +towgs84=-104.1,-49.1,-9.9,0.971,-2.917,0.714,-11.68 +units=m +no_defs", - axisinverted: false, - geographic: false, - extent: [1290650.93, 4190305.78, 2343702.24, 5261004.57] - }); - - this.get({ - epsg: "EPSG:3004", - proj4: "+proj=tmerc +lat_0=0 +lon_0=15 +k=0.9996 +x_0=2520000 +y_0=0 +ellps=intl +towgs84=-104.1,-49.1,-9.9,0.971,-2.917,0.714,-11.68 +units=m +no_defs", - axisinverted: false, - geographic: false, - extent: [1782205.39, 4190307.02, 2834974.5, 5250474.42] - }); - - this.get({ - epsg: "EPSG:3045", - proj4:"+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs", - axisinverted: true, - geographic: false, - extent: [-2465144.8, 3638055.41, 2885759.28, 9493779.8] - }); - - this.get({ - epsg:"EPSG:6708", - proj4:"+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs", - axisinverted: true, - geographic: false, - extent: [-331278.39, 3846440.97, 865258.04, 5256332.65] - }); - - this.get({ - epsg:"EPSG:32632", - proj4:"+proj=utm +zone=32 +datum=WGS84 +units=m +no_defs", - axisinverted: false, - geographic: false, - extent: [166021.44, 0.0, 833978.56, 9329005.18] - }); - - this.get({ - epsg:"EPSG:32633", - proj4:"+proj=utm +zone=33 +ellps=WGS84 +datum=WGS84 +units=m +no_defs", - axisinverted: false, - geographic: false, - extent: [166021.44, 0.0, 833978.56, 9329005.18] - }); - - this.get({ - epsg:"EPSG:32634", - proj4:"+proj=utm +zone=34 +datum=WGS84 +units=m +no_defs", - axisinverted: false, - geographic: false, - extent: [166021.44, 0.0, 833978.56, 9329005.18] - }); - - this.get({ - epsg:"EPSG:25833", - proj4:"+proj=utm +zone=33 +ellps=GRS80 +units=m +no_defs", - axisinverted: false, - geographic: false, - extent: [-2465144.8,3638055.41,2885759.28, 9493779.8] - }); - - this.get({ - epsg:"EPSG:23032", - proj4:"+proj=utm +zone=32 +ellps=intl +units=m +no_defs", - axisinverted: false, - geographic: false, - extent: [-1206117.77, 3859932.9, 2582411.08, 8051813.3] - }); - - this.get({ - epsg:"EPSG:23033", - proj4:"+proj=utm +zone=33 +ellps=intl +units=m +no_defs", - axisinverted: false, - geographic: false, - extent: [-1767202.11, 3859945.89, 2023400.16, 8079073.01] - }); - //REGISTER AT THE END THE CUSTOM PROJECTIONS - ol.proj.proj4.register(proj4) + registerProjection(epsg) { + return new Promise((resolve, reject) => { + let projection = this.isRegistered(epsg); + // check if already register + if (projection) resolve(projection); + else { + XHR.get({url: `${CRS_BASE_URL}${epsg.split(':')[1]}`}) + .then(({result, data}) => { + if (result) { + data.epsg = normalizeEpsg(data.epsg); + projection = this.get(data); + ol.proj.proj4.register(proj4); + resolve(projection); + } + }) + .catch(err => reject(err)) + } + }) } }; - module.exports = Projections; diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js index 2579a93d2..8b16a7b63 100644 --- a/src/app/gui/map/mapservice.js +++ b/src/app/gui/map/mapservice.js @@ -15,19 +15,11 @@ const ApplicationService = require('core/applicationservice'); const ProjectsRegistry = require('core/project/projectsregistry'); const MapLayersStoreRegistry = require('core/map/maplayersstoresregistry'); const WFSProvider = require('core/layers/providers/wfsprovider'); -const olhelpers = require('g3w-ol/g3w.ol').helpers; +const {helpers:olhelpers} = require('g3w-ol/g3w.ol'); const {getScaleFromResolution, getResolutionFromScale} = require('core/utils/ol'); const ControlsFactory = require('gui/map/control/factory'); const ControlsRegistry = require('gui/map/control/registry'); const VectorLayer = require('core/layers/vectorlayer'); -const SETTINGS = { - zoom : { - maxScale: 1000, - }, - animation: { - duration: 2000 - } -}; function MapService(options={}) { this.state = { @@ -229,11 +221,14 @@ function MapService(options={}) { this.viewer = null; } this._setupViewer(width, height); + this.state.bbox = this.viewer.getBBOX(); this.state.resolution = this.viewer.getResolution(); this.state.center = this.viewer.getCenter(); + this._setupAllLayers(); this.setUpMapOlEvents(); + this.emit('viewerset'); }, controlClick(mapcontrol, info={}) {}, @@ -1672,6 +1667,11 @@ proto._setupViewer = function(width, height) { this.moveDefaultLayersOnTop(zindex); }); + /** + * + * Register remove addLayer + * + */ this.viewer.map.getLayers().on('remove', evt => { const {element:layer}= evt; const layerZIndex = layer.getZIndex(); @@ -1734,6 +1734,7 @@ proto._setupListeners = function() { // SETUP ALL LAYERS proto._setupAllLayers = function() { + this._setupBaseLayers(); this._setupMapLayers(); this._setupVectorLayers(); @@ -1752,6 +1753,7 @@ proto._setupBaseLayers = function(){ this.mapBaseLayers[layer.getId()] = baseMapLayer; }); const reverseBaseLayers = Object.values(this.mapBaseLayers).reverse(); + reverseBaseLayers.forEach(baseMapLayer => { baseMapLayer.update(this.state, this.layersExtraParams); this.addLayerToMap(baseMapLayer) diff --git a/src/components/MapAddLayer.vue b/src/components/MapAddLayer.vue index f75e81ae0..c8620ab73 100644 --- a/src/components/MapAddLayer.vue +++ b/src/components/MapAddLayer.vue @@ -73,7 +73,8 @@