OpenLayers add multiple GeoJSON layers

Question

I'm trying to load multiple shapefiles as GeoJSON and display them on OpenLayers.

This is the code:

 var map = new ol.Map({
 layers: [new ol.layer.Tile({
 source: new ol.source.OSM()
 })],
 target: 'map',
 controls: ol.control.defaults({
 attributionOptions: {
 collapsible: false
 }
 }),
 overlays: [overlay],
 view: new ol.View({
 projection: 'EPSG:4326',
 center: center,
 zoom: zoom,
 rotation: rotation
 })
 });
 loadshp({
 url: './10tnvillage.zip',
 encoding: 'big5',
 EPSG: 3826
 },
 function (data) {
 var vectorLayer = new ol.layer.Vector({
 source: new ol.source.Vector({
 features: (new ol.format.GeoJSON()).readFeatures(data,{
 featureProjection: 'EPSG:4326'
 })
 }),
 style: setStyle
 });
 map.addLayer(vectorLayer);
 });
 loadshp({
 url: './abadan.zip',
 encoding: 'big5',
 EPSG: 3826
 },
 function (data1) {
 var vectorLayer1 = new ol.layer.Vector({
 source: new ol.source.Vector({
 features: (new ol.format.GeoJSON()).readFeatures(data1,{
 featureProjection: 'EPSG:4326'
 })
 }),
 style: setStyle
 });
 map.addLayer(vectorLayer1);
 });

It's show the Tile layer and the latest shapefile, but not all of them.

I did used a Array List and pass it to Map object, but didn't work.

 var layers = [];
 layers.push(new ol.layer.Tile({
 source: new ol.source.OSM()
 }));
 ...
 layers.push(vectorLayer);
 ...
 layers.push(vectorLayer1);
 ....
 var map = new ol.Map({
 layers: layers,
 ...

So, how can I display all my layers in OpenLayers?

Answer 1

You could try something like below to create all the Layers using GeoJSON individually

 // create the map
 var map = new ol.Map({
 layers: [new ol.layer.Tile({
 source: new ol.source.OSM()
 })],
 target: 'map',
 controls: ol.control.defaults({
 attributionOptions: {
 collapsible: false
 }
 }),
 overlays: [overlay],
 view: new ol.View({
 projection: 'EPSG:4326',
 center: center,
 zoom: zoom,
 rotation: rotation
 })
});
//First create a Vector source from GeoJSON
var shapefileSource= new ol.source.Vector
({
 url: YOU-GEOJSON-URL
 format: new ol.format.GeoJSON()
});
// create the Vector layer based on the source 
var Vector_map_layer = new ol.layer.Vector
({
 source: shapefileSource,
}); 

After, add layers to the map

map.addLayer(Vector_map_layer)

If you could see some but not all of the layer, I would suggest you to use

map.getLayers();

to figure out what layers you have in the map, maybe you didn't add them in correctly.