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.
