0

I have a really big set of layers in OpenLayers 5. I wonder how to split large source files into smaller sets and combine it via webpack.

style.js file about 30 items e.g.:

var s_al_timeout = function(feature, resolution) { var fGet = parseFloat(feature.get('last_read_timeout')); ... text: new ol.style.Text({ ... }) })]; },

vector source.js file about 30 items e.g.:

var vS_alarm_timeout = new ol.source.Vector({ loader: function(extent) { $.ajax('/wfs_ant',{ type: 'GET', data: { service: 'WFS', ... bbox: extent.join(',') + ',EPSG:3857' }, }).done(ldFe_alarm_timeout); }, strategy: ol.loadingstrategy.bbox }); var ldFe_alarm_timeout = function(response) { formatWFS = new ol.format.WFS(); fT_alarm_timeout = formatWFS.readFeatures(response); vS_alarm_timeout.addFeatures(fT_alarm_timeout); }; function refresh_alarm_timeout(){ vS_alarm_timeout.clear(true); vS_alarm_timeout.addFeatures(fT_alarm_timeout); }

And how to use $.ajax loader in webpack? (Loading jquery, good tutorial for ajax: https://alexomara.com/blog/webpack-and-jquery-include-only-the-parts-you-need/)

Popup file also many lines code. Basic code file (combine map and layers with source vector and style file).

I try with npm and webpack but I don't know how to import these smaller files... I seek tips or examples.

Trying split code into: ./script/source.js + ./script/style.js

in main.js:

require ('./scripts/source');    
require ('./scripts/style');

and in webpack.config.js add: entry: ['./main.js', './scripts/source.js', './scripts/style.js']

But no luck Uncaught ReferenceError: vS_alarm_timeout is not defined and vS_alarm_timeout is name of the source layer in main.js.

1
  • You appear to have created two accounts which inevitably leads to a frustrating experience for you, potential answerers and reviewers so please follow these instructions ASAP to merge your accounts.
    – PolyGeo
    Jul 7 '20 at 5:59
0

My solution is communication between pieces of code via import and export. It's so simple and work very good.

Example:

main.js

import {v_vector_layer1} from './source/wfs/vector_layer1';

vector_layer1.js

export var v_vector_layer1;
1
  • You appear to have created two accounts which inevitably leads to a frustrating experience for you, potential answerers and reviewers so please follow these instructions ASAP to merge your accounts.
    – PolyGeo
    Jul 7 '20 at 5:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.