Use projection definition provide by server (including projection extent)

src/app/constant.js

@@ -310,6 +310,13 @@ export const ZINDEXES = {
   }
 };
 
+/**
+ * @since v3.8
+ */
+const API_BASE_URLS = {
+  CRS: '/crs/'  //Example /crs/<epsg_code>
+};
+
 export default {
   APP_VERSION,
   DEFAULT_EDITING_CAPABILITIES,
@@ -329,5 +336,6 @@ export default {
   TOC_LAYERS_INIT_STATUS,
   TOC_THEMES_INIT_STATUS,
   VIEWPORT,
-  ZINDEXES
+  ZINDEXES,
+  API_BASE_URLS
 };

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;

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
 };

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
   });
 };

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;
 };

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'
   });

src/app/g3w-ol/projection/projections.js

@@ -1,104 +1,52 @@
+import {API_BASE_URLS} from 'constant';
 const Projection = require('./projection');
-const ADDEDPROJECTIONS = ['EPSG:4326', 'EPSG:3857'];
+const {XHR} = require('core/utils/utils');
+const {normalizeEpsg} = require('core/utils/geo');
 
 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:<CODE>" Ex. "EPSG:4326"
+   * @returns {Promise<unknown>}
+   * @since v3.8
    */
-  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: `${API_BASE_URLS.CRS}${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;

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)

src/components/MapAddLayer.vue

@@ -73,7 +73,8 @@
 
 <script>
 import {EPSG} from 'app/constant';
-
+const {XHR} = require('core/utils/utils');
+const Projections = require('g3w-ol/projection/projections');
 const {createVectorLayerFromFile, createStyleFunctionToVectorLayer} = require('core/utils/geo');
 const SUPPORTED_FORMAT = ['zip','geojson', 'GEOJSON',  'kml', 'kmz', 'KMZ', 'KML', 'json', 'gpx', 'gml', 'csv'];
 const CSV_SEPARATORS = [',', ';'];
@@ -239,11 +240,20 @@ export default {
       } catch(err){this.setError('add_external_layer');}
     },
     async addLayer() {
-      if (this.vectorLayer || this.csv.valid){
-        this.loading = true;
-        //Recreate always the vector layer because we can set the right epsg after first load the file
-        // if we change the epsg of the layer after loaded
+      if (this.vectorLayer || this.csv.valid) {
+        const {crs} = this.layer;
         try {
+          /**
+           * waiting to register a epsg choose if all go right
+           */
+          try {
+            await Projections.registerProjection(crs);
+          } catch(error) {
+            this.setError(error);
+            return;
+          }
+
+          this.loading = true;
           this.vectorLayer = await createVectorLayerFromFile(this.layer);
           this.vectorLayer.setStyle(createStyleFunctionToVectorLayer({
             color: this.layer.color,
@@ -253,10 +263,10 @@ export default {
             crs: this.layer.crs,
             type: this.layer.type,
             position: this.position
-
-        });
+          });
           $(this.$refs.modal_addlayer).modal('hide');
           this.clearLayer();
+
         } catch(err){
           this.setError('add_external_layer');
         }